Published
Edited
Feb 17, 2021
md`# Attempt at dataviz for airbnb`
d3 = require('d3@6')
listings = FileAttachment("listings.csv").csv()
listings_clean = listings
.filter(d => (d.calculated_host_listings_count > 0))
listings.columns
height = 500;
margin = ({top: 20, right: 10, bottom: 20, left: 35})
x = d3.scaleLinear()
.domain([0, d3.max(listings_clean, d => d.calculated_host_listings_count)])
.range([margin.left, width - margin.right])
.nice()
y = d3.scaleLinear()
.domain([0, d3.max(listings_clean, d => d.price)])
.range([height - margin.bottom, margin.top])
.nice()
color = d3.scaleOrdinal()
.domain(listings_clean.map(d => d.neighborhood))
.range(d3.schemeTableau10)
size = d3.scaleSqrt()
.domain(d3.extent(listings_clean, d => d.neighborhood))
.range([1, 30]) // output radii range from 4 to 35 pixels
{
// create the container SVG element
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// position and populate the x-axis
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x));
// position and populate the y-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// add circle elements for each country
// use scales to set fill color, x, y, and radius
const bnbs = svg
.selectAll('circle')
.data(listings_clean)
.join('circle')
.attr('opacity', .75)
.attr('fill', d => color(d.neighborhood))
.attr('cx', d => x(d.calculated_host_listings_count))
.attr('cy', d => y(d.price))
.attr('r', d => 3);
// return the SVG DOM element for display
return svg.node();
}
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.
