Published
Edited
Sep 21, 2022
Week 5: World Languages Map in Javascript
import {helloDataset} from "@zachpino/week-4-intro-to-javascript-for-visualization"
helloDataset
WorldMap = {
//svg variables
const width = 720;
const height = 360;
//create SVG artboard canvas and make 0,0 in the middle
const svg = d3.create("svg").attr("viewBox", [-360, -180, width, height]);
//cool colored background - choose hex!
const bg = svg
.append("rect")
.attr("x", -360)
.attr("y", -180)
.attr("width", width)
.attr("height", height)
.attr("fill", "#ADD8E6");
//tell it to count each thing in the dataset
const long_scaled = [];
const lat_scaled = [];
//tell it to count each thing in the dataset
for (let i = 0; i < 240; i++) {
long_scaled[i] = (helloDataset[i].long)*2;
lat_scaled[i] = (helloDataset[i].lat)*(-2);
svg
.append("circle")
.attr("cx", long_scaled[i])
.attr("cy", lat_scaled[i])
.attr("r", 1)
.attr("id", helloDataset[i].country)
.attr("fill", "#00FF00");
svg
.append("text")
.attr("x", long_scaled[i])
.attr("y", lat_scaled[i]-2)
.text(helloDataset[i].hello)
.style("text-anchor", "middle")
.attr("fill", "#000000")
.style("font-size", "2")
.style("text-anchor", "middle")
}
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.
