UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Dec 13, 2020
Importers
md`# Ashray Silwal's Chart `
viewof state = select({
title: "Metric for visualization",
options: _.uniqBy(policy, d => d.StateCode)
.map(d => d.StateCode)
.sort(),
value: "AK"
})
chart1 = {
const svg = d3
.create("svg")
.attr("width", 1000)
.attr("height", height + 100)
.style("text-anchor", "middle");
svg.append("g").call(yAxis);
svg.append("line").drawData = sel => {
const curveData2 = filteredPolicy.filter(function(d) {
return d.stateCode == sel;
console.log(sel);
});
const line = svg
.selectAll("line")
.data(curveData2, d => d.game)
.join(
enter =>
enter
.append("line")
.style("stroke", "black")
.style("opacity", 1)
.attr("x1", d => x(d.StartDateofMask))
.attr("y1", 0)
.attr("x2", d => x(d.StartDateofMask))
.attr("y2", max2)
//.attr("cx", d => x(d.StartDateOfSAH))
//.attr("cx", d => x(d.EndDateOfSAH))
//.attr("cx", d => x(d.StartDateOfCR))
//.attr("cx", d => x(d.EndDateOfCR))
//.attr("opacity", .6)
//.attr("fill", "Purple")
//.attr("r", 4)
);
};
svg.node().drawData = sel => {
const curveData = filteredData.filter(function(d) {
return d.state == sel;
});
const mask = svg
.append("rect")
.attr("x", x(filteredPolicy.get(sel)[0].StartDateofMask))
.attr("y", y(max2) + margin.bottom)
.attr("width", 1)
.attr("height", y(0))
.attr("fill", "blue");
const SAHRect = svg
.append("rect")
.attr("x", x(filteredPolicy.get(sel)[0].StartDateOfSAH))
.attr("y", y(max2) + margin.bottom)
.attr(
"width",
x(filteredPolicy.get(sel)[0].EndDateOfSAH) -
x(filteredPolicy.get(sel)[0].StartDateOfSAH)
)
.attr("height", y(0))
.attr("fill-opacity", 0.2)
.attr("stroke", "green")
.attr("fill", "green");
const CRRect = svg
.append("rect")
.attr("x", x(filteredPolicy.get(sel)[0].StartDateOfCR))
.attr("y", y(max2) + margin.bottom)
.attr(
"width",
x(filteredPolicy.get(sel)[0].EndDateOfCR) -
x(filteredPolicy.get(sel)[0].StartDateOfCR)
)
.attr("height", y(0))
.attr("fill-opacity", 0.2)
.attr("stroke", "red")
.attr("fill", "red");
const circles = svg
.selectAll("circle")
.data(curveData, d => d.game)
.join(
enter =>
enter
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y) + 50)
.attr("opacity", .6)
.attr("fill", "Purple")
.attr("r", 4)
/*
.on("click", function() {
const target = d3.select(this);
target.attr("fill", "black");
})
*/
);
const tip = svg
.append("g") // append a group of stuff
.style("pointer-events", "none")
.style("text-anchor", "middle");
circles.on("mouseover", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event);
const text = [value.date, "New Cases: " + value.y];
const side_padding = 3;
console.log("called", value, pointer);
tip
.style("text-anchor", "middle")
.attr("transform", `translate(${pointer[0]}, ${pointer[1]})`)
.selectAll("text")
.data(text)
.join('text')
.style("dominant-baseline", "ideographic")
.text(d => d)
.attr("y", (d, i) => (i - (text.length - 1)) * 15)
.style("font-weight", (d, i) => (i === 0 ? "bold" : "normal"));
const bbox = tip.node().getBBox();
// Add a rectangle (as background)
tip
.append("rect")
.attr("y", bbox.y)
.attr("x", bbox.x - side_padding)
.attr("width", bbox.width + side_padding * 2)
.attr("height", bbox.height)
.style("fill", "white")
.style("stroke", "#d3d3d3")
.lower();
// Make sure it doesn't go beyond the left of the chart
if (pointer[0] + bbox.x < margin.left) {
tip.attr(
"transform",
`translate(${margin.left + bbox.width / 2}, ${pointer[1]})`
);
}
// Make sure it doesn't go to the right of the chart
if (pointer[0] - bbox.x > width - margin.right) {
tip.attr(
"transform",
`translate(${width - margin.right - bbox.width / 2}, ${pointer[1]})`
);
}
});
circles.on("mouseout", event => {
tip.selectAll("*").remove();
});
svg
.append("text")
.attr("x", 1000 / 2)
.attr("y", height + 60)
.style("text-anchor", "middle")
.text("Date");
svg
.append("text")
.attr("text-anchor", "middle")
.attr("y", 55)
.attr("x", 98)
.text("New Cases");
svg
.append("text")
.attr("x", 1000 / 2)
.attr("y", 20)
.style("text-anchor", "middle")
.text("New Covid Cases in the Selected US State 2020");
svg
.append("g")
.call(xAxis)
.attr("transform", `translate(0,${height - margin.bottom + 50})`);
};
return svg.node();
}
chart1.drawData(state)
md`# Data`
policy = d3.csvParse(await FileAttachment("policy_use.csv").text())
formatTime2 = d3.timeParse("%Y-%m-%d")
filteredPolicy = d3.group(
policy.map(d => ({
StateCode: d.StateCode,
StartDateofMask: formatTime2(d.StartDate_of_mask_mandates),
StartDateOfSAH: formatTime2(d.StartDate_of_stayAtHhome_orders),
EndDateOfSAH: formatTime2(d.EndDate_of_stayAtHhome_orders),
StartDateOfCR: formatTime2(d.StartDate_of_closed_restaurants),
EndDateOfCR: formatTime2(d.EndDate_of_closed_restaurants)
})),
d => d.StateCode
)
covidData = d3.csv(
await FileAttachment(
"United_States_COVID-19_Cases_and_Deaths_by_State_over_Time.csv"
).url()
)
formatTime = d3.timeParse("%m/%d/%Y")
no_negatives = covidData.filter(function(d) {
return d.new_death >= 0;
})
filteredData = no_negatives.map(d => ({
x: formatTime(d.submission_date),
y: +d.new_case,
state: d.state,
date: d.submission_date
}))
margin = ({
top: 20,
right: 30,
bottom: 30,
left: 150
})
height = 500
filtered2 = filteredData.filter(function(d) {
return d.state == state;
})
max2 = d3.max(filtered2, d => d.y)
x_domainRange = d3.extent(filteredData, d => d.x)
x = d3
.scaleTime()
.domain(x_domainRange)
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, max2])
.range([height - margin.bottom, margin.top])
yAxis = g =>
g.attr("transform", `translate(${margin.left},50)`).call(d3.axisLeft(y))
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
md`# Appendix `
d3 = require("d3")
_ = require("lodash")
import { swatches } from "@d3/color-legend"
import { select } 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.
