Dad living in New Westminster, B.C.
Published
Edited
May 21, 2021
Stacked Bar Chart
md `Using Tyler Wolf, https://observablehq.com/@thetylerwolf/day-9-stacked-bar-chart`
oldData = Object.assign(FileAttachment("StateTwo.csv").csv())
data = Object.assign(d3.csvParse(await FileAttachment("StateTwo.csv").text(), ({Year, Total, ["High-Propensity Applications"]: HighPropensity, ["Applications w/ Planned Wages"]: PlannedWages, ["Applications from Corporations"]: Corporations}) => ({year: +Year, total: +Total, highPropensity: +HighPropensity, plannedWages: +PlannedWages, corporations: +Corporations})))
md `Used data formatting from Bostck music to parse file, https://observablehq.com/@mbostock/revenue-by-music-format-1973-2018`
dataThree = Object.assign(d3.csvParse(await FileAttachment("StateThree.csv").text(), ({Year, Week, State, ["Business Applications"]: BusinessApplications}) => ({year: +Year, week: +Week, state: State, businessApplications: +BusinessApplications})))
dataFour = dataThree.filter(x => x.state=="AK")
dataFive = dataFour.filter(x => x.year==2006)
dataSix = dataFive
width = 900
height = 500
margin = ({
top: 10,
right: 10,
bottom: 25,
left: 30
})
yMax = d3.max(dataSix, d=> d.businessApplications)
xDomain = dataSix.map(d => d.week)
xScale = d3.scaleBand()
.domain(xDomain)
.range([margin.left,width-margin.right-margin.left])
.padding(0.5)
yScale = d3.scaleLinear()
.domain([0, yMax])
.range([height-margin.bottom, margin.top])
xAxis = d3.axisBottom(xScale)
.tickSizeOuter(0)
yAxis = d3.axisLeft(yScale)
.tickSizeOuter(0)
bars = {
const container = html `<svg width="900" height="500"/>`
const svg = d3.select(container)
svg.append('g')
.attr('class', 'bars')
.selectAll('rect')
.data( dataSix )
.join('rect')
.attr('class', 'bar')
.attr('x', d => xScale(d.week))
.attr('y', d => yScale(d.businessApplications))
// bandwidth is a special function of scaleBand
// it returns the width of the band (bar) based on the configuration
// we set up earlier
.attr('width', xScale.bandwidth())
// remember that yScale(0) is the height of the entire chart
// so we subtract the y position of the top of the bar yScale(d.value)
// from it to get the total height of the bar.
.attr('height', d => yScale(0) - yScale(d.businessApplications))
.style('fill', '#7472c0')
// Here we render the x axis
svg.append('g')
.attr('class', 'x-axis')
// First set its container's (g) position to the
// bottom of the chart
.attr('transform', `translate(0,${ height - margin.bottom })`)
// then just call this to render it
.call( xAxis )
// it works the same for the y axis
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${ margin.left },0)`)
.call( yAxis )
return container
}
d3 = require('d3@6')
_=require('https://bundle.run/lodash@4.17.21')
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.
