fresh block

100%

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Mar 17, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

86% match

Loading thumbnail…

radar-char-new

This radar chart displays emergency call data across five San Francisco neighborhoods, breaking down incidents by type such as potentially life-threatening, alarm, fire, and non-life-threatening calls. The visualization uses a custom `RadarChart` module built with d3.v3, where each neighborhood’s values are mapped to axes with the `RadarChart.draw` function. Data is parsed from comma-separated strings into series, and the chart’s color and dimensions are configured through `RadarChart.defaultConfig`. Each radar chart is rendered into separate div containers, with shapes colored distinctly for comparison.

CCatherine-Yu

84% 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

83% match

Loading thumbnail…

radar-char-new

This example presents five radar charts comparing emergency call categories—potentially life-threatening, alarm, fire, non-life-threatening, and other—across San Francisco neighborhoods (TI, NE, SE, NW, SW). Each chart displays a single polygon with color-coded areas, using the custom `RadarChart.draw` function and the `RadarChart` library built on D3 v3. The code parses CSV-formatted strings, sets per-chart colors via `RadarChart.defaultConfig`, and renders each region’s data in a separate container with a shared title.

CCatherine-Yu

82% match

Loading thumbnail…

radar-char-new

This example displays a radar chart comparing emergency call categories—potentially life-threatening, alarm, fire, non-life-threatening, and other—across several San Francisco neighborhood regions (TI, NE, SE, NW, SW). The code builds each polygon from hardcoded CSV-style string data, parsing it into the radar-chart format and drawing it with the custom `RadarChart.draw` API built on d3.v3. Each region is rendered as a separate chart instance with a distinct color, using the radar-chart.js library’s polygon and circle rendering.

CCatherine-Yu

81% match

Loading thumbnail…

radarChart

This interactive radar chart compares emergency call volumes across five geographic regions (NE, NW, SE, SW, TI) for three call types: Alarm, Fire, and Non-life-threatening, plus Potentially Life-Threatening. Built with D3 v3 and SVG, it renders polygonal areas per category with a hover focus effect that dims non-selected regions. The chart uses six axes with three concentric grid levels, and its tooltip displays exact values on mouseover. Data is embedded as CSV and parsed dynamically within the page.

CCatherine-Yu

79% 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…

Version1

This radar chart compares emergency call types across geographic regions (NE, NW, SE, SW, TI) using five axes with three concentric grid levels. The D3.js v3 visualization renders SVG polygons and circles for each category, with hover interactions that highlight one area while dimming others via CSS class toggles. Data is embedded as a CSV string parsed in JavaScript, and custom tooltips display values on mouseover. The chart uses `RadarChart.chart()` and `RadarChart.draw()` from a reusable module with configurable radius, dimensions, and transition durations.

CCatherine-Yu

75% match