Published
Edited
Sep 13, 2021
Insert cell
# Hello world map
Insert cell
import {helloDataset} from "@zachpino/week-2-intro-to-javascript-for-visualization"
Insert cell
helloDataset
Insert cell
{
//svg variables
const width = 720;
const height = 360;
const x= 360;
const y = 180;
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

//black background
const bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#000");

//loop through data and draw circles and write hello for each country
for (let i = 0; i < helloDataset.length; i++) {
//circle
svg
.append("circle")
.attr("cx", ( x+(helloDataset[i].long*2)))
.attr("cy", ( (y-(helloDataset[i].lat)*2)))
.attr("r", 2)
.attr("id", helloDataset[i].code)
.attr("fill","teal")
//hello

svg.append("text")
.attr("x", x+(helloDataset[i].long*2))
.attr("y", y-(helloDataset[i].lat*2))
.style('font-family','helvetica')
.style('font-size',6)
.style('fill','white')
.style('text-anchor','left')
.text( helloDataset[i].hello )
}
return svg.node();
}
Insert cell
typeof(helloDataset[4].hello)
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