Web Applications Developer @ WiderFunnel | Lighthouse Labs Alumni
chart = {
const svg = d3.select(DOM.svg(width, height));
const margin = {top: 35, right: 10, bottom: 50, left: 30}
// const color = d3.scaleOrdinal().range(["#28677D", "#12A6AD"])
const keys = ["Increase", "Decrease", "Inconclusive"]
const stack = d3.stack().keys(keys)
const stackedData = stack(chartdata)
const highestBar = d3.max(chartdata, d => Math.ceil(d.total / 5) * 5)
// X0 scale (labels)
const x0 = d3
.scaleBand()
.domain(chartdata.map(d => d.zone))
.rangeRound([margin.left, width - margin.right])
.paddingInner(0.5)
.paddingOuter(0.05)
// Y scale
const y = d3
.scaleLinear()
.domain([0, highestBar])
// .domain([0, 15])
.rangeRound([height - margin.bottom, margin.top])
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x0)).attr("font-size", "0.75rem")
.call(g => g.select(".domain").remove())
.selectAll('text')
.attr("transform", "translate(-2,14), rotate(-15)")
.text(d => d)
const yAxis = g => g
.attr("transform", `translate(${margin.right},0)`)
.call(d3.axisRight(y)
.ticks(highestBar == 15 ? 3 : 7)
.tickSize(width - margin.right))
.call(g => g.select(".domain")
.remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", "2,2"))
.call(g => g.selectAll(".tick text")
.attr("x", 0)
.attr("dy", -5.5))
.attr("font-size", "0.9rem")
.attr("opacity", 0.8)
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const groups = svg.append('g')
// Each layer of the stack goes in a group
// the group contains that layer for all zones
.selectAll('g')
.data( stackedData )
.join('g')
.style('fill', (d,i) => color(d.key))
groups.selectAll('rect')
.data(d => d) // Now we place the rects, which are the children of the layer array
.join('rect') // Every element in layer array binds its data to a rect
.attr('x', d => x0(d.data.zone))
.attr('class', d => d.data.zone.replace(/[&\s\/\\#,+()$~%.'":*?<>{}]/g,'_'))
.attr("height", d => height - y(0) - margin.bottom)
.attr('y', d => y(0))
.attr('width', x0.bandwidth())
groups.selectAll("rect")
.transition()
.duration(1000)
.attr('height', d => y(d[0]) - y(d[1]))
.attr('y', d => y(d[1]))
groups.selectAll('rect').on('mouseover', function(d, i) {
const stack = d3.selectAll('.' + d.data.zone.replace(/[\s\/\\#,+()$~%.'":*?<>{}]/g,'_'))
svg.append("text")
.attr('class', 'count-display')
.attr('x', x0(d.data.zone) + x0.bandwidth() / 2)
.attr("y", y(d.data.total) - 4)
.attr('text-anchor', 'middle')
.attr('font-size', '0.9rem')
.attr('fill', '#4A4A4A')
.text(d.data.total);
svg.selectAll('rect')
.transition().duration(10)
.attr('opacity', (d2) => d2.data.zone != d.data.zone ? 0.6 : 1)
})
.on('mouseout', (d) => {
d3.select('.count-display').remove()
svg.selectAll('rect')
.transition().duration(100)
.attr('opacity', 1)
})
return svg.node();
}
keys = ["Work Begins", "Launched"]
margin = ({top: 10, right: 10, bottom: 20, left: 40})
width = document.body.clientWidth
height = 500
color = d3.scaleOrdinal().range(['#ff8a84', '#AAA', '#12A6AD'])
chartdata = [{"Decrease":3,"Inconclusive":0,"Increase": 7,"total":10,"zone":"Desktop Grid Page"},{"Decrease":0,"Inconclusive":1,"Increase":2,"total":3,"zone":"Alberta"},{"Decrease":0,"Inconclusive":3,"Increase":0,"total":3,"zone":"Mobile Grid Page"},{"Decrease":1,"Inconclusive":1,"Increase":0,"total":2,"zone":"Checkout"},{"Decrease":1,"Inconclusive":1,"Increase":0,"total":2,"zone":"Sitewide"},{"Decrease":0,"Inconclusive":2,"Increase":0,"total":2,"zone":"Mobile Homepage"},{"Decrease":0,"Inconclusive":1,"Increase":1,"total":2,"zone":"Paid Landing Pages"},{"Decrease":0,"Inconclusive":0,"Increase":1,"total":1,"zone":"Homepage"},{"Decrease":0,"Inconclusive":0,"Increase":1,"total":1,"zone":"Mobile Checkout"},{"Decrease":0,"Inconclusive":1,"Increase":0,"total":1,"zone":"US North"},{"Decrease":0,"Inconclusive":1,"Increase":0,"total":1,"zone":"Mobile Sitewide"},{"Decrease":0,"Inconclusive":1,"Increase":0,"total":1,"zone":"Desktop Plan Pages"}]
stack1 = d3.stack().keys(["Increase", "Decrease", "Inconclusive"])
stack1(chartdata)
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.
