md`# 2020-2019 Money Loss `
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()
}
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)
}
yAxis = g => g
.attr('transform', `translate(${ margin.left }, 0)`)
.call(d3.axisLeft(y).ticks(null, 's'))
.call(g => g.selectAll('.domain').remove())
xAxis = g => g
.attr('transform', `translate(0, ${ height - margin.bottom })`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll('.domain').remove())
y = d3.scaleLinear()
.domain([ 0, -300])
.rangeRound([ height - margin.bottom, margin.top ])
x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
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')
height = 400
margin = ({ top: 50, right: 10, bottom: 20, left: 40 })
series = d3.stack().keys(data.columns.slice(1))(data) // TODO: annotate what is actually happening here
data = Object.assign(_data, { columns: _.keys(_data[0])})
/***
* 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", "Money Difference": -104.24},
{name: "Benton", "Money Difference": -226.5},
{name: "Boone", "Money Difference": -159.69},
{name: "Cedar", "Money Difference": -183.82},
{name: "Polk", "Money Difference": -205.39},
{name: "Poweshiek", "Money Difference": -258.28},
{name: "Scott", "Money Difference": -67.83},
{name: "Story", "Money Difference": -182.67},
{name: "Tama", "Money Difference": -294.23},
{name: "Dallas", "Money Difference": -232.77},
{name: "Guthrie", "Money Difference": -201.91},
{name: "Hamilton","Money Difference": -153.42},
{name: "Hardin","Money Difference": -195.64},
{name: "Johnson", "Money Difference": -107.75},
{name: "Jones", "Money Difference": -151.09},
{name: "Linn", "Money Difference":-253.36 },
]
d3 = require('d3@5')
_ = require('lodash')
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.
