Skip to main content
100%

Bubble Chart

✓ Published0🌍 Public
Aanaeliaovalle
Last edited Mar 19, 2017
Created on Mar 13, 2017

This bubble chart visualizes San Francisco Fire Department call incidents from December 2016, encoding each call type as a circle whose area corresponds to its count. The data comes from a CSV file listing call types and their frequencies, such as Medical Incident and Alarms. The visualization uses d3.pack to compute the circle layout, with d3.scaleOrdinal assigning categorical colors, and SVG circles rendered within a 960x960 frame. Hovering reveals a tooltip with the exact call type and count, while a legend identifies each category's color.

AI-generated description

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063269'>Bubble Chart</a>

forked from <a href='http://bl.ocks.org/anaeliaovalle/'>anaeliaovalle</a>'s block: <a href='http://bl.ocks.org/anaeliaovalle/dcb8fd22e376cce85372884cc096a8ab'>Bubble Chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart working tree

A bubble chart visualizes San Francisco Fire Department call incidents from December 2016, encoding nine call types as circles whose areas represent counts. The chart uses D3 v3’s `d3.layout.pack` to position non-overlapping bubbles, with an ordinal color scale mapping each call type to a distinct pastel hue. Hovering a bubble reveals its exact count via a tooltip, while labels appear on larger categories. The visualization includes a legend and derives its data from a CSV file containing call type and frequency counts.

Aanaeliaovalle
96% match
Loading thumbnail…

bar chart v3

This bar chart displays the number of San Francisco Police Department incidents by category for December 2016, with categories sorted from highest to lowest count along the vertical axis and counts plotted horizontally. The visualization uses D3 v3 to render SVG elements, employing `d3.scale.linear` for the x-axis, `d3.scale.ordinal` with `rangeRoundBands` for the y-axis, and `d3.svg.axis` for both axes. Data comes from a CSV file with category and count columns, and bars are drawn as SVG rectangles filled with steelblue.

Aanaeliaovalle
78% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart shows the proportion of call types—Alarm, Fire, Non Life-threatening, and Potentially Life-Threatening—across five San Francisco districts. The visualization uses d3.csv to load the data, d3.scaleBand for the x-axis and grouped bars, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The SVG rendering includes axes, gridlines, and a legend, with percentages formatted using d3.format.

LLjfernando
77% match
Loading thumbnail…

Radar Chart

This example presents five radar charts, one per San Francisco neighborhood, comparing the proportions of emergency call types: potentially life-threatening, alarm, fire, non-life-threatening, and other. Each chart plots a single series of data points, drawn as an SVG polygon using custom D3 functions, with axes and level rings. The code builds each radar chart from CSV data parsed in JavaScript, applying different colors per neighborhood and enabling hover interactions that highlight the focused area while dimming others. The implementation relies on D3 v3 for selections, transitions, and mouse events.

CCatherine-Yu
76% match
Loading thumbnail…

HW1 Chart1

This bar chart shows the number of 911 calls per police district in San Francisco, with districts ordered alphabetically along the x-axis and call counts on the y-axis. Each bar is rendered as an SVG rectangle using D3 v4’s data join, with a steelblue fill that turns brown on hover. The chart includes labeled axes, a title, and a horizontal grid generated via `d3.axisLeft` with custom tick sizing, while the data is loaded from a tab-separated `data.tsv` file using `d3.tsv`.

LLjfernando
75% match
Loading thumbnail…

fresh block

This visualization compares San Francisco dispatch call data across five neighborhoods using a series of radar charts. Each chart isolates a single region, plotting the count of calls by type—such as Alarm, Fire, and Non-life-threatening—on axes radiating from the center, with larger shapes indicating higher frequencies. The charts are rendered as SVG using the D3.js v3 library’s radar-chart module, with custom styling applied via CSS. The static charts are generated from hardcoded CSV data, with each neighborhood assigned a distinct color to aid comparison.

CCatherine-Yu
75% match
Loading thumbnail…

bar chart v3

This horizontal bar chart shows the number of San Francisco Police Department incidents recorded in December 2016, sorted by category with larceny/theft as the most frequent and liquor law violations and suicide as the least. Using D3 v3 and SVG rendering, the visualization employs `d3.scale.linear` for the x-axis, `d3.scale.ordinal` with `rangeRoundBands` for the categorical y-axis, and `d3.svg.axis` for both axes. Data is loaded from a CSV file, with counts parsed as numbers and sorted descending. The chart includes a title, axis labels, and a brief descriptive caption.

Aanaeliaovalle
75% 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
74% match