data = d3.csvParse(await FileAttachment("data.csv").text(), d3.autoType)
data_formatted = data.slice().map(function(d) {
return {
x: d.name,
y: Math.abs(+d.pct_change)
}
})
basic_bar(data_formatted, {
height: 500,
margin: 40,
fill: "#CC3363",
opacity: 0.9,
rounding: 5
})
basic_bar = function(data, style) {
const dimension = { width: width, height: style.height, margin: style.margin }
const svg_bar = d3.create("svg")
.attr("viewBox", [0, 0, dimension.width, dimension.height]);
let xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([dimension.margin, dimension.width - dimension.margin])
.padding(0.1);
let xAxis = g => g
.attr("transform", `translate(0,${dimension.height - dimension.margin})`)
.call(d3.axisBottom(xScale).tickFormat(i => data[i].x).tickSizeOuter(0));
let yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]).nice()
.range([dimension.height - dimension.margin, dimension.margin]);
let yAxis = g => g
.attr("transform", `translate(${dimension.margin},0)`)
.call(d3.axisLeft(yScale));
svg_bar
.append("g")
.call(xAxis);
svg_bar
.append("g")
.call(yAxis);
svg_bar
.append("g")
.attr("fill", style.fill)
.attr("opacity", style.opacity)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("rx", style.rounding)
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d.y))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(0) - yScale(d.y));
return svg_bar.node();
}
d3 = require('d3@5')
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.
