UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
md`### Load Data`
disney = d3.csvParse(await FileAttachment("disney.csv").text(), d3.autoType)
netflix = d3.csvParse(await FileAttachment("netflix.csv").text(), d3.autoType)
x = d3
.scaleLinear()
.domain(d3.extent(disney, d => +d.imdb_rating))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(disney, d => +d.imdb_votes))
.range([height - margin.bottom, margin.top])
md`### Select`
md`### Filter/Explore`
md`### Reconfigure`
boxPlot = {
let data;
if (order == "Total Vote Count") {
data = genre_count_new.sort((a, b) => +b.count - a.count);
} else {
data = genre_count_new.sort(
(a, b) => +b.ratings_q.median - a.ratings_q.median
);
}
let svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 50]);
const x2 = d3
.scaleBand()
.domain(data.map(d => d.genre))
.range([margin.left, width - margin.right]);
const xAxis2 = g =>
g
.call(d3.axisBottom(x2))
.attr('transform', `translate(0, ${height - margin.bottom + 10})`);
const y2 = d3
.scaleLinear()
.domain([9, 0])
.range([margin.bottom, height - margin.top]);
const yAxis2 = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y2));
x2.padding(0.2);
svg
.append('g')
.call(xAxis2)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
svg.append('g').call(yAxis2);
svg
.selectAll("line.vert")
.data(data)
.join("line")
.attr("class", "vert")
.attr("x1", d => x2(d.genre) + x2.bandwidth() / 2)
.attr("x2", d => x2(d.genre) + x2.bandwidth() / 2)
.attr("y1", d => y2(d.ratings_q.max))
.attr("y2", d => y2(d.ratings_q.min))
.attr("stroke", "black");
svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x2(d.genre))
.attr("y", d => y2(d.ratings_q.q3))
.attr("height", d => y2(d.ratings_q.q1) - y2(d.ratings_q.q3))
.attr("width", x2.bandwidth())
.attr("stroke", "black")
.style("fill", "pink")
.attr("opacity", 0.7);
svg
.selectAll("line.median")
.data(data)
.join("line")
.attr("class", "median")
.attr("x1", d => x2(d.genre))
.attr("x2", d => x2(d.genre) + x2.bandwidth())
.attr("y1", d => y2(d.ratings_q.median))
.attr("y2", d => y2(d.ratings_q.median))
.attr("stroke", "black");
svg
.append("text")
.attr("class", "text")
.attr("transform", `translate(460, ${height - margin.bottom + 85})`)
.style("text-anchor", "middle")
.style("font-size", "14px")
.text("Genre");
svg = appendText(
"",
"Rating min, max, q1, q3, and median",
"Rating VS Genre of Disney Movies",
svg
);
return svg.node();
}
height = 500
margin = ({ top: 50, right: 10, bottom: 60, left: 60 })
import { select } from "@jashkenas/inputs"
d3 = require("d3")
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.
