Published
Edited
Dec 10, 2019
1 fork
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//set formatting for rollover values
var formatSuffixDecimal2 = d3.format(".2s")
// Code is from https://observablehq.com/@leoyuholo/comp-4462-data-visualization-tutorial-9-visualization-and
const tooltip = d3tip()
.style('position', 'absolute')
.style('text-align', 'center')
.style('width', '60px')
.style('height', '38px')
.style('padding', '2px')
.style('font', '14px sans-serif')
.style('background', 'white')
.style('border', '0px')
.style('border-radius', '8px')
.style('pointer-events', 'none')
.html(d =>
`<div style='float: right'>
Value: ${formatSuffixDecimal2((y(d[0]) - y(d[1]))*233330)}
</div>`)
;
svg.call(tooltip);
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())
// Listen to the "mouseover" event, and set the value of "hovering" and change the color
// Code from https://observablehq.com/@leoyuholo/comp-4462-data-visualization-tutorial-9-visualization-and
.on('mouseover', tooltip.show)
.on('mouseout', tooltip.hide)
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
data = d3.csvParse(await FileAttachment("autooutlook_stackbarfive.csv").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d)).sort((a, b) => b.total - a.total)
md`Sorting uploaded data by first column: years`
sortedData = data.slice().sort((a, b) => d3.descending(a.name, b.name))
series = d3.stack().keys(data.columns.slice(1))(sortedData)
x = d3.scaleBand()
.domain(sortedData.map(d => d.name))
.range([width - margin.right,margin.left])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))])
.rangeRound([height - margin.bottom, margin.top])
color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
.range(d3.quantize(t => d3.interpolateRdYlGn(t * 0.8 + 0.1), series.length))
.unknown("#ccc")
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickValues([2006,2010,2020,2030,2040,2050]))
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
height = 600
margin = ({top: 10, right: 10, bottom: 20, left: 40})
d3 = require("d3@5")
// Code is from https://observablehq.com/@leoyuholo/comp-4462-data-visualization-tutorial-9-visualization-and
d3tip = require('d3-tip')
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.
