md`# Skies`
md`Dot density on filled rectangles`
{
const width = 950
const height = 450
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const grouptext = svg.append("g")
const queries = d3.cumsum(mapData.data, d => d.query_count/25)
group.selectAll("rect").data(mapData.data).enter()
.append("rect")
.attr("x", function (d, i) { return queries[i] - queries[0]; })
.attr("y", 30)
.attr("height", 300)
.attr("width", function (d, i) { return d.query_count / 25; })
.style("opacity", 1)
.attr("fill", function (d, i) { return d3.rgb(10, 225 - i * 10, 255 - i * 10); })
.attr("stroke", "white");
group.selectAll("text").data(mapData.data).enter()
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", function (d, i) { return queries[i] - queries[0]; })
.attr("x", 0 - (340))
.attr("dy", "1em")
.style("text-anchor", "end")
.text(function (d, i) { return d.terms; })
.attr("font-family", "Gill Sans, serif")
.attr("font-size", 12)
.attr("opacity", 1)
.style("fill", "black");
grouptext.selectAll("text").data(mapData.data).enter()
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", function (d, i) { return 13 + queries[i] - queries[0]; })
.attr("x", 0 - (340))
.attr("dy", "1em")
.style("text-anchor", "end")
.text(function (d, i) { return d.click_count + " of " + d.query_count; })
.attr("font-family", "Gill Sans, serif")
.attr("font-size", 9)
.attr("opacity", 1)
.style("fill", "#999");
for (let o = 0; o < queries.length; o++) {
const clicks = mapData.data[o].click_count
for (let k = 0; k < clicks; k++) {
const randy = Math.random()
const randx = Math.random()
group
.append("circle")
.attr("cx", function (d, i) { return queries[o] - queries[0] + randx * mapData.data[o].query_count/25; })
.attr("cy", 30 + randy * 300)
.attr("r", 1)
.style("opacity", 1)
.attr("fill", "white")
.attr("stroke", "none")
}
}
return svg.node();
}
mapData = FileAttachment("opportunities_obs.json").json()
d3 = require("d3@6")
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.
