Public
Edited
Mar 8, 2023
1 fork
viewof n = Inputs.range([10, 100], {label: "First N", step: 1})
viewof paddingInner = Inputs.range([0, 1], {label: "paddingInner", step: .01, value: 0.1})
viewof paddingOuter = Inputs.range([0, 10], {label: "paddingOuter", step: .01, value: 0.3})
viewof rotate = Inputs.range([0, 180], {label: "Rotate", step: .1, value: 45})
barChart = {
const svg = d3.create('svg').attr('viewBox',[0, 0, layout.width, layout.height])
const g = svg.append('g').attr('transform',`translate(${layout.margin.left},${layout.margin.top})`)
let bars = g.append('g')
.selectAll('g')
.data(first_n_data)
.join('g')
.append('rect')
.attr("x", d => xScaleBand(d[0]))
.attr("y", d => yScale(d[1]['goal_score']) )
.attr('width', xScaleBand.bandwidth())
.attr('height', d => layout.innerHeight - yScale(d[1]['goal_score']))
.attr("fill", "#1f77b4")
g.append('g').attr('transform',`translate(0,${layout.innerHeight})`).call(xAxis)
.call(g=>{
g.selectAll('text')
.attr('text-anchor', 'start')
.attr('transform', `translate(10,0) rotate(${rotate})`)
})
g.append('g').call(yAxis)
return svg.node()
}
layout=({
width: width,
height: 600,
margin:{
top: 30,
right: 30,
bottom: 100,
left: 30,
},
get innerWidth(){
return this.width - this.margin.right - this.margin.left
},
get innerHeight(){
return this.height - this.margin.top - this.margin.bottom
}
})
xScaleBand = d3.scaleBand()
.domain(first_n_data.map(e=>e[0]))
.range([0, layout.innerWidth])
.paddingInner(paddingInner)
.paddingOuter(paddingOuter)
yScale = d3.scaleLinear()
.domain([0, d3.max(first_n_data, d=>d[1]['goal_score'], d=>d[1]['lose_score'])])
.range([layout.innerHeight, 0])
xAxis = d3.axisBottom(xScaleBand)
yAxis = d3.axisLeft(yScale)
Filter data
rollup_data = d3.rollups(full_data, d=>{
return {
goal_score: d3.sum(d, d=>d['home_score']),
lose_score: d3.sum(d, d=>d['away_score']),
total_win: d.filter(e=>e['winning_team']==e['home_team']).length,
total_lose: d.filter(e=>e['losing_team']==e['home_team']).length,
}
},d=>d['home_team'])
first_n_data = rollup_data.sort((a,b)=> b[1]['goal_score']-a[1]['goal_score']).slice(0, n);
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.
