Public
Edited
Oct 23, 2023
bars = {
const container = html `<svg width="850" height="750"/>`
const svg = d3.select(container)
svg.append('g')
.attr('class','bars')
.selectAll('rect')
.data (data)
.join('rect')
.attr('class','bar')
.attr('x', d => xScale(d.category))
.attr('y', d => yScale(d.allocation))
.attr('width', xScale.bandwidth())
.attr('height', d=> yScale(0) - yScale(d.allocation))
.style('fill', ' #ff9ef1')
.style('stroke','white')
.style('stroke-width','4px')
.style('background-color','black')
svg.append('g')
.attr('class', 'x-axis')
.attr('transform',`translate(0,${ height - margin.bottom })`)
.call( xAxis )
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end")
.style('font-weight','bold')
.style('font-size','14px')
.style('color','black')
svg.append('g')
.attr('class','y-axis')
.attr('transform',`translate(${ margin.left },0)`)
.call( yAxis )
.selectAll("text")
.style('font-size','16px')
.style('color','black')
.style('font-weight','bold')
return container
}
height = 600
width = 1000
margin = ({
top: 20,
right: 10,
bottom: 20,
left: 130
})
yMax = d3.max(data, d => d.allocation)
xDomain = data.map(d=>d.category)
xScale = d3.scaleBand()
.domain( xDomain )
.range([margin.left, width - margin.right - margin.left])
.padding(0.4)
yScale = d3.scaleLinear()
.domain([ 0, yMax ])
.range([ height - margin.bottom, margin.top ])
xAxis = d3.axisBottom(xScale)
.tickSizeOuter(0)
yAxis = d3.axisLeft(yScale)
.tickSizeOuter(0)
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.
