Creative Director
chart = {
const height = width / 1.8;
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.style("margin-bottom", "30px");
const projection = d3.geoNaturalEarth1()
.scale(width / 4.8)
.translate([width / 2.15, height / 1.7])
.precision(.1);
const path = d3.geoPath()
.projection(projection);
svg.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("fill", "#ccc")
.attr("d", path)
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
.attr("d", path);
var circles = svg.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
circles
.enter()
.append("circle")
.attr("fill", "black")
.style("opacity", 0)
.attr("r", 50)//d3.randomUniform(0,50)())
.attr("cx", function(d) {
if(path.centroid(d)[0] < 500) return -10
else return 1010
})
.attr("cy", function(d) { return d3.randomUniform(0,600)()
// if(path.centroid(d)[1] < 300) return -10
// else return 600
})
.transition()
.duration(1500)
.ease(d3.easeCubicOut) // See also d3.easeCubicInOut, d3.easeQuadInOut
.delay(function(d, i) { return 2000 + i * 8; })
.attr("r", 3)
.attr("cx", function(d) { return path.centroid(d)[0] })
.attr("cy", function(d) { return path.centroid(d)[1] })
.style("opacity", 1)
// circles
// .exit()
// .remove()
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
