Public
Edited
May 5, 2023
1 fork
barchart= {
const w = 500;
const h = 300;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const data = [
{ name: 'SAT Math', value: 93 },
{ name: 'Uniform Bar', value: 90 },
{ name: 'GRE Quantitative', value: 80 },
{ name: 'GRE Verbal', value: 99 },
{ name: 'GRE Writing', value: 54 },
];
let svg = d3.create("svg")
.attr('width', w)
.attr('height', h)
let xScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, w - margin.right])
.paddingInner(0.05);
let yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([h - margin.bottom, margin.top]);
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => xScale(d.name))
.attr("y", d => yScale(d.value))
.attr("width", xScale.bandwidth()) // Not xScale().bandwidth()
.attr("height", d => h - margin.bottom - yScale(d.value))
.style("fill", "steelblue");
svg.append('g')
.attr("transform", `translate(0, ${h-margin.bottom})`)
.call(d3.axisBottom(xScale))
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.
