I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
Apr 2, 2021
3 forks
2 stars
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS8o78LHLQ7mU2kjOz0wcSKpfxOucfXH0ZYWornP06hQWfPhmbFPV9DextYx8ihzrLVMMJZAZEVS_LV/pub?gid=0&single=true&output=csv"
data = d3.csv(url, d3.autoType)
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.right})`);
g.selectAll("rect")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => y(d.letter))
.attr("width", d => x(d.frequency))
.attr("height", y.bandwidth())
.style("fill", "steelblue");
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${iheight})`);
g.append("g").call(d3.axisLeft(y));
return svg.node();
}
x = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.frequency)])
.range([0, iwidth])
.nice()
y = d3
.scaleBand()
.domain(data.map(d => d.letter))
.range([0, iheight])
.padding(0.1)
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
margin = ({
left: 50,
right: 20,
top: 20,
bottom: 50
})
height = 300
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.
