UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Nov 15, 2020
1 fork
1 star
md`# Arrival Delay vs Flight Distance`
FileAttachment("test.csv")
data = d3.csvParse(await FileAttachment("test.csv").text(), d3.autoType)
data_filt = data.filter(
d => d["Arrival Delay in Minutes"] < 300 && d["Flight Distance"] < 4000
)
render_data_table(data.slice(-11, -1))
chart_data = data_filt.map(d => ({
x: +d["Flight Distance"],
y: +d["Arrival Delay in Minutes"],
label: d.satisfaction,
id: d.id
}))
data.length
data.columns
satis = [...d3.group(chart_data, d => d.label).keys()]
md`#### Create a scatter plot`
viewof satisfact = autoSelect({
options: satis,
placeholder: "Search satisfied customers"
})
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.node().update = currLabel => {
const labeled = chart_data.filter(d => d.label == currLabel);
const circles = svg
.selectAll("circle")
.data(chart_data, d => d.id)
.join(enter =>
enter
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", y.range()[0])
)
.transition()
.delay(d => x(d.x))
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", d => (d.label == currLabel || currLabel.length == 0 ? 2 : 0))
.style("fill", function(d) {
var content = d.label;
if (content === "neutral or dissatisfied") {
return "red";
} else {
return "green";
}
})
.style("opacity", 0.5);
};
// Add an x title
svg
.append("text")
.attr(
"transform",
`translate(${margin.left + (x.range()[1] - x.range()[0]) / 2},${height})`
)
.style("text-anchor", "middle")
.text("title");
return svg.node();
}
chart.update(satisfact)
y_domain = d3.extent(chart_data, d => d.y)
x_domain = d3.extent(chart_data, d => d.x)
x = d3
.scaleLinear()
.domain(x_domain)
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(y_domain)
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
md`## Appendix`
d3 = require("d3")
import { aq, op } from "@uwdata/arquero"
import { legend } from "@d3/color-legend"
topojson = require("topojson-client@3")
import { ramp } from "@d3/sequential-scales"
import {
displayCaution,
render_data_table,
table_styles
} from "@uw-info474/utilities"
margin = ({ top: 20, right: 30, bottom: 40, left: 100 })
height = 500
import { autoSelect } from "@jashkenas/inputs"
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.
