dataviz, R obsessed, learning D3 with #100daysofD3
Twitter: @W_R_Chase
Published
Edited
Sep 23, 2019
rounded_earth = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const g = svg.append("g")
g.selectAll(".land")
.data(ms_countries.features)
.join("path")
.attr("fill", d => color(d.properties.plastic))
.attr("d", round)
//.attr("stroke", "black")
//.style("fill", "black")
g
.append("path")
.datum(topojson.mesh(ms_world, ms_world.objects.foo, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
normal_color = color(ms_countries.features[100].properties.plastic)
unknown_color = color(ms_countries.features[0].properties.plastic)
color = d3.scaleQuantile()
.domain([0, 0.05])
.range(d3.schemeBlues[9])
.unknown("#ccc");
projection = d3.geoEqualEarth()
.fitExtent([[0, 0], [width, height]], { type: "Sphere" })
.precision(0.1)
path = d3.geoPath()
.projection(projection)
function round(x) {
let my_path = path(x).split("M")
my_path.shift()
let land_rounded = []
my_path.forEach(d => { land_rounded.push(d.replace(/Z/,"").split("L").map(p => p.split(","))) })
let curves = []
let curve_path = land_rounded.forEach(d => { curves.push(line(d)) })
return curves
}
line = d3.line()
.x(d => d[0])
.y(d => d[1])
.curve(d3.curveBasisClosed)
ms_countries = topojson.feature(ms_world, ms_world.objects.foo)
spread = ms_countries.features.map(d => d.properties).map(d => d.plastic)
ms_world = d3.json("https://gist.githubusercontent.com/will-r-chase/71eacc371bd42459dadb40fc046b60ef/raw/819225e63b88da1020d2e009bec78873b51d4a31/plastic_map.topojson")
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.
