Public
Edited
Sep 11, 2024
Insert cell
Insert cell
worldMap = {
//svg variables
const width = 720;
const height = 360;
const margin = 20;

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

//const long = helloDataset[i].long + 180;
//const lat = helloDataset[i].lat + 90;

for (let i=0; i< helloDataset.length; i++) {
const revLong = (parseFloat(helloDataset[i].long) + 180)*2;
//const revLat = (90 - parseFloat(helloDataset[i].lat))*2; - this also works
const revLat = height - (parseFloat(helloDataset[i].lat) + 90)*2;
//const revLong = (helloDataset[i].long + 180)*2;
//const revLat = (90 - helloDataset[i].lat)*2;
svg
.append("circle")
.attr("cx", revLong)
.attr("cy", revLat)
.attr("r", 2)
.style("fill", "rgb(" + Math.random()*255 + "," + Math.random()*255 + "," + Math.random()*255 + ")");
//.attr("opacity", 0.5);

svg
.append("text")
//.attr("x", (parseFloat(helloDataset[i].long).toFixed(3) + 180)*2)
//.attr("y", (parseFloat(helloDataset[i].lat).toFixed(3) + 90)*2)
//.attr("x", helloDataset[i].long + 180)
//.attr("y", helloDataset[i].lat + 90)
.attr("x", revLong)
.attr("y", revLat)
.attr("font-size", "8px")
.attr("font-family", "Verdana")
//.style("text-anchor", "middle")
//.style("alignment-baseline", "middle")
.text(helloDataset[i].hello);

}
return svg.node();

//return parseFloat(helloDataset[5].long).toFixed(3);
}

Insert cell
import {helloDataset} from "@zachpino/week-4-intro-to-javascript-for-visualization"
Insert cell

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.
Learn more