Skip to content

Instantly share code, notes, and snippets.

@chule
Created September 11, 2019 19:51
Show Gist options
  • Save chule/7e96f23d814fb1aed98352d3de874ab8 to your computer and use it in GitHub Desktop.
Save chule/7e96f23d814fb1aed98352d3de874ab8 to your computer and use it in GitHub Desktop.
fresh block
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script src="script.js"></script>
</body>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
const colorScale = d3.scaleOrdinal()
.domain(["apple", "lemon"])
.range(["darkred", "yellow"]);
const radiusScale = d3.scaleOrdinal()
.domain(["apple", "lemon"])
.range([50, 25]);
const render = (selection, props) => {
const circles = selection.selectAll("circle").data(props, d => d.id);
circles
.enter()
.append("circle")
.attr("cy", 200)
.attr("r", 0)
.attr("cx", (d,i) => i * 120 + 60)
.merge(circles)
.transition()
.duration(750)
.attr("cx", (d,i) => i * 120 + 60)
.style("fill", d => colorScale(d.type))
.attr("r", d => radiusScale(d.type));
circles
.exit()
.transition()
.duration(750)
.attr("r", 0)
.style("opacity", 0)
.remove();
}
const makeFruit = (type) => {
return {type, id: Math.random()}
}
let fruits = d3.range(5).map(function(d){
return makeFruit("apple")
});
render(svg,fruits)
setTimeout(() => {
fruits.pop();
render(svg,fruits)
}, 1000)
// replace apple with lemon
setTimeout(() => {
fruits[2].type = "lemon"
console.log(fruits)
render(svg,fruits)
}, 2000)
setTimeout(() => {
fruits = fruits.filter((d,i) => i !== 1);
render(svg,fruits)
}, 3000)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment