Published
Edited
Sep 14, 2021
Hello World Data Visualization**
d3 = require("d3@7")
import {helloDataset} from "@zachpino/week-2-intro-to-javascript-for-visualization"
helloDataset
{
const width = 720;
const height = 360;
//create SVG artboard
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
for(let i = 0; i < helloDataset.length; i++){
svg
.append("circle")
.attr("cx", (parseFloat(helloDataset[i].long)+180)* 2)
.attr("cy", (-parseFloat(helloDataset[i].lat)+90)* 2)
.attr("r", 1)
.attr("fill", "#ffffff")
.attr("stroke", "#000000")
svg
.append("text")
.attr("x", (parseFloat(helloDataset[i].long)+180)* 2)
.attr("y", (-parseFloat(helloDataset[i].lat)+90)* 2 -7)
.style("text-anchor", "middle")
.style("alignment-baseline", "middle")
.style("font-size", "10px")
.text(helloDataset[i].hello);
}
return svg.node()
}
simpleScale = d3.scaleLinear().domain([90, -90]).range([0, 360])
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.
