Published
Edited
Sep 14, 2021
import {helloDataset} from "@zachpino/week-2-intro-to-javascript-for-visualization"
d3 = require("d3@7")
projection = d3.geoEqualEarth();
//create SVG artboard
{
const width=1080;
const height=360;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var arrayLength = helloDataset.length;
//loop through the data list
for (let i = 0; i < arrayLength; i++) {
const lat = helloDataset[i].lat
const long = helloDataset[i].long
const hello = helloDataset[i].hello
//create a group
var g = svg.append("g");
//grouping the circle and text together
// append cirle and text to the group
// function of the geoequalEarth and bring back the long,lat to the xy plane
g
.append("circle")
.attr("cx", function(d) { return projection([long,lat])[0] })
.attr("cy", function(d) { return projection([long,lat])[1] })
.attr("r", 3)
.style("stroke", "black")
.style("fill", "white")
g.append("text")
.attr("x", function(d) { return projection([long,lat])[0] })
.attr("y", function(d) { return projection([long,lat])[1] })
.style("font-size", "10px")
.style("font-weight", "500")
.style('font-family', '"Open Sans", sans-serif')
.style( "fill",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
.text(hello);
}
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.
