Public
Edited
Sep 17, 2024
1 star
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]);
//loop through all items in dataset
for (let i = 0; i < helloDataset.length; i++) {
//cast to floating point number, double for desired size
const xPosition = parseFloat(helloDataset[i].long) * 2;
//cast to floating point number, double for desired size
//invert with a negative sign - big latitudes become small, small become big
const yPosition = -parseFloat(helloDataset[i].lat) * 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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.