Skip to main content
SimilarExport ZIP
100%

Smoothed Radar Chart

✓ Published0🌍 Public
OOumaimaFassi
Last edited Feb 10, 2018
Created on Feb 10, 2018

This visualization displays a smoothed radar chart comparing qualitative and accessibility metrics for Paris Nord railway station, including cleanliness, security, comfort, and average distance. The dataset comes from a CSV file containing station attributes. The code uses D3.js v4 with SVG rendering and animation capabilities, utilizing the `RadarChart` function to generate the chart. It employs `d3.scaleLinear` for radial scaling, `d3.scaleOrdinal` for color assignment, and includes a glow filter defined with SVG `feGaussianBlur` and `feMerge` elements to enhance visual appeal. The chart presents multiple axes arranged circularly, with data points connected to form a polygon shape.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Smoothed Radar Chart

This example visualizes passenger station amenities and accessibility data for French train stations as a smoothed radar chart. It compares two stations—Paris Nord and one other—across seven axes including cleanliness, security, comfort, and PMR assistance scores, using an animated SVG rendering. Built with D3 v4, the visualization employs an ordinal color scale and a custom radar chart module that maps values to radial coordinates. Data comes from a CSV dataset containing station quality metrics and passenger counts, with the chart updating dynamically when the data loads.

OOumaimaFassi
95% match
Loading thumbnail…

Smoothed Radar Chart

This smoothed radar chart compares two French railway stations across seven qualitative and quantitative criteria, including cleanliness, security, passenger information, waiting comfort, shops and restaurants, average distance traveled, and accessibility for people with reduced mobility. The chart renders two overlapping, semi-transparent polygons, one blue and one dark orange, using the D3.js library’s SVG and animation capabilities. Data is loaded from a CSV file via `d3.csv`, and each station’s scores are normalized to a ten-point scale before being passed to the custom `RadarChart` function, which uses `d3.scaleOrdinal` for color and `d3.scaleLinear` for radial scaling.

OOumaimaFassi
93% match
Loading thumbnail…

Smoothed Radar Chart

This visualization compares French railway stations using smoothed radar charts, displaying seven quality metrics such as cleanliness, safety, and accessibility. Users can select one or two stations from the dataset to overlay their profiles, with an animated transition between selections. The charts are rendered as SVG elements using D3.js v4, employing the `RadarChart` function to generate circular grids and interpolated blobs. Data is loaded from a CSV file containing station ratings and passenger statistics.

OOumaimaFassi
92% match
Loading thumbnail…

Smoothed Radar Chart

This visualization compares passenger services at the Gare de Lyon and Paris Nord railway stations, displaying seven quantitative axes covering attributes like cleanliness, security, and accessibility. It uses D3.js v4 to render a smoothed radar chart with an SVG and CSS animation, drawing data from a CSV dataset of French train stations. RadarChart.js constructs the polygon using smooth curves, with each station labeled and color-coded.

OOumaimaFassi
92% match
Loading thumbnail…

Smoothed Radar Chart

This example visualizes a smoothed radar chart comparing passenger ratings across multiple French train stations, showing metrics like cleanliness, security, and communication. The D3.js v4 code loads station data from a CSV file using `d3.csv`, then renders the chart as an SVG with two station profiles overlaid. It uses a custom `RadarChart` function that draws circular grid lines, labels, and area polygons with optional glow filters, animated to display the comparative data.

OOumaimaFassi
91% match
Loading thumbnail…

Smoothed Radar Chart

This smoothed radar chart compares French railway stations across seven service-quality criteria, including cleanliness, security, accessibility, and passenger information. Users can select one or two stations to overlay their performance profiles, with each axis normalized to a 0–10 scale and a composite score calculated from the weighted attributes. Built with D3 v4, the visualization uses the SVG rendering pipeline to draw curved, semi-transparent polygons, and includes a glow filter and animated transitions for interactive feedback. The underlying data comes from a CSV file containing station attributes and traveler satisfaction metrics.

OOumaimaFassi
91% match
Loading thumbnail…

Simple Radar Chart

This simple radar chart displays monthly average temperatures for Paris, France, over multiple years, with each year rendered as a separate colored, semi-transparent polygon. The radial grid uses concentric circles and twelve spokes for months, with temperature values scaled linearly from -5 to 5 degrees. Built with D3 v4, the code loads JSON temperature data and maps each monthly reading to a radial position, closing each yearly loop. The visualization applies `d3.radialLine` for shape generation and uses `d3.scaleLinear` for both radius mapping and gradient color assignment.

BBaptisteL54
79% 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
74% match