Zach's Hello World Map Challenge / Zach Pino

Zach Pino

Workspace

Public

Edited

Sep 17, 2024

1 star

ID Fall 2022 Communication Systems Workshop

Also listed in…

F24 Communication Systems: Data Viz

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

helloDataset

viewof xOffset = Inputs.range([-50, 50], { step: 0.1, value: 5 })

viewof yOffset = Inputs.range([-50, 50], { step: 0.1, value: 2 })

viewof fontSize = Inputs.range([5, 20], { step: 0.1, value: 9 })

{

//svg variables

const width = 720;

const height = 360;

//create SVG artboard

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

//loop through all items in dataset

for (let i = 0; i < helloDataset.length; i++) {

//cast to floating point number, shift by 180 to remove negative numbers, double for desired size

const xPosition = (parseFloat(helloDataset[i].long) + 180) * 2;

//cast to floating point number, shift by 90 to remove negative numbers, double for desired size

//subtract from height to flip upside down -- big latitudes become small, small become big

const yPosition = height - (parseFloat(helloDataset[i].lat) + 90) * 2;

//draw circle for each item

svg

.append("circle")

.attr("cx", xPosition)

.attr("cy", yPosition)

.attr("r", 2)

.attr("fill", "white")

.attr("stroke", "black")

.attr("stroke-width", 1);

//write text for each item

svg

.append("text")

.attr("x", xPosition + xOffset) // the addition of a fixed number here moves the text just a bit over

.attr("y", yPosition + yOffset) // the addition of a fixed number here moves the text just a bit down

.text(helloDataset[i].hello)

.attr("fill", "black")

.attr("font-family", "courier")

.attr("font-size", fontSize);

}

//show visualization in Observable

return svg.node();

}

{

//create SVG artboard

//note that the viewbox here is exactly what we want, which means we can simplify some of the math below

//the syntax is [x-origin, y-origin, width, height]

const svg = d3.create("svg").attr("viewBox", [-360, -180, 720, 360]);