UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
prices_reviews = {
const text = await FileAttachment("airbnb_seattle_listings@1.csv").text();
return d3.csvParse(
text,
({ price, number_of_reviews, neighbourhood_group }) => ({
x: +number_of_reviews,
y: +price,
color: neighbourhood_group
})
);
}
c1_x = d3
.scaleLinear()
.domain([
d3.min(prices_reviews, d => +d.x),
d3.max(prices_reviews, d => +d.x)
])
.range([c1_margin.left, width - c1_margin.right])
c1_y = d3
.scaleLinear()
.domain([
d3.min(prices_reviews, d => +d.y),
d3.max(prices_reviews, d => +d.y)
])
.range([c1_height - c1_margin.bottom, c1_margin.top])
set_colors = _.uniqBy(prices_reviews.map(d => d.color))
c1_xAxis = g =>
g
.attr("transform", `translate(0,${c1_height - c1_margin.bottom})`)
.call(d3.axisBottom(c1_x))
c1_yAxis = g =>
g.attr("transform", `translate(${c1_margin.left},0)`).call(d3.axisLeft(c1_y))
chart1
price_per_neig = {
const text = await FileAttachment("airbnb_seattle_listings@1.csv").text();
return d3.csvParse(text, ({ price, neighbourhood_group }) => ({
x: neighbourhood_group,
y: +price,
color: 'lightsalmon'
}));
}
//aggregate the data
group_price_per_neig = d3
.nest()
.key(d => d.x)
.rollup(v => d3.mean(v, d => d.y))
.entries(price_per_neig)
neigborhood = _.unionBy(group_price_per_neig, 'key').map(d => d.key)
c2_x = d3
.scaleLinear()
.domain([0, d3.max(group_price_per_neig, d => d.value)])
.range([c2_margin.left, width - c2_margin.right])
c2_y = d3
.scaleBand()
.domain(d3.range(group_price_per_neig.length))
.rangeRound([c2_margin.top, c2_height - c2_margin.bottom])
.padding(0.1)
c2_xAxis_t = g =>
g
.attr("transform", `translate(0,${c2_margin.top})`)
.call(d3.axisTop(c2_x).ticks(width / 80, group_price_per_neig.format))
.call(g => g.select(".domain").remove())
c2_xAxis = g =>
g
.attr("transform", `translate(0,${c2_height - c2_margin.bottom - 11.6})`)
.call(d3.axisBottom(c2_x))
c2_yAxis = g =>
g.attr("transform", `translate(${c2_margin.left},0)`).call(
d3
.axisLeft(c2_y)
.tickFormat(i => group_price_per_neig[i].key)
.tickSizeOuter(0)
)
color_scale = d3.scaleOrdinal(set_colors, d3.schemeCategory10)
format = c2_x.tickFormat(20, group_price_per_neig.format)
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.
