Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="1000" height="500">
<g id="countries"></g>
<g id="gdpcircles"></g>
</svg>
viewof year = Inputs.range([1961, 2011], {label: "Year", step:1, value:1994})
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: #eeeeee; stroke: #ccc}
#gdpcircles circle {stroke: #ccc; opacity: 0.75;}
</style>
gdp = FileAttachment("world-gdp-growth.csv").csv()
import {rFromArea, toNum} from "@emfielduva/dvlib"
//year = "1994" // this is commented out to use the range slider at the top to define year
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;
}
gdpCircles = {
let gdpCircles = map.select("#gdpcircles").selectAll("circle")
.data(gdp)
.join("circle")
.transition().duration(500)
.attr("cx", d => projection(getCoord(d["Country Code"]))[0])
.attr("cy", d => projection(getCoord(d["Country Code"]))[1])
.attr("r", d => rFromArea(Math.abs(d[year])) * dotScaleFactor)
.style("fill", d => colorScale(toNum(d[year])));
return gdpCircles;
}
dotScaleFactor = 5
colorScale = d3.scaleLinear().domain([-25,0,25]).range(["red","gray","green"])
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.