Skip to main content
SimilarExport ZIP
100%

ColorIsFake Midterm

✓ Published0🌍 Public
Pphamiter253
Last edited Mar 24, 2020
Created on Feb 28, 2020
Forked from HTML Starter

This visualization compares average emergency response times across San Francisco neighborhoods, separating alarm and fire incidents by color-coded bundles. Animated stacked bars update when a user selects a year from the dropdown or toggles sorting. Built with D3 v5, it uses `d3.nest()` and `d3.layout.stack()` to aggregate CSV data, `d3.scaleOrdinal` for the categorical color mapping, and SVG transitions for the year-driven updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Pphamiter253
85% 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
76% 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
74% 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
74% 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
74% match
Loading thumbnail…

fresh block

This visualization compares SFPD incidents across San Francisco neighborhoods in 2016 using two synchronized SVG charts: a bar chart sorted by average incidents and a line chart showing daily trends. Hovering over a bar highlights the corresponding line, while clicking filters the line chart to that neighborhood. The code uses nested data aggregation via `d3.nest()`, and transitions with `d3.transition()` to animate highlights. Both charts share the same dataset, sourced from SF Open Data's SFPD Incidents 2016 Daily, with scales set using `d3.scaleLinear()` and `d3.scaleBand()`.

GGoomble
73% match
Loading thumbnail…

Untitled

This visualization is a heatmap showing monthly property crime counts in San Francisco from 2005 to 2015. Each cell represents a month and year, colored on a viridis scale from low to high crime totals, with years on the y-axis and months on the x-axis. The code uses d3.nest and d3.map to aggregate the CSV data, d3.scaleBand for axes, and d3.scaleSequential with d3.interpolateViridis for the color encoding. A gradient legend with a d3.axisBottom is rendered using an SVG linearGradient.

Vvaynexie
73% match
Loading thumbnail…

midterm1

This chart uses both a bubble chart and a bar chart to compare the number of records and potential threats across 33 San Francisco districts. District names are on the x-axis, with counts on the y-axis, and each district is represented by a circle whose size encodes the number of records and whose color encodes the number of potential threats. Built with D3 v4, the code loads data from a CSV using `d3.csv`, sorts districts by record count, and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleSequential` with an orange color interpolator. The SVG output highlights circles on hover by changing their stroke to red, though the underlying data source is a gist with a local file named `forbubblechart.csv`.

GGoomble
73% match