Skip to main content
SimilarExport ZIP
100%

Smoothed D3.js Radar Chart

✓ Published0🌍 Public
Tthanhtrant219
Last edited Apr 17, 2020
Created on Apr 17, 2020
Forked from Untitled

This smoothed D3.js radar chart displays the proportional breakdown of COVID-19 transmission types, including travel-related, close contact, community transmission, and under investigation, across five defined geographic regions. The visualization uses a circular grid with five concentric levels, where each axis represents a transmission category and the filled area shows the aggregated values. Built with D3.js v3, it employs the `d3.scale.linear` for radius mapping and `d3.scale.ordinal` for color assignment, rendering as an SVG with animated glow effects. The chart reads from a static dataset of transmission percentages and displays the data as a single smoothed polygon.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

A smoothed D3.js radar chart compares multiple entities across four axes, using SVG rendering and animated transitions to display overlapping, semi-transparent polygons. The example plots hospital metrics—such as running cost, beds, nurses, and consultants—against five data series, each assigned a distinct color via an ordinal scale. Built with D3 v3 and React, the chart generates circular grid levels, axis lines, and radial labels, while a glow filter and round stroke option enhance the visual style. The radar chart function computes the maximum value from the dataset and scales radii accordingly.

EEboz98
76% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart visualizes a single data series across six categorical axes (comp, con, und, red, acc, tim), with values displayed as a percentage-based polygon. The chart features five concentric grid levels, rounded strokes for the blob path, and colored dots at each data point, all rendered as SVG. Built with D3 v5, it uses a linear radial scale and a custom `RadarChart` function based on Nadieh Bremer’s design. The visualization includes responsive sizing and a static steelblue color scheme, with basic styling via CSS.

SSchmittYannic
76% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart visualizes energy-related data, showing how intensity values vary across different sectors. The chart uses filled, semi-transparent areas with rounded strokes for each sector, overlaid on circular grid lines with percentage labels. A legend identifies each sector by color. Built with D3.js version 3, the visualization loads `data.json`, computes average values for sorting, and uses a linear radius scale to map data points onto the radar axes. The implementation includes a glow filter and tooltip support for enhanced interactivity.

SSrijan kumar
75% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This example shows a smoothed radar chart comparing multiple entities across several dimensions, with data for hospitals and products rendered as overlapping, semi-transparent polygons. The visualization uses D3.js version 3.5.6 to generate an SVG with circular grid lines, radiating axes, and animated blobs, with a glow filter added for visual emphasis. It relies on D3 scales for ordinal colors and linear radius mapping, with options for rounded strokes, tooltips, and level labels. The chart is built for React integration and uses static, embedded data arrays.

Mmoves123
74% match
Loading thumbnail…

Infection Type Chart

This stacked bar chart displays COVID-19 infection cases across Chinese provinces, broken down by transmission type: public transit, relative, social, and unknown. The visualization uses d3.layout.stack to stack the data series, with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. A form allows switching between absolute case counts and percentage-normalized views via stack.offset("expand"), with smooth transitions on the bars and axis. Hovering highlights individual segments using SVG opacity changes, and a custom legend is drawn manually.

LLex
74% match
Loading thumbnail…

Covid-19 Time Series(I Forked)

This interactive map visualizes the global spread of confirmed COVID-19 cases over time, using a world map with proportional orange circles sized by case count for each location. Users scrub through dates via a slider to animate changes in outbreak severity. The visualization loads geographic boundaries from the `world-atlas` TopoJSON feed and pulls time-series data from the Johns Hopkins COVID-19 dataset via `d3.csv`. It employs `d3.geoMercator` for projection and `d3.geoPath` for rendering, with circle radii scaled using `d3.scaleSqrt` and transitions animated through `d3.transition` on the slider input.

ZZY Huang
74% match
Loading thumbnail…

Infection Type Chart

This example shows the number of COVID-19 infection cases across Chinese provinces, stacked by transmission type (PublicTransit, Relative, Social, Unknown). Users can toggle between absolute counts and percentage-based views. The visualization uses d3.layout.stack and d3.svg.axis to render animated, stacked bar charts in SVG. A radio button triggers transitions between count and percent modes, while a custom tooltip and legend provide context. Data comes from a CSV file listing cases per province and transmission category.

Aatrixx
74% match
Loading thumbnail…

d3 choropleth map

This choropleth map visualizes the spread of COVID-19 cases over time, with an animating date slider and play/pause controls. The map uses d3.geoEckert5 projection, d3.geoPath, and TopoJSON, with color scales from colorbrewer and d3-scale-chromatic to shade regions by case counts. A draggable slider, built with d3.drag and d3.timeScale, shows daily case data from January to July 2020, while a legend and graticule provide spatial context.

Aashpradhan01123
74% match