Maps - Sparklines at centroids / Eric Field

Eric Field

Building and Using Tools to See. UVA Architecture + Data Science. IT Director. Instructor.

Workspace

Public

Maps

Edited

Apr 5, 2022

Fork of Maps - DotMap

•

1 fork

1 star

</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')

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more