Published
Edited
Sep 21, 2022
HelloMap = {
const width = 720;
const height = 360;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "AliceBlue");
for (let i = 0; i < helloDataset.length; i++) {
const letters = svg
.append("text")
.attr("x", (helloDataset[i].long * 2.5) + 330)
.attr("y", (helloDataset[i].lat * -2.5) + 190)
.attr("fill", "DarkCyan")
.style("text-anchor", "middle")
.attr('style', "font-size: 7px")
.text(helloDataset[i].hello)
}
for (let i = 0; i < helloDataset.length; i++) {
const circles = svg
.append("circle")
.attr("cx", (helloDataset[i].long * 2.5) + 330)
.attr("cy", (helloDataset[i].lat * -2.5) + 190)
.attr("r", 2)
.attr("fill", "DarkSlateGrey")
}
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.
