Skip to main content
100%

Civic Impact through Data Visualization: Final

✓ Published0🌍 Public
Aaax951
Last edited Apr 19, 2016
Created on Apr 19, 2016

This interactive visualization combines a geographic map of San Francisco neighborhoods with a line plot of Airbnb listing activity over time. Using D3.js, the map displays neighborhood boundaries with circles sized by the number of listings, scaled with a square-root power scale. The line plot shows the time series of Airbnb activity for each neighborhood. Both views are linked: hovering or selecting a neighborhood on the map highlights its corresponding time series. Data comes from Inside Airbnb and is presented under a CC0 public domain license. The visualization allows users to explore how Airbnb listings are distributed across SF neighborhoods and how activity changes over time, providing insight into the company's civic impact.

AI-generated description

Join the chat at https://gitter.im/Jay-Oh-eN/interactive-data-viz

These are the materials for my workshop on creating interactive data visualizations with D3! We will be using the following two tools to work through the exercises:

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Throughout this workshop, you will learn how to make an interactive map of AirBnB listings in SF to better understand the companies impact on the city.

Exercises

  • Part 1: simple bubble chart visualizing 3 dimensions of the data.
    • solution
  • Part 2: thematic map of AirBnB listings distribution across SF neighborhoods.
    • solution
  • Final (you are here 👇): interactive linked map and line plot of AirBnB activity per each neighborhood in SF.

The Data

The data comes from Inside AirBnB and it is available below under a Creative Commons CC0 1.0 Universal (CC0 1.0) "Public Domain Dedication" license.

Inside AirBnB is an independent, non-commercial set of tools and data that allows you to explore how Airbnb is really being used in cities around the world.

Github repo: https://github.com/Jay-Oh-eN/interactive-data-viz

Archival event links:

forked from <a href='http://bl.ocks.org/Jay-Oh-eN/'>Jay-Oh-eN</a>'s block: <a href='http://bl.ocks.org/Jay-Oh-eN/b8ef4734abad1c644221'>Civic Impact through Data Visualization: Final</a>

Similar vizzes

Loading thumbnail…

Civic Impact through Data Visualization: Exercise 1

A bubble chart of San Francisco AirBnB listings shows price per available night against the number of reviews, with each circle’s color encoding room type (entire home, private, or shared). The graphic uses D3.js (version 3.5.8) with `d3.csv`, `d3.scale.linear`, `d3.svg.axis`, and SVG circles, rendering data from Inside AirBnB’s public dataset. The visualization is part of a workshop on civic data impact, emphasizing simple exploratory analysis before mapping.

NNathan-O
84% match
Loading thumbnail…

Airbnb Viz Final

This interactive scatterplot analyzes Airbnb listings, showing the relationship between any two selectable property attributes, such as price against person capacity. A slider filters data by a chosen attribute's minimum value, and an overlaid density distribution reveals the concentration of data points along the y-axis. The visualization is built with React and D3 v7, dynamically loading CSV data for selected cities and weekdays directly from a GitHub repository. Users can compare multiple European cities, switch between weekdays and weekends, and adjust the density calculation between global and per-column modes.

MMatt Hagger
73% match
Loading thumbnail…

Airbnb Viz Week 12

This interactive scatterplot visualization compares Airbnb listing attributes across selectable European cities and weekdays/weekends. Users can choose which numeric attributes to map to the X and Y axes—with the Y axis always displayed on a logarithmic scale—and apply a minimum-value filter via a slider. The visualization renders density-based color gradients within vertical bands for each X-axis category, using D3.js (d3.scaleLinear, d3.scaleBand, d3.scaleLog) for scaling and axis rendering, and React for the interface controls. City-specific CSV data is loaded from GitHub, and the density calculation uses a 5% window of the Y-axis range to aggregate point distributions.

MMatt Hagger
73% match
Loading thumbnail…

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble
73% match
Loading thumbnail…

Fork of ICE-6 (airbnb)

This interactive scatter plot displays Airbnb listings based on distance to the city center and metro distance, with point color encoding species (Adelie, Gentoo, or other). Built with D3 v5, it loads CSV data and maps values to an SVG canvas using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Each point uses `circle` elements with a fixed radius, while custom labels, tick styling, and explicit axis titles highlight the plot. The visualization emphasizes geographic proximity patterns against guest satisfaction metrics from the Airbnb dataset.

Pprathyusha-reddy-arch
70% match
Loading thumbnail…

Gist 6a8973daaeea6e442bd0a138c08ccbc1

This visualization maps Airbnb listings from a JSON dataset onto a geographic canvas, displaying each property as a point positioned by its latitude and longitude. The code uses the `d3.forceSimulation` API to apply a physics-based layout that separates overlapping points, while `d3.geoPath` renders the map’s spatial context. Each point’s color and size encode the listing’s review score and nightly rent, with tooltips revealing property details like title and neighborhood. The underlying data, from a gist, includes address fields, review ratings, and fee structures, driving the visual encoding. The result is an interactive scatterplot over a map, illustrating the distribution of rental properties and their pricing patterns.

YYonet
70% match
Loading thumbnail…

Final Project Data Viz

This interactive dashboard presents hate crime incidents in San Francisco, revealing the distribution of victims across suspect racial groups, bias types, offensive acts, and yearly trends. It combines a horizontal bar chart, a treemap, a bubble chart, and a time-series bar chart, all rendered as animated SVG graphics. The visualization uses D3 v7 APIs such as `d3.select`, `d3.csv`, `d3.rollups`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with hover-based tooltips for detailed data inspection, sourcing from the PD-Investigated-Hate-Crimes.csv file.

Nnathanjmuljadi@gmail.com
70% match
Loading thumbnail…

SF Arrests

This visualization maps arrests in San Francisco over the past week, plotting incidents as circles atop neighborhood boundaries and streets. It uses a Conic Equal-Area projection with d3.geoPath to render the basemap and arrest points from the city’s SODA API, filtered to citations or arrests. Hovering a neighborhood highlights its outline and shows its name, while a details panel displays data for selected incidents. The code relies on D3 v5 for loading GeoJSON and JSON data, and for handling interactive mouse events.

Ccj-luo
70% match