Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="1000" height="500">
<g id="countries"></g>
<g id="countrysparklines"></g>
</svg>
map = d3.select(mapContainer)
import {getMapData, drawMapLayer} with {projection} from "@emfielduva/dvlib_maps"
world = getMapData("world110m")
mapLayers = {
let mapLayers = [];
mapLayers["countries"] = drawMapLayer(map,"countries",world.features,world.idField);
return mapLayers;
}
<style>
#countries path {fill: #fefefe; stroke: #efefef;}
#countrysparklines line {stroke: #777; stroke-width: 0.5}
#countrysparklines g {opacity: 0.5;}
#countrysparklines g:hover {opacity: 1;}
</style>
gdp = FileAttachment("world-gdp-growth.csv").csv()
import {toNum} from "@emfielduva/dvlib"
First we need to get the centroid points of the countries to put the circles on.
projection = d3.geoMercator()
import {geoCentroids} with {projection} from "@emfielduva/dvlib_maps"
countryCentroids = {
let centroids = geoCentroids(world.features, "id");
return d3.index(centroids, d => d["name"]); // return it as an indexed map by country "name". It's just easier to access this way.
}
getCoord = (countryCode) => {
let coord = "";
// in matching across datasets, they may not all have a match. This will test first and return only when it does
if (typeof(countryCentroids.get(countryCode)) !== "undefined") {
coord = countryCentroids.get(countryCode).coord;
}
return coord;
}
countryGroups = map.select("#countrysparklines")
.selectAll(".countrySparkline")
.data(gdp)
.join("g")
//.attr("x", d => projection(getCoord(d["Country Code"]))[0])
//.attr("y", d => projection(getCoord(d["Country Code"]))[1])
.attr("transform", d => "translate("
+ projection(getCoord(d["Country Code"]))[0] + " "
+ projection(getCoord(d["Country Code"]))[1]
+ ")")
.attr("id", d => "sl_"+d["Country Code"]) // to name each one by it's name, prepending "sl_" to the name.
.classed("countrySparkline", true);
scaleX = d3.scaleLinear().domain([1967,2011]).range([2,28]);
scaleY = d3.scaleLinear().domain([-20,20]).range([20,0]);
gdp_pivot = FileAttachment("world-gdp-growth_pivot.csv").csv()
countryGroups.each((d,i,nodes) => {
let thisCountryCode = d["Country Code"];
let spark = d3.select(nodes[i]).selectAll("line")
.data(gdp_pivot)
.join("line")
.attr("x1", d=>scaleX(+d.Year)).attr("y1",scaleY(0))
.attr("x2", d=>scaleX(+d.Year)).attr("y2",d=>scaleY(+d[thisCountryCode]))
.style("stroke", d => +d[thisCountryCode] > 0 ? "green" : "red");
})
mapLayers["countries"].style("visibility", 'hidden')
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.
