UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// Final data structure
genre_groups
// Create a single data object, nested by genre and year
by_year_genre = T.tidy(
data,
T.arrange('Year'), // sort by year
T.mutate({ reviews: d => +d.Reviews }), // create a numeric value of "Reviews"
T.groupBy(
['Genre', 'Year'], // what to group by
[T.summarize({ total: T.sum("reviews") })] // summarise to compute total
)
)
// Get the domain of the x axis
x_domain = d3.extent(by_year_genre, d => +d.Year)
// Get the domain of the y axis
y_domain = d3.extent(by_year_genre, d => d.total)
// Create a scale function for the x position
x_scale = d3
.scaleLinear()
.domain(x_domain)
.range([margin.left, width - margin.right])
// Create a scale function for the y position
y_scale = d3
.scaleLinear()
.domain(y_domain)
.range([height - margin.bottom, margin.top])
// Group the data into two keys
genre_groups = d3.group(by_year_genre, d => d.Genre)
// Define a line function that takes in an **array of values** and returns a **single path**
line_fn = d3.line()
.x(d => x_scale(+d.Year)) // use the year of each object in the array to set the x position
.y(d => y_scale(+d.total)) // use the total reviews of each object in the array to set the y position
chart = {
// Create the svg container
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
// Draw the paths
svg
.selectAll("path")
.data(genre_groups) // bind the grouped data
.join("path")
.attr("d", d => line_fn(d[1])) // pass in the *array of values* from the genre
.style("stroke", "black")
.style("fill", "none");
return svg.node();
}
d3 = require("d3")
T = require('@tidyjs/tidy/dist/umd/tidy.min.js')
// Source: https://www.kaggle.com/sootersaalu/amazon-top-50-bestselling-books-2009-2019
data = FileAttachment("bestsellers with categories.csv").csv()
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
height = 500
import {
table_styles,
code_styles,
render_data_table
} from "@uw-info474/utilities"
table_styles
code_styles
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.
