Public
Edited
Apr 3, 2023
bars = {
const container = html `<svg width="2000" height="950"/>`
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.ntaname))
.attr('y', d => yScale(d.bblviolations))
.attr('width', xScale.bandwidth())
.attr('height', d=> yScale(0) - yScale(d.bblviolations))
.style('fill', 'black')
.style('stroke','white')
// .style('stroke-width','4px')
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','10px')
.style('color','black')
svg.append('g')
.attr('class','y-axis')
.attr('transform',`translate(${ margin.left },0)`)
.call( yAxis )
.selectAll("text")
.style('font-size','10px')
.style('color','black')
.style('font-weight','bold')
return container
}
height = 600
width = 2000
yMax = d3.max(data, d => d.bblviolations)
xDomain = data.map(d=>d.ntaname)
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)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
