UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csvParse(
await FileAttachment("lec_playerdata@1.csv").text(),
d3.autoType
)
render_data_table(data.slice(0, 10))
md`This dataset is from Kaggle and talks about the players in the 2019 LoL European Championship Season. It contains players from 10 different teams, each of which have about 5-7 players.`
cleanData = ({ name: `${splitSelection}`, children: nestedData })
md`## Treemap`
treemap
import { chart as treemap } with { cleanData as data } from "@d3/treemap"
md`## Sunburst`
sunburst
md`## Tree Diagram`
treeDiagram
md` This visualization uses position encoding to show which players played for what team, as well as which players played what position -- based on the option selected above. It's a straightforward visualization that does its job well-enough, I think since it's clear and concise. Its primary downside is being unable to communicate the match frequency of each player. `
md`## Circle Packing`
circlePacking
md` This visualization primarily uses size encodings to denote how frequent a player played for a team/position. I think it quite accurately represents what it's trying to do, though a downside could be the relatively small size of players who didn't play as much as starters -- which could cause visibility issues. `
d3 = require("d3")
height = 1000
_ = require("lodash@4")
import { select, radio } from "@jashkenas/inputs"
html`<style>
body {
font-family: Montserrat;
color: black;
}
</style>`
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.
