Skip to content

Instantly share code, notes, and snippets.

@janwillemtulp
Last active February 6, 2018 23:30
Show Gist options
  • Save janwillemtulp/b33c121d2d0e9781bb1b38d88a9bcb44 to your computer and use it in GitHub Desktop.
Save janwillemtulp/b33c121d2d0e9781bb1b38d88a9bcb44 to your computer and use it in GitHub Desktop.
Intro D3 Workshop
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
circle {
fill: red;
}
</style>
</head>
<body>
<script>
var width = 960;
var height = 500;
var radius = 200;
var s = d3.scaleSqrt()
.range([0, 250])
var r = d3.scaleLinear()
.domain([0, 1])
.range([50, 300])
var c = d3.scaleLinear()
.domain([0, 1])
.range(["steelblue", "red"])
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var center = svg.append("g")
.attr("transform", "translate(" + width / 2 + ", " + height / 2 + ")")
center.selectAll(".ring")
.data(d3.range(5))
.enter().append("circle")
.attr("class", "ring")
.attr("r", function(d) { return d * 60})
.style("stroke", "gray")
.style("fill", "none")
var data = d3.range(50)
.map(function(d) {
return {
count: Math.round(Math.random() * 10)
};
})
s.domain([0, d3.max(data, function(d) { return d.count })])
function dist(d) {
return 0.1 * Math.abs(d.count - data[clickedIndex].count);
}
var clickedIndex = 0;
function update() {
data = data.map(function(d, i) {
if (i == clickedIndex) {
d.count++;
}
return d;
})
}
function render() {
var circle = center.selectAll(".item")
.data(data)
var circleEnter = circle.enter().append("circle")
.attr("class", "item")
.on("click", function(d, i) {
clickedIndex = i;
update();
render();
})
circleEnter.merge(circle).transition()
.duration(800)
.attr("r", function(d) { return 10 + d.count })
.attr("cx", function(d, i) {
if (i == clickedIndex) {
return 0;
}
return r(dist(d)) * Math.cos((i / data.length) * Math.PI * 2)
})
.attr("cy", function(d, i) {
if (i == clickedIndex) {
return 0;
}
return r(dist(d)) * Math.sin((i / data.length) * Math.PI * 2)
})
.style("fill", function(d) { return c(dist(d))})
}
update();
render();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment