Skip to content

Instantly share code, notes, and snippets.

@pstuffa
Last active September 12, 2016 02:31
Show Gist options
  • Save pstuffa/08c240eed377d8103f1c to your computer and use it in GitHub Desktop.
Save pstuffa/08c240eed377d8103f1c to your computer and use it in GitHub Desktop.
Rorschach II

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

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0;
}
</style>
<body>
<br />
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment