Mainly coding for fun these days!
html`
<button id="betty">Betty</button>
<button id="linda">Linda</button>
`
barchart = {
var nameSelected = "Betty"
var size = d3.min([window.innerWidth*0.9, window.innerHeight*0.9])
var dimensions = ({
width: size,
height: size/3,
margin: {
top: 10,
right: 10,
bottom: 50,
left: 50
}
})
var svg = d3.select(DOM.svg(dimensions.width, dimensions.height))
dimensions.boundedWidth = dimensions.width - dimensions.margin.right - dimensions.margin.left
dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom
var xScale = d3.scaleBand()
.domain(data.map(function(d){return d.year;}))
.range([0,dimensions.boundedWidth]).padding(0.2)
var yScale_betty = d3.scaleLinear()
.domain([0, d3.max(data.map(function(d){return d["Betty"]}), s => +s)])
.range([dimensions.boundedHeight,0]);
var yScale_linda = d3.scaleLinear()
.domain([0, d3.max(data.map(function(d){return d["Linda"]}), s => +s)])
.range([dimensions.boundedHeight,0]);
var bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
var text = svg
.append('text')
.attr("id", 'topbartext')
.attr("x", 700)
.attr("y", 20)
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("font-family", "sans-serif")
.text("Count per year: 0")
var bars = bounds
.selectAll("bar")
.data(data)
.enter()
.append('rect')
.attr('x', function(d) { return xScale(d.year); })
.attr('width', xScale.bandwidth)
.attr('y', function(d) { return yScale_betty(d["Betty"]); })
.attr('height', function(d){return dimensions.boundedHeight - yScale_betty(d["Betty"])})
.attr("fill", "steelblue")
.on('mouseover', function(d, i){
d3.select(this)
.attr('style', 'outline: thin solid black;');
d3.select("#topbartext")
.text(`Count per year: ${i[nameSelected]}`);
})
.on('mouseout', function (d, i) {
d3.select(this)
.attr('style', 'outline: thin solid clear;');
d3.select("#topbartext")
.text(`Count per year: ${0}`);
})
var xAxis = d3.axisBottom(xScale)
.tickValues(xScale.domain().filter(function(d,i){ return !(i%4)})).tickSizeOuter(0)
svg.append("g")
.attr("transform", "translate("+ dimensions.margin.left + "," + (dimensions.boundedHeight+dimensions.margin.bottom/4) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
var yAxis_betty = d3.axisLeft(yScale_betty)
var yAxis_linda = d3.axisLeft(yScale_linda)
var changing_axis = svg.append("g")
.attr("transform", "translate("+dimensions.margin.left+","+ dimensions.margin.top +")")
.call(yAxis_betty)
d3.select("#betty").on('click', function(){
nameSelected = "Betty"
bars.transition()
.attr('x', function(d) { return xScale(d.year); })
.attr('width', xScale.bandwidth)
.attr('y', function(d) { return yScale_betty(d[nameSelected]); })
.attr('height', function(d){return dimensions.boundedHeight - yScale_betty(d[nameSelected])})
.style("fill", "steelblue")
changing_axis.transition()
.call(yAxis_betty)
})
d3.select("#linda").on('click', function(){
nameSelected = "Linda"
bars.transition()
.attr('x', function(d) { return xScale(d.year); })
.attr('width', xScale.bandwidth)
.attr('y', function(d) { return yScale_linda(d[nameSelected]); })
.attr('height', function(d){return dimensions.boundedHeight - yScale_linda(d[nameSelected])})
.style("fill", "steelblue")
changing_axis.transition()
.call(yAxis_linda)
})
return svg.node()
}
data = d3.csvParse(await FileAttachment("stream-data.csv").text())
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.
