Week 2: Data-Driven ImageryZach's Sol Lewitt ChallengeWeek 3 : Intro to Javascript for VisualizationZach's Hello World Map ChallengeWeek 4: Data Capture and InteractivityZach's 2x2 ExampleWeek 5 : Data Access and APIsWeek 6 : D3 Scales, Statistics, and ChartsLanguage Scatter PlotCoding Challenge: 2D HeatmapBirth HeatmapData JoiningEvents, Animation, and Interactivity
Working with Geo Data
rawWorld = FileAttachment("countries-50m.json").json()
rawScholarData = FileAttachment("intl-scholars@2.csv").csv()
cleanedScholarData = rawScholarData
.map((d) => {
let newObj = {};
for (let prop in d) {
if (prop.substring(0, 1) == "2") {
newObj[prop] = parseFloat(d[prop]) ? parseFloat(d[prop]) : 0;
} else {
newObj[prop] = d[prop];
}
}
return newObj;
})
.filter((d) => d.entity == "country")
scholarWorldData = rawWorld.features.map((d) => ({
...d,
scholars: cleanedScholarData.find((e) => e.name == d.properties.SOVEREIGNT)
? cleanedScholarData.find((e) => e.name == d.properties.SOVEREIGNT)
: cleanedScholarData.find((e) => e.name == d.properties.NAME)
}))
scholarWorldData.filter((d) => !d.scholars).map((d) => d.properties.NAME)
margin = ({ top: 20, bottom: 100, sides: 20 })
worldProjection = d3
.geoEqualEarth()
.fitSize([width - margin.sides * 2, width / 2], worldOutline)
worldPath = d3.geoPath().projection(worldProjection)
worldOutline = d3.geoGraticule().outline()
graticules = d3.geoGraticule().step([15, 15])
colorScale = d3
.scaleLinear()
.domain(
d3.extent(scholarWorldData, (d) =>
d.scholars ? d.scholars[year] : 0
)
)
.range([0, 1])
//Inputs.select is a dropdown selection UI!
viewof year = Inputs.select(
Object.keys(scholarWorldData[0].scholars)
.filter((d) => d.substring(0, 1) == "2")
.filter((d) => d.split("-")[1] == "Scholars"),
{ value: "2019/20-Scholars" }
)
//find "Nigeria" in the list of countries, and get the user-selected year scholar count.
scholarWorldData.find((d) => d.properties.NAME == "Nigeria").scholars[year]
{
// create SVG artboard
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", width / 2 + margin.bottom);
// create background color rectangle
svg
.append("rect")
.attr("width", width)
.attr("height", width / 2 + 100)
.attr("fill", "#f9f9fe");
// add group for holding everything
const countryGroup = svg
.append("g")
.attr("transform", "translate(" + margin.sides + " " + margin.top + ")");
// fill world outline for ocean coloring
countryGroup
.append("path")
.attr("d", worldPath(worldOutline))
.attr("fill", "#4488cc");
// draw countries with choropleth coloring
countryGroup
.selectAll(".countries")
.data(scholarWorldData)
.join("path")
.attr("d", worldPath)
.attr("class", "countries")
.attr("fill", (d) => {
if (d.scholars) {
return d3.interpolateViridis(colorScale(d.scholars[year]));
} else {
return "gray";
}
})
.attr("stroke", "white")
.attr("stroke-width", 0.5)
// attach event listeners
.on("mouseover", (e, d) => {
d3.select(e.target).transition().attr("stroke-width", 2);
d3.select("#dataHolder").text(
`${d.properties.NAME} had ${
d.scholars[year]
} international scholars in school year ${year.split("-")[0]}`
);
})
.on("mouseout", (e, d) => {
d3.select(e.target).transition().attr("stroke-width", 0.5);
d3.select("#dataHolder").text("Mouseover a country for details");
});
// add the graticule lines
countryGroup
.append("path")
.attr("d", worldPath(graticules()))
.attr("stroke", "#dcdcdc")
.attr("stroke-width", 0.5)
.attr("fill", "none");
// create area for text to be displayed
svg
.append("text")
.attr("x", width / 2)
.attr("y", width / 2 + margin.bottom / 2)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("id", "dataHolder")
.attr("font-family", "Futura")
.text("Mouseover a country for details");
return svg.node();
}
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.
