Radar Chart

100%

✓ Published0🌍 Public

Last edited Mar 19, 2017

Created on Mar 17, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

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

85% match

Loading thumbnail…

Radar Chart D3 V4

This example demonstrates a radar chart built with D3 v4, redesigned to improve the visual appeal of the original implementation by alangrafu. It renders an SVG-based spider chart with six axes, each labeled with a neighborhood name, and uses semi-transparent filled polygons to represent data series. The chart includes circular level lines and percentage labels, with axes extending from the center. The code defines a reusable `RadarChart.draw` function that accepts data and customizable options, and the example uses two series (e.g., Central and Picton) with hover interactions. The visualization is animated and styled with the Fira Sans font. The data shown is a single series with six areas, though the code supports multiple series.

AAnanda90

82% match

Loading thumbnail…

Radar Chart D3 V4

This radar chart displays multiple data series as overlapping polygons across five concentric levels, with each axis labeled for a district such as Central or Kensington. Built with D3 v4, it uses SVG elements and custom drawing functions to construct the circular grid, axes, and value areas. The chart supports mouseover transitions that emphasize individual polygons, and it loads JSON data to render values scaled to a maximum of 100.

AAnanda90

81% match