Published
Edited
Sep 22, 2022
1 star
Hello world Map by Amélie
import {helloDataset} from "@zachpino/week-4-intro-to-javascript-for-visualization"
helloDataset
{
//svg variables
const width = 720;
const height = 360;
const margin = 10;
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [-360, -180, width, height]);
//background color
const bg = svg
.append("rect")
.attr("x", -360)
.attr("y", -180)
.attr("width", width)
.attr("height", height)
.attr("fill", "#F5E5FC");
//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);
// show the location with dots
svg
.append("circle")
.attr("cx", long_scaled[i])
.attr("cy", lat_scaled[i])
.attr("r", 1)
.attr("id", helloDataset[i].country)
.attr("fill", "#000000");
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")
}
//show visualization in Observable
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.
