Public
Edited
Jan 22, 2022
Triangle Bar Chart
{
const svgBackgroundColor = "#152c33",
fontFamily = "helvetica",
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", svgBackgroundColor),
container = svg.append("g")
.attr("transform", `translate(${margin.left},${3*height/4})`),
update = (data) => {
container
.selectAll('rect')
.data(data)
.join(
enter => enter.append('rect')
.style('fill', d => d.fill)
.style('opacity', .05)
.attr('width', d => d.width)
.attr('height', d => chartHeight/2-scaleY(d.height))
.attr('x', d => scaleX(d.x))
.attr('y', d => -(chartHeight/2-scaleY(d.height))),
update => update
.attr('width', d => d.width)
.attr('height', d => chartHeight/2-scaleY(d.height))
.attr('x', d => scaleX(d.x))
.attr('y', d => -(chartHeight/2-scaleY(d.height))),
exit => exit.remove()
),
container
.selectAll('path')
.data(data)
.join(
enter => enter.append('path')
.style('fill', d => d.fill)
.style('opacity', .8)
.attr('d', d => {
let xPt = scaleX(d.x),
t1 = [xPt,0],
t2 = [xPt + d.width,0],
t3 = [xPt + d.width/2,-(chartHeight/2-scaleY(d.height))]
return d3.line()([t1,t2,t3,t1])
}),
update => update
.attr('d', d => {
let xPt = scaleX(d.x),
t1 = [xPt,0],
t2 = [xPt + d.width,0],
t3 = [xPt + d.width/2,-(chartHeight/2-scaleY(d.height))]
return d3.line()([t1,t2,t3,t1])
}),
exit => exit.remove()
),
container
.append('g')
.classed('axis--x', true)
.call(d3.axisBottom(scaleX).ticks(5).tickSize(2).tickSizeOuter(0).tickFormat(d => data[d].height))
.style('font-size', "1em")
.style("font-weight", "bold")
.style("color", "white")
.style("opacity", 0.3)
.style("font-family", fontFamily)
.attr("transform", `translate(${((chartWidth/numBars * 1.2)-scaleX.bandwidth())/2},5)`),
container.append('g')
.classed('axis--y', true)
.call(d3.axisLeft(scaleY).tickSize(2).tickSizeOuter(0))
.style("font-size", ".5em")
.style("font-weight", "bold")
.style("color", "white")
.style("opacity", 0.3)
.style("font-family", fontFamily)
.attr("transform", "translate(-5," + (-chartHeight/2) + ")")
}
let data = getData();
update(data);
function reRun(){
d3.select(".axis--x").remove();
d3.select(".axis--y").remove();
update(getData());
}
d3.select("button#refreshChart").on("click", reRun);
yield svg.node();
}
getData = () => {
let data = d3.range(numBars).map((d,i) => {
return {
x: i,
y: i,
fill: color(i),
width: chartWidth/numBars * 1.2,
height: getRandomInt(1,10) * 10
}
})
return data;
}
scaleX = d3.scaleBand().domain(d3.range(numBars)).range([0,chartWidth])
scaleY = d3.scaleLinear().domain([0,100]).range([chartHeight/2,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.
