block by pstuffa 08c240eed377d8103f1c

Rorschach II

Full Screen

Inkblot, 2nd attempt. Working with scales. Uses random data, so refresh to create new inkblots.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  margin: 0;
}

</style>
<body>


<br />
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

function randomData(datalist) {

  for (var i = 0; i < 100; i++) {          
      var newNumber = Math.random() * 40;  
      datalist.push(newNumber);            
  }

}

var dataset = [];                            
randomData(dataset);

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 1000 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width/2])
    .domain([-1, d3.max(dataset) + 1 ]).nice();

var y = d3.scale.linear()
    .range([height, 0])
    .domain([-5, 105]).nice();

var sizeScale = d3.scale.linear()
    .domain([0.0,30.0])
    .range([1, 25]);

var opacityScale = d3.scale.linear()
    .domain([0.0,30.0])
    .range([0.70, 1]);

// var colorScale = d3.scale.category10();

var circles = d3.select("body")
               .select("svg")
              .selectAll(".circles");


d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + 450 + "," + margin.top + ")")
  .selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("class","circles")
    .attr("r", function(d, i) { return sizeScale(d); })
    // .style("fill-opacity", function(d, i) { return opacityScale(d); })
    .attr("cx", function(d, i) { return x(d); })
    .attr("cy", function(d, i) { return y(i); })
    .attr("transform", "translate(-400, 0) scale(1, 1)");


d3.select("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + 450 + "," + margin.top + ")")
  .selectAll("circle")
    .data(dataset)
  .enter().append("circle")
    .attr("class","circles")
    .attr("r", function(d, i) { return sizeScale(d); })
    // .style("fill-opacity", function(d, i) { return opacityScale(d); })
    .attr("cx", function(d, i) { return x(d); })
    .attr("cy", function(d, i) { return y(i); })
    .attr("transform", "translate(400, 0) scale(-1, 1)");


</script>

</body>
</html>