CS Undergrad, IIIT Hyderabad,
India.
Published
Edited
Apr 1, 2020
d3 = require("d3@5")
data = Object.assign(d3.csvParse(await FileAttachment("alphabet.csv").text(), ({letter, frequency}) => ({name: letter, value: +frequency})).sort((a, b) => d3.descending(a.value, b.value)), {y: "↑ Frequency"})
height = 600
margin = ({top: 30, right: 0, bottom: 30, left: 40})
x = d3.scaleBand() //the scale functions are used for creating a function which maps data to a set of values.
.domain(d3.range(data.length)) //scaleBand helps to determine the geometry of the bars, taking into account padding between each bar. The domain is specified as an array of values (one value for each band) and the range as the minimum and maximum extents of the bands (e.g. the total width of the bar chart).
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()//the scale functions are used for creating a function which maps data to a set of values.
.domain([0, d3.max(data, d => d.value)]).nice() //here it is used to create y axes(labels)
.range([height - margin.bottom, margin.top]) //nice function is used to round
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`) //setting attributes
// .call(d3.axisBottom(x).tickFormat(i => data[i].name))
.call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0)) //see purpose of tickSizeOuter(0)
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", "blue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i)) //the tuple is (label,pos) see the scaleband implementation.
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth()); //
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
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.
