Creative Technologist, Data Visualizer and HCI researcher.
{
//svg variables
let width = 720;
let height = 360;
//create SVG artboard
let svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//loop through helloDataset and draw circles and hello words for each
for (let i = 0; i < helloDataset.length; i++){
let randomColor = Math.floor(Math.random()*16777215).toString(16);
svg.append('circle')
.attr("cx", (parseFloat(helloDataset[i].long)+ 180) * 2)
.attr("cy", height - (parseFloat(helloDataset[i].lat)+ 90) * 2)
.attr('r', 1.5)
.style('fill', "#" + randomColor );
svg.append("text")
.attr("x",(parseFloat(helloDataset[i].long)+ 180) * 2)
.attr("y", height - (parseFloat(helloDataset[i].lat)+ 90) * 2)
.style("text-anchor","start")
.style("fill", "#" + randomColor)
.style("font-size", (Math.random() * 15) + "px")
.style("opacity", Math.random())
.style("alignment-baseline","middle")
.text(helloDataset[i].hello);
}
//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.
