Public
Edited
Feb 27, 2024
dataMax = d3.max(data, d=>d['num'])
dataEmun = d3.groups(data, d=>d['name']).map(d=>d[0])
buffer = 5
Yscale = d3.scaleLinear()
.domain([0, dataMax + rangeBuffer])
.range([layout.innerHeight, 0])
Xscale = d3.scaleBand()
.domain(dataEmun)
.range([0, layout.innerWidth])
.paddingOuter(0.3)
.paddingInner(0.5)
Yaxis = d3.axisLeft().scale(Yscale)
Xaxis = d3.axisBottom().scale(Xscale)
viewof offset = Inputs.range([-20, 20], {label: "offset", step: .1, value: 0})
viewof rangeBuffer = Inputs.range([0, 40], {label: "rangeBuffer", step: .1, value: 2})
viewof showFrame = Inputs.toggle({label: "showFrame", value: true})
chart = {
const svg = d3.create('svg').attr('width', layout.width).attr('height', layout.height)
const g = svg.append('g').attr('transform',`translate(${layout.margin.left},${layout.margin.top})`)
const chartG = g.append('g').attr('id', 'chart')
const axisG = g.append('g').attr('id', 'axis')
g.append('rect')
.attr('width', layout.innerWidth)
.attr('height', layout.innerHeight)
.attr('fill','none')
.attr('stroke', '#CC398C')
.attr('visibility', ()=>showFrame?'visible':'hidden')
chartG.append('g')
.selectAll('g')
.data(data)
.join('rect')
// .attr('transform', d=>`translate(${Xscale(d['name'])},${Yscale(d['num'])})`)
.attr('x', d=>Xscale(d['name']))
.attr('y', d=>Yscale(d['num']))
.attr('width', Xscale.bandwidth)
.attr('height', d=> layout.innerHeight - Yscale(d['num']))
.attr('fill', '#3370EB')
.attr('rx',2).attr('ry',2)
chartG.raise()
axisG.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${layout.innerHeight})`)
.call(Xaxis)
axisG.append('g')
.attr('class', 'y-axis')
.call(Yaxis)
.call(g=>{
g.selectAll('.tick line')
// .clone()
.attr("x2", layout.innerWidth)
.attr("stroke-opacity", 0.15)
})
.call(g=>{
g.selectAll('.domain').remove()
})
// .call(g=>{
// g.selectAll('.domain, .tick line')
// .attr('stroke', dashboardStyle.axisLine)
// g.selectAll('text')
// .attr('fill', dashboardStyle.axisText)
// })
return svg.node()
}
layout = ({
width: width,
height: 600,
margin:{
top: 30,
right: 30,
bottom: 30,
left: 30,
},
get innerWidth(){
return this.width - this.margin.right - this.margin.left
},
get innerHeight(){
return this.height - this.margin.top - this.margin.bottom
}
})
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.
