UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
render_data_table(data.slice(0, 10))
// Nest your data by type 1, then type 2
nested_data = d3
.nest()
.key(d => d['address'])
.key(a => a['room_type'])
.entries(data)
// Structure your data as a hierarchy -- pass in an *object* whose *values* are your nested data
// To show each pokemon the same size, specify a `.sum` where each value is 1
hierarchy_Sunburst = d3
.hierarchy(
{ key: "Greater Seattle Area", values: nested_data },
d => d.values
)
.sum(d => +d.bedrooms)
// Create your own partition function: it can be the same as the one in the other notebook,
// But doesn't include the `d3.hierarchy` function (as we've already done that step)
my_partition = data => d3.partition().size([2 * Math.PI, 500])(data)
chart
md`## Tree Map
I ended up only selecting one key for nesting in Treemap because or else all the category will be too small to visualize.
`
chart2.update()
circlePacking
md`## Tree Diagram
Apparently my data set is not good for using tree diagram. If I list every unique value, about 6000 rows, my browser will not respond and recommend me to go into safe mode. So the best I could do is to display proerty options
`
tree_nested_data = d3
.nest()
.key(d => d['address'])
.key(a => a['room_type'])
.entries(data)
tree_formatted_Data = ({
name: 'Greater Seattle Area',
children: tree_nd
})
import { chart as chart4 } with {
tree_formatted_Data as data
} from '@d3/tidy-tree'
chart4
raw_data = d3.csvParse(await FileAttachment("Airbnb_Cleaned.csv").text())
data = raw_data.filter(
d => d.overall_satisfaction >= reviewSlider && d.price <= priceSlider
)
data.forEach(d => (d.address = d.address.split(",")[0]))
import {
displayCaution,
render_data_table,
table_styles
} from "@info474/utilities"
table_styles
_ = require('lodash')
d3 = require("d3@5")
height = 800
width = 800
format = d3.format(",d")
import { swatches, legend } from "@d3/color-legend"
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.
