Skip to main content
SimilarExport ZIP
100%

Smoothed Radar Chart

✓ Published0🌍 Public
OOumaimaFassi
Last edited Mar 1, 2018
Created on Feb 28, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/OumaimaFassi/'>OumaimaFassi</a>'s block: <a href='http://bl.ocks.org/OumaimaFassi/65c9d82eb7b4cb0dfdf3971dd12f493c'>final glyph</a>

mit Licensed

Similar vizzes

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
96% 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
95% match
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
94% 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
94% match
Loading thumbnail…

Smoothed Radar Chart

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.

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

SNCF_dataviz_corentin

This visualization compares two French railway stations by displaying their available on-site amenities, access modes, and traveler trip purposes side-by-side as small colored rectangles. The code uses D3 v4 (`d3.csv`, selections, and attribute manipulation) to load a dataset of SNCF station statistics, then renders SVG rectangles to encode each categorical variable for both selected stations. Station identifiers are defined in the script, and the tooltip and text elements display station names derived from the underlying CSV data.

CCtuauden
74% 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
74% match