Skip to main content
100%

Ekokartan radar chart

✓ Published0🌍 Public
Aangelicahl88
Last edited Jun 2, 2016
Created on Jun 2, 2016

Ekokartan is a radar chart that visualizes the percentage of organic food purchases across different product categories in Sweden, with values ranging from 5.6% for bread to 73.5% for coffee and tea. The chart displays a four-level circular grid with axes labeled by product group, and a shaded polygon represents the aggregated organic purchase share. Built with D3.js version 3.5.5, it uses `d3.csv` to load the data and `d3.scale.linear` for the radial scale, with SVG circles and paths for the grid and data area. The visualization is styled with the Lato font and a custom legend, and it is hosted as part of a geoshepherds.com interactive feature.

AI-generated description

Built with blockbuilder.org

This is an example of a radar chart used to visualise organic food purchases in Sweden. You can visit the full visualisation here.

Similar vizzes

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

This example shows a radar chart comparing nutritional values across sixteen categories, including protein, fat, carbohydrates, calcium, and vitamins, for a single food item. The chart renders as a circular grid with five concentric levels, using SVG paths and smoothed, rounded strokes to create a distinct blob shape. It is built with D3.js version 3, leveraging the library’s linear scale for radial positioning, ordinal color scaling, and SVG filters for a glow effect. The visualization includes interactive hover tooltips and animated transitions, with data displayed as percentage values.

CChang-Yup Son
68% match
Loading thumbnail…

Radar Chart D3 V4

This example presents a radar chart built with D3 v4, displaying six categories—such as Central, Kirkdale, and Everton—with values on a scale up to 100. The visualization uses SVG polygons to represent the data series, overlaid on a circular grid with five levels and axis lines, all rendered with animated mouseover effects. The code relies on D3’s `d3.scaleOrdinal` for color encoding and `d3.json` to load the embedded data file, while custom configuration controls the chart’s dimensions and styling.

TThanaporn-sk
66% match
Loading thumbnail…

Radar Chart

This interactive radar chart visualizes personal well-being across seven dimensions, comparing survey responses from 2013, 2014, and 2015. It uses d3.select, d3.scale.ordinal, and d3.scale.linear to render overlaid, colored polygons with a circular grid, axis lines, and percentage labels. The data represents Dutch-language metrics such as happiness, life satisfaction, and financial contentment. SVG output includes a glow filter and hover tooltips, with a legend distinguishing each year.

EEline000
65% match
Loading thumbnail…

Radar chart

A radar chart, also known as a spider chart, compares two data series across five categorical axes: Visualization, Machine Learning, Data Manipulation, Web Scrapping, and Search Engine. One series shows full values of 1, while the other displays fractional values. The SVG-based visualization, built with D3.js v3, uses a custom `RadarChart.draw` function to render circular level rings, percentage labels, axis lines, and filled, semi-transparent polygons for each series. The chart includes hover interactions and a color scale from `d3.scale.category10()`, with static legend titles defined in the accompanying script.

SSaintat1
65% match
Loading thumbnail…

Fork of Radar Analysis Test

This visualization displays nutritional data for two groups, "Before" and "After," using a multi-axis radar chart with 20 nutrient categories. The chart uses D3 v4 APIs such as `d3.lineRadial()`, `d3.curveLinearClosed`, and `d3.scaleLinear()` to draw concentric level lines, radial axes, and percentage labels. Each group is rendered as a semi-transparent, colored polygon with circles at data points, accompanied by an SVG legend. The hard-coded values, identical across both groups, suggest a template for comparing dietary intake profiles.

Bblueyjuice
65% match
Loading thumbnail…

Radar chart

A radar chart displays multiple series of data as colored polygons overlaid on a circular grid of axes, with each axis representing a category. Values are scaled relative to the dataset’s maximum, and percentage labels mark the grid levels. The code uses D3 v3 to build the SVG, calculating polygon points from trigonometric functions and animating fill opacity on mouseover. Grid lines, axis labels, and legends are drawn with `d3.select` and `append`, while color is assigned via `d3.scale.category10()`.

MMohamedZaki
65% match
Loading thumbnail…

Online shopping rate

This radial stacked bar chart displays monthly online shopping rates across eight spending ranges, from 0.1 to 0.8. Each month is shown as a wedge around the circle, with colored segments representing different value brackets and the radius encoding the proportion of shoppers in each category. Built with D3 v4, it uses d3.stack, d3.arc, and d3.scaleBand to generate the sectors, while d3.axisLeft and custom radial gridlines indicate percentage levels. The data comes from a CSV file, and a custom d3-scale-radial library from Mike Bostock’s radial chart examples is included, though the main radius scale employs d3.scaleLinear instead.

Iillyyo
65% match
Loading thumbnail…

Smoothed Radar Chart

This example presents a smoothed radar chart (also known as a spider graph) that compares multiple quantitative axes—such as Sales, Marketing, and Development—across three distinct categories, each assigned a unique color and legend. The visualization uses D3 v4 to render SVG paths with rounded strokes and animated transitions, while offering configurable options for levels, maximum values, units, and custom color scales. The chart draws circular grid lines and axis labels, with data from an inline dataset representing budget allocations and actual spending.

KKuerzibe
64% match