Skip to main content
SimilarExport ZIP
100%

Civic Impact through Data Visualization: Exercise 1

✓ Published0🌍 Public
NNathan-O
Last edited Nov 15, 2015
Created on Nov 15, 2015

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.

AI-generated description

Join the chat at https://gitter.im/Jay-Oh-eN/data-scientists-guide-apache-spark

These are the materials for my workshop on creating interactive data visualizations with D3! We will be using the following two tools to works through these 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 (you are here 👇): simple bubble chart visualizing 3 dimensions of the data.
    • solution
  • Part 2: thematic map of AirBnB listings distribution across SF neighborhoods.
    • solution
  • Final: 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 link: Open Data Science Conference SF 2015

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/15f52d2ec0b035b53c6f'>Civic Impact through Data Visualization: Exercise 1</a>

Similar vizzes

Loading thumbnail…

AirBnb Data Visualized

This scatterplot displays the relationship between Airbnb listing prices and their reviews per month, with each circle representing a property. The visualization uses D3 v5 to load CSV data and render an SVG. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and appends circles with fixed radius to show the data points. The chart is titled "AirBnb Prices Vs Reviews Per month" and includes axis labels for clarity.

KKishore Thamilvanan
74% match
Loading thumbnail…

activity_6_task_4

This bubble chart visualizes California housing data, showing the relationship between median income and median house value across different locations. Each bubble’s size represents population, and its color encodes ocean proximity (e.g., NEAR BAY). The chart uses D3 v6 with `scaleLinear` for the x and y axes, `scaleSqrt` for bubble radius, and `scaleOrdinal` with a categorical color scheme. The SVG is rendered with circles, while axes are drawn using `axisBottom` and `axisLeft`. The data is loaded from a CSV file containing housing statistics.

TThai Ha Dang
73% match
Loading thumbnail…

activity_6_task_4

This bubble chart visualizes California housing data, plotting longitude and latitude coordinates to reveal geographic distribution. Each bubble’s size encodes population, while its color represents median house value on a gradient scale. The chart uses D3.js v6 with SVG rendering, including `scaleLinear` for axes, `scaleSqrt` for bubble sizing, `scaleSequential` with `d3.interpolateCool` for the color mapping, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data loads from a GitHub-hosted CSV, with a legend displaying the value range.

TThai Ha Dang
72% match
Loading thumbnail…

Final Project Bubble Chart

This visualization shows aggregated hate crime data from San Francisco’s PD-Investigated-Hate-Crimes.csv as an animated bubble chart. It filters out entries with zero suspects and displays the total number of suspects per offensive act and suspect race group, with bubble size encoding the count and color mapping race categories. The chart uses D3 v7’s `d3.forceSimulation` with collision and center forces to position the SVG circles, while interactive mouseover events reveal detailed tooltips. Data is loaded via `d3.csv` and aggregated using `d3.rollups`.

Nnathanjmuljadi@gmail.com
71% 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
71% 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…

Fork of HTML Starter

This circular packing chart visualizes Airbnb NYC listings, hierarchically nested by borough, neighborhood, and room type. The code uses d3.hierarchy, d3.pack, and d3.scaleOrdinal with d3.schemeSet3 to structure and color the data from AB_NYC_2019.csv. Interactive zooming via d3.transition and interpolateZoom allows navigation through the nested circles, while hover tooltips display the full path and listing count. Labels fade in and out during zoom transitions, and a legend identifies the three hierarchical levels.

Mmyselfganesh433@gmail.com
70% match
Loading thumbnail…

Activity_6_Question_4

This bubble chart displays the relationship between house size, price, and rating for five sample houses. The x-axis maps square footage, the y-axis maps price in thousands, and bubble radius encodes each house’s rating. Built with D3.js v6, it uses `d3.scaleLinear` for all three dimensions and renders circles as SVG elements. Interactive tooltips appear on mouseover, showing the house’s name, size, and price. The chart loads inline data matching the provided `bubblechart.csv` structure, with axes labeled and a steelblue fill for each bubble.

AAbrarb702@gmail.com
70% match