Eline000

@Eline000·14 public vizzes

Circular Braplot 2012

A circular braplot uses a donut-shaped layout to compare the percentage change of various Dutch societal indicators from 2012, with each bar’s length extending outward from the center to encode its value. The chart is rendered as an SVG using D3.js v4, employing `d3.scaleBand` for angular positioning and `d3.scaleRadial` for the radial extent. Labels are rotated around the circle, and the chart loads data from a local CSV file.

Jun 4, 2020

Loading thumbnail…

Circular Braplot 2013

A circular bar plot displays percentage changes for 28 Dutch societal indicators from 2013, with bars extending outward from a central axis to show positive or negative values. Built with D3.js v4, the visualization uses `d3.scaleBand` for angular positioning and `d3.scaleRadial` for bar lengths, while `d3.arc` generates the annular bar shapes. Labels are rotated around the circumference using trigonometric calculations. The chart reads from a CSV file containing indicator names and their corresponding percentage changes.

Jun 4, 2020

Loading thumbnail…

Circular Braplot 2014

A circular bar plot displays 27 social and economic indicators for the Netherlands in 2014, with bar lengths representing percentage changes from the previous year. The SVG visualization uses d3.scaleBand for angular positioning and d3.scaleRadial for radial lengths, drawing each bar as an arc path with d3.arc. Labels are rotated around the circle and flipped at the midpoint for readability. Data is loaded from a CSV file using d3.csv, and the chart is rendered with D3 v4 alongside the external d3-scale-radial library.

Jun 4, 2020

Loading thumbnail…

Circular Braplot 2016

The chart shows changes in Dutch social and economic indicators for 2016 as a circular bar plot, with each bar’s length representing a percentage value from the CSV data. It uses d3.v4 with the d3-scale-radial library and SVG paths to draw arcs from an inner radius outward. Labels are rotated around the circle, with text flipped for readability, and the bars are colored teal.

Jun 4, 2020

Loading thumbnail…

Circular Braplot 2015

This circular braplot visualizes 27 social indicators for the Netherlands in 2015, with each bar's radial length representing the value of the corresponding metric. The chart uses the d3.scaleBand for angular positioning and d3.scaleRadial for the radial axis, with d3.arc drawing the individual bars. Labels are rotated and anchored around the circle using SVG transform attributes, and the d3.csv function loads the data from a local file.

Jun 4, 2020

Loading thumbnail…

Double circular barplot 2.0

This radial chart visualizes two circular barplot series around a shared axis, comparing country-level statistics with values that can extend above or below the baseline. The outer bars use a radial scale with an inner radius of 90 and an outer radius reaching half the SVG dimension, while an inner set of bars uses a reversed scale that shrinks toward the center. Data comes from `data.csv` and is drawn as SVG arcs using `d3.arc` with a band scale for angular positioning and custom label rotation. The code relies on the `d3-scale-radial.js` helper library alongside d3.v4.

May 28, 2020

Loading thumbnail…

Double circular barplot 1.0

A double circular barplot displays two radial series around a shared ring: teal bars show outer values from a CSV dataset, while red bars represent a second series drawn inward from the same angular positions. The visualization uses d3.v4 with the `d3-scale-radial` library, employing `d3.arc` for annular segments and `d3.scaleBand` for angular positioning. Labels rotate around the circle with text anchoring adjusted for readability. Data comes from a CSV file containing country names and numeric measurements.

May 28, 2020

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.

May 25, 2020

Loading thumbnail…

Streamgraph 2.0

This streamgraph displays changes in Dutch societal indicators from 2000 to 2018, including happiness, depression-related deaths, suicides, and bachelor’s degree graduates. The visualization uses a silhouette offset to center the stacked areas around a central axis, with each colored layer representing a different metric. Built with D3 v4, the example loads data from a CSV file and uses `d3.stack` with `d3.stackOffsetSilhouette` to compute layer positions, while `d3.area` generates the SVG paths. An ordinal color scale applies the `d3.schemeDark2` palette, and interactive tooltips reveal the layer name on mouse hover.

May 24, 2020

Loading thumbnail…

Streamgraph 1.0

A streamgraph displays changes in five data series from 1996 to 2018, including happiness scores, mood disorder diagnoses, and suicide-related metrics. Using d3.stack with stackOffsetSilhouette, the code layers filled areas symmetrically around a central axis, with d3.scaleOrdinal and d3.schemeDark2 assigning colors. The SVG rendering includes a gridline-based x-axis, and interactive hover effects dim other areas while tooltips identify the selected series. Data comes from a CSV file loaded via d3.csv.

May 24, 2020

Loading thumbnail…

Prototype geluk 3.0

Prototype geluk 3.0 displays yearly happiness scores from 1997 to 2018 as a scatterplot, with each circle representing a year’s geluk value. The chart uses a linear x-scale for happiness and a point y-scale for years. Built with D3 v5, it renders SVG circles via data joins and includes axes with percentage formatting. Data is loaded from a CSV file using `d3.csv`.

May 17, 2020

Loading thumbnail…

Prototype geluk 3.0

This scatterplot shows the trend of reported happiness in the Netherlands from 1997 to 2018, with each circle representing a yearly score on a percentage scale. The visualization uses d3.csv to load the data and d3.scaleLinear and d3.scalePoint for the axes, rendering circles as SVG elements. The chart includes a bottom axis formatted as percentages and a left axis listing each year, with the source data stored in a plain CSV file.

May 17, 2020

Loading thumbnail…

Prototype geluk 2.0

This visualization depicts changes in a happiness index over time from 1997 to 2018, using a horizontal bar chart where each bar’s length corresponds to the yearly happiness value. The chart is built with SVG and D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a local CSV file and rendered with styled rectangles. Axes are generated using `axisBottom` and `axisLeft`, with the x-axis formatted as percentages.

May 17, 2020

Loading thumbnail…

Prototype geluk 1.0

This bar chart visualizes reported happiness levels in the Netherlands from 1997 to 2018, with each bar’s length representing the yearly "geluk" score. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles with steelblue fill. Data is loaded from a local CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The visualization highlights slight annual fluctuations in happiness, remaining mostly stable between 87 and 89 points.

May 14, 2020