Skip to main content
SimilarExport ZIP
100%

Midterm Project

✓ Published0🌍 Public
AAryan Dilip Choudhary
Last edited Feb 22, 2020
Created on Feb 7, 2020
Forked from HTML Starter

This interactive visualization analyzes the San Francisco Fire Department Calls for Service dataset to assess station placement. It presents an overall objective of determining if existing stations are properly positioned to serve the city and whether new stations are needed. The React-based tool (built with Bulma for styling) provides a home section outlining the analysis goal and a data section detailing the dataset's scope, which includes over 5.21 million records with 34 columns. The interface uses Font Awesome icons for navigation between these sections, allowing users to explore the context and raw data behind the spatial analysis.

AI-generated description

A bare minimum HTML page.

See also React Starter.

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
72% match
Loading thumbnail…

ColorIsFake Midterm

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.

Pphamiter253
70% 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
67% match
Loading thumbnail…

Linechart Version 4

This interactive visualization explores San Francisco weather data, allowing users to switch between line and area charts for different variable combinations. Built with React and D3 v5, it features animated transitions between chart types, dropdown menus for selecting axes and grouping, and a slider to adjust point opacity. The implementation uses D3 scales, axes, and SVG paths with transitions, while a custom tooltip provides detailed values on mouseover. A color legend appears when data is grouped by category.

SSchmittYannic
67% 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
66% match
Loading thumbnail…

Linechart Version 3

This interactive visualization displays San Francisco weather data from December 2015, plotting temperature metrics over time with the ability to switch between line and area chart views. Users can select which weather variables to display on the x and y axes, group data by season or other categories, and adjust point transparency via a slider. Built with React and D3 v5, the chart uses scaleTime, scaleLinear, and area or line generators to render SVG paths with animated transitions. A tooltip appears on mouseover, showing the precise time and value at the cursor position using d3.mouse and d3.timeFormat. The visualization supports dynamic updates through dropdown menus and demonstrates reusable chart components that re-render when data or display options change.

SSchmittYannic
66% match
Loading thumbnail…

Working on Time

This interactive scatterplot visualizes San Francisco temperature readings over a week, with time on the horizontal axis and temperature on the vertical axis. React renders SVG circles positioned using d3.scaleLinear scales, while custom AxisBottom and AxisLeft components generate tick marks and labels with d3 time formatting. Data loads asynchronously via d3.csv from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG title tooltip.

HHaris Abdullah
65% 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
65% match