UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3
.csvParse(await FileAttachment("vgsales.csv").text())
.filter((d, i) => {
return i < 50;
})
render_data_table(data.slice(0, 10))
md`This data set contains information about the sales of video games, along with information about their publisher, genre, and platform. The data was scraped from vgchartz, a website that keeps track of video game sales.`
sunburst_data = d3
.nest()
.key(d => d['Platform'])
.key(r => r['Publisher'])
.entries(data)
sunburst_data2 = sunburst_data.map(d => {
d.name = d.key;
d.values = d.values.map(dd => {
dd.name = dd.key;
dd.values = dd.values.map(ddd => {
ddd.name = ddd.key;
return ddd;
});
return dd;
});
return d;
})
sunburst_hierarchy = d3.hierarchy(
{ key: "Platform", values: sunburst_data2 },
d => d.values
)
sunburst_hierarchy2 = sunburst_hierarchy.copy().sum(d => +d.Global_Sales)
circles
d3 = require("d3")
height = 800
width = 800
format = d3.format(",d")
import { swatches } from "@d3/color-legend"
import { chart as sunburst } with {
sunburst_hierarchy2 as data
} from "@d3/sunburst"
import { chart as circles } with {
sunburst_data2 as data
} from "@d3/circle-packing"
_ = require("lodash")
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.
