chart = {
const path = d3.geoPath();
const ticks = [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000];
path.projection(projection);
const x = d3
.scaleLinear()
.domain(d3.extent(color.domain()))
.rangeRound([width/2 - 250, width/2 + 250]);
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const defs = svg.append("defs");
const g = svg.append("g").attr("transform", `translate(0,${height - 30})`);
const linearGradient = defs
.append("linearGradient")
.attr("id", "linear-gradient");
linearGradient
.selectAll("stop")
.data(
ticks.map((t, i, n) => ({
offset: `${(100 * i) / n.length}%`,
color: color(t)
}))
)
.enter()
.append("stop")
.attr("offset", d => d.offset)
.attr("stop-color", d => d.color);
g.append("rect")
.attr("height", 8)
.attr("x", x(30))
.attr("width", x(80500) - x(400))
.style("fill", `url(${location}#linear-gradient)`);
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(`Constitution Length in ${year} (words)`);
g.call(
d3
.axisBottom(x)
.tickSize(13)
.tickValues(ticks)
)
.select(".domain")
.remove();
svg
.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("fill", d =>
life.has(d.id) && life.get(d.id)[year]
? color(+life.get(d.id)[year])
: "#eee"
)
.attr("d", path)
.append("title")
.text(d =>
life.has(d.id) && life.get(d.id)[year]
? format(life.get(d.id))
: "Unknown"
);
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("d", path);
svg
.append("path")
.datum({ type: "Sphere" })
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
height = width / 2 + 100
projection = d3
.geoEqualEarth()
.rotate([-10, 0])
.fitExtent([[1, 1], [width - 1, height - 51]], { type: "Sphere" })
.precision(0.1)
life = {
let [data, codes] = await Promise.all([
d3.csv(
"https://raw.githubusercontent.com/belamadrid/constlength/master/newtestccp%20-%20extras%20Copy%20of%20Copy%20of%20testccp%20(1).csv"
),
d3.csv(
"https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv"
)
]);
const lookup = new Map(codes.map(d => [d["alpha-3"], d["country-code"]]));
return new Map(
data
.filter(d => lookup.has(d["Country Code"]))
.map(d => [lookup.get(d["Country Code"]), d])
);
}
color = d3.scaleSequential(d3.interpolateSpectral).domain([400, 80000])
function format(d) {
return `${d["Country Name"]}: ${Math.round(+d[year])}`;
}
world = fetch("https://unpkg.com/world-atlas@1/world/110m.json").then(
response => response.json()
)
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
