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
Food Prices of India, 1994–2021Large Food Retailer Investments By Industry 2010-2021Under The InfluenceFood AccessNigeria Household: Amount spent on foodEstimating the environmental impacts of 57,000 food products, part 2Food Snobs eat at Oleana, Cambridge MAVisualizing Worldwide IPC Food Security DataZoomable Sunburst for food imports in the US from 2010 to 2017.Food supply chainLet's talk about seeds!Regional crop yields in GermanyThe 10 Most Important CropsInteractive Exploration of Wine Quality and ValuationExploring Livestock Data around the world 🐓🐑🐄Influence of soil quality and soil moisture index on crop yieldsForest Area By Selected Countries Since 1990Magic Balls FactoryIn store displays make a significant impact on the sale of Honey Nut CheeriosTransparency in Programmatic Advertising MarketplacesAnalysis of two cereals owned by the same brand display unique characteristics and periods of success.F1 Drivers 1997 - 2023Bar Chart Race, ExplainedF1 Constructor Standings 2010-2019Asia’s Regenerative Energy Future2022 Q2 PROFIT: 🛢 vs. 👨💻🛢 Oil SpillsHow flights between Europe and Eastern Asia got disruptedData Visualization - Impact of Covid on US Aviation (year 2020)What's the deal with airline fares?2020/W16: Food: Greenhouse Gas Emission across supply chainInventory Manager -> Product alertEU Fishing FlowWarehouse Visualization with DataVisualVisualizing wind turbines in 3D using threebox
Final Project: What makes an airline succesful?
Also listed in…
Finance and Strategy
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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.