Public
Edited
Oct 15, 2024
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const x = d3.scaleBand()
.domain(d3.range(salesData.length))
.range([margin.left, width - margin.right])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(salesData, d => d.sales)])
.nice()
.range([height - margin.bottom, margin.top]);
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => salesData[i].month))
.selectAll('text')
.attr('transform', 'translate(-10,0)rotate(-45)')
.style('text-anchor', 'end');
svg.append('g')
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
const bar = svg.append('g')
.attr('fill', 'steelblue')
.selectAll('rect')
.data(salesData)
.join('rect')
.attr('x', (d, i) => x(i))
.attr('y', d => y(d.sales))
.attr('height', d => y(0) - y(d.sales))
.attr('width', x.bandwidth());
const labels = svg.append('g')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('fill', 'black')
.selectAll('text')
.data(salesData)
.join('text')
.attr('x', (d, i) => x(i) + x.bandwidth() / 2)
.attr('y', d => y(d.sales) - 5)
.attr('text-anchor', 'middle')
.text(d => d.sales);
return svg.node();
}
salesData = [
{ month: "Jan", sales: 1000 },
{ month: "Feb", sales: 1200 },
{ month: "Mar", sales: 900 },
{ month: "Apr", sales: 1500 },
{ month: "May", sales: 1800 },
{ month: "Jun", sales: 1300 }
]
margin = ({top: 20, right: 0, bottom: 30, left: 40})
width = 800
height = 600
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.
