Published
Edited
Sep 12, 2021
d3 = require("d3@6")
topojson = require("topojson-client@3")
//internet-usage dataset
internet = FileAttachment("internetShare.csv").csv({typed: true})
//Geodata of world
world = FileAttachment("countries-50m (2).json").json()
countries = topojson.feature(world, world.objects.countries)
countryArray = countries.features
{countryArray.forEach(function(d){
d.id = +d.id
});
}
{
internet.forEach(function(d){
for (let i = 0; i < countryArray.length; i++)
{
if (countryArray[i] ["id"] == d.id){
d.name = countryArray[i].properties.name;
break; //breaks the loop as it is not needed to go through the entire countryCodes
}
}
})
}
nameGroup = d3.group(sliderworld, d=>d.name) //groups according to the name and returns a map
//returns the map where the key(or country name) is mapped to the internet values
data = {
var myMap = new Map();
nameGroup.forEach((value, key) => {
value = value[0].internet
myMap.set(key, value)
})
return myMap
}
color = d3.scaleSequential()
.domain(d3.extent(Array.from(data.values())))
.interpolator(d3.interpolatePlasma)
.unknown("darkgrey") //colors darkgrey for the non-existing data
projection = d3.geoEqualEarth()
path = d3.geoPath(projection)
//axis for the slider scale
xAxis = g => g
.call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(d3.format('d')))
chart = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g")
g.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("fill", d => color(data.get(d.properties.name))) //colors according the the intensity of data or fills grey color
.attr("d", path)
.append("title") //displays content on mouse hovering
.text(d => `${d.properties.name}
${data.has(d.properties.name) ? data.get(d.properties.name) : "N/A"}`); //shows N/A on grey color areas
//The following draws boundary line (white stroke which seperates each countries)
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
return svg.node();
}
sliderworld = internet.filter(d=> (d.year == year)) //filters dataset according to the selected year by the slider value
import {legend} from "@d3/color-legend"
import {slider} from '@manzt/mcv-choropleth-map-with-barchart-using-vega-embed'
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.
