TimvanAlphen

@TimvanAlphen·8 public vizzes

Bowl of fruit - General update pattern

Five apples appear as red circles in an SVG bowl, then one disappears and another turns yellow. The demo shows D3’s general update pattern, using `selection.data`, `.enter`, `.merge`, and `.exit` to bind an array of fruit objects to `circle` elements. `d3.scaleOrdinal` maps fruit types to fill colors and radii via `colorScale` and `radiusScale`, while `setTimeout` triggers the state changes.

Nov 10, 2020

Loading thumbnail…

Barchart test

This example visualizes the total capacity of Dutch parking areas by combining two RDW open datasets, one containing area manager info and another with vehicle specifications. Using a custom asynchronous `getDatasets()` function with `await fetch`, it merges records by matching `areamanagerid`, sums the `capacity` fields, and filters out zero-capacity entries. The resulting combined data is logged to the console, demonstrating data joining and reduction with JavaScript array methods, though no actual SVG bar chart rendering is implemented despite the title.

Nov 9, 2020

Loading thumbnail…

Barchart

This bar chart visualizes survey data categorized by interest, retrieved from a GitHub-hosted JSON file. The visualization uses the D3.js library (version 6.2.0) within a React framework, rendering bars as SVG elements. The code applies conventional margins to position the chart group, with the SVG canvas sized dynamically based on its CSS style properties. Data is fetched from the specified endpoint and mapped to the bar dimensions, though the specific encoding of bar heights or labels is not shown in the provided snippet.

Nov 9, 2020

Loading thumbnail…

Exploring survey data interactively - y-axis

This interactive bar chart lets users explore survey data by selecting different variables to plot on the y-axis via a dropdown menu. The x-axis groups respondents by subject interest, while the y-axis can display averages or totals for metrics like height, stress, or family size. Built with D3 v5, it uses the general update pattern to dynamically adjust scales, bars, and axes when the selection changes. The dropdown options are generated from the data itself using a data join.

Nov 9, 2020

Loading thumbnail…

Barchart custom axis

A horizontal bar chart displays population figures for ten countries, with a custom x-axis that abbreviates large numbers (e.g., 'B' for billions) via `d3.format`. The chart uses `d3.scaleLinear` for the x-scale and `d3.scaleBand` for the y-axis, with axes generated by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV using `d3.csv`, and the SVG rendering includes gridlines via tick sizes and removes default axis domains for a clean look.

Nov 8, 2020

Loading thumbnail…

Barchart intro

This bar chart displays country population values as horizontal bars, with each bar’s length proportional to its numeric population figure. The visualization uses D3 v6 (d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom) to compute scales and render axes, while appending SVG rectangles for each data row. Data is loaded from a CSV file via d3.csv and the population field is multiplied by 1000 during preprocessing.

Nov 3, 2020

Loading thumbnail…

D3 Bar Chart

This example displays a simple bar chart built with D3.js, rendering a static set of bars without a specific data source. The visualization uses the D3 library to create and style the bars, leveraging its core selection and scaling APIs to position and size the elements. The chart is embedded in an HTML page with a React starter framework, though the code itself relies on standard D3 functions for the visual output.

Nov 3, 2020

Loading thumbnail…

Intro D3

This example shows a simple, animated face constructed from basic SVG shapes. A yellow circle with a black outline forms the head, with two smaller circles serving as eyes. A paper-bag-shaped mouth is drawn using a path with the D3 `arc` generator. The code uses D3 v6 selection and appending methods to build the SVG structure, and a chained `transition().duration()` call to animate the eyebrows upward and back down. The animation runs once on page load, demonstrating the basic use of D3 for creating and manipulating vector graphics within a React-free, vanilla JavaScript environment.

Nov 3, 2020