UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Dec 28, 2020
2 forks
4 stars
finance_chart = {
const height = 500;
const filter = {
All: [0, 51],
"Top 1-20": [0, 20],
"Mid 21-30": [21, 30],
"Bot 31-50": [31, 51]
};
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.node().update = (metrics, inputYear, opt) => {
svg.selectAll("*").remove();
const filt_year = select_data.filter(d => d.year == inputYear);
let data_grouped = [];
filt_year.reduce(function(res, value) {
if (!res[value.airline]) {
res[value.airline] = {
airline: value.airline,
income: 0,
revenue: 0,
code: value.airCode,
year: value.year
};
data_grouped.push(res[value.airline]);
}
res[value.airline].income += value.income;
res[value.airline].revenue += value.revenue;
return res;
}, {});
data_grouped = data_grouped.sort(function(a, b) {
if (opt == "Revenue") {
return b.revenue - a.revenue;
}
return b.income - a.income;
});
const filt_range = filter[metrics];
const filtered_data = data_grouped.slice(filt_range[0], filt_range[1]);
const x0 = d3
.scaleBand()
.domain(filtered_data.map(d => d["code"]))
.rangeRound([margin.left, width - margin.right])
.paddingInner(0.1);
const x1 = d3
.scaleBand()
.domain(keys)
.rangeRound([0, x0.bandwidth()])
.padding(0.05);
const y = d3
.scaleLinear()
.domain([
d3.min(filtered_data, d => d3.min(keys, key => d[key])),
d3.max(filtered_data, d => d3.max(keys, key => d[key]))
])
.nice()
.range([height - margin.bottom, margin.top]);
svg
.append("g")
.selectAll("g")
.data(filtered_data)
.join("g")
.attr("transform", d => `translate(${x0(d.code)},0)`)
.selectAll("rect")
.data(d => keys.map(key => ({ key, value: d[key], airline: d.airline })))
.join("rect")
.attr("x", d => x1(d.key))
.attr("y", d => {
if (d.value < 0) {
return y(0);
} else {
return y(d.value);
}
})
.attr("width", x1.bandwidth())
.attr("height", d => Math.abs(y(0) - y(d.value)))
.attr("fill", d => color(d.key))
.on('mouseenter', function(e, d, i) {
tooltip
.html(
`<div>${d.airline}</div><div>${d.key}</div><div>${Math.round(
d.value
)}</div>`
)
.style('visibility', 'visible');
d3.select(this).attr('fill', '#eec42d');
})
.on('mousemove', function(e) {
const side_padding = 3;
let x = e.pageX - 50;
let y = e.pageY - 180;
tooltip.style('top', y + 10 + 'px').style('left', x + 10 + 'px');
})
.on('mouseout', function() {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this)
.transition()
.attr('fill', d => color(d.key));
});
// update xaxis too
const xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x0).tickSizeOuter(0))
.call(g => g.select(".domain").remove());
// update yaxis too
const yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.select(".domain").remove());
svg
.append("text")
.text(metrics + " Airlines Income and Revenue ($) in " + yearSlider)
.attr("transform", "translate(200, 30)")
.attr("font-weight", "bold")
.attr("font-size", "18px");
svg
.append("text")
.attr(
"transform",
`translate(${margin.left +
(x0.range()[1] - x0.range()[0]) / 2},${height - 3})`
)
.style("text-anchor", "middle")
.attr("font-size", "12px")
.text("Airline code");
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("g").call(legend_finance);
};
return svg.node();
}
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.
