Published
Edited
May 8, 2021
1 fork
Insert cell
md`# 2020-2019 Yield`
Insert cell
chart = {
const div = d3.create('div')
const legendContainer = div.append('div')
.attr('id', 'legend')
.style('margin-left', `${ margin.left + 10 }px`)
const svg = div.append('svg')
.attr('viewBox', [ 0, 0, width, height ])
svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", (d, i) => x(d.data.name))
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth())
svg.append('g')
.call(xAxis)
svg.append('g')
.call(yAxis)
legendContainer
.call(legend)
return div.node()
}
Insert cell
function legend(div) {
const elements = div.selectAll('div.element')
.data(series)
.join('div.element')
.style('float', 'left')
.style('position', 'relative')
.style('font-family', 'sans-serif')
.style('margin-right', '20px')
elements.append('span.color')
.style('position', 'absolute')
.style('left', 0)
.style('top', 0)
.style('background', d => color(d.key))
.style('width', '10px')
.style('height', '80%')
elements.append('span.legend-key')
.style('margin-left', '12px')
.text(d => d.key)
}
Insert cell
yAxis = g => g
.attr('transform', `translate(${ margin.left }, 0)`)
.call(d3.axisLeft(y).ticks(null, 's'))
.call(g => g.selectAll('.domain').remove())
Insert cell
xAxis = g => g
.attr('transform', `translate(0, ${ height - margin.bottom })`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll('.domain').remove())
Insert cell
y = d3.scaleLinear()
.domain([ 0, d3.max(series, d => d3.max(d, d => d[1]))])
.rangeRound([ height - margin.bottom, margin.top ])
Insert cell
x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
Insert cell
color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
// TODO: annotate what is happening here
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), series.length).reverse())
.unknown('brown')
Insert cell
height = 400
Insert cell
margin = ({ top: 50, right: 10, bottom: 20, left: 40 })
Insert cell
series = d3.stack().keys(data.columns.slice(1))(data) // TODO: annotate what is actually happening here
Insert cell
data = Object.assign(_data, { columns: _.keys(_data[0])})
Insert cell
/***
* As if we had pivoted on gender, asked for experience overall, and are charting the counts of each
* gender that responded with each possible score
*/
_data = [
{ name: 'Clinton', "Year 2020": 179,'Year 2019': 17, },
{ name: 'Benton', "Year 2020": 146, 'Year 2019': 52, },
{ name: 'Boone', "Year 2020": 162,'Year 2019': 33, },
{ name: 'Cedar', "Year 2020": 154,'Year 2019': 40, },
{ name: 'Polk', "Year 2020": 151, 'Year 2019': 46 },
{ name: 'Poweshiek', "Year 2020": 139,'Year 2019': 61, },
{ name: 'Scott', "Year 2020": 182, 'Year 2019': 7, },
{ name: 'Story', "Year 2020": 149, 'Year 2019': 40, },
{ name: 'Tama', "Year 2020": 134,'Year 2019': 71, },
{ name: 'Dallas', "Year 2020": 141,'Year 2019': 54, },
{ name: 'Guthrie', "Year 2020": 152, 'Year 2019': 45, },
{ name: 'Hamiliton', "Year 2020": 167,'Year 2019': 31 },
{ name: 'Hardin', "Year 2020": 157, 'Year 2019': 43, },
{ name: 'Johnson', "Year 2020": 162, 'Year 2019': 19, },
{ name: 'Jones', "Year 2020": 173,'Year 2019': 30, },
{ name: 'Linn', "Year 2020": 166,'Year 2019': 58, },

]
Insert cell
d3 = require('d3@5')

Insert cell
_ = require('lodash')
Insert cell

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.
Learn more