SimonPlanje

@SimonPlanje·6 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases, showing a row of fruit that changes over time through user-driven actions. Five apples appear initially, then one is removed, another transforms into a lemon, and a second apple disappears. The visualization uses D3 v5 with SVG rendering, employing `scaleOrdinal` for color and radius mappings, along with enter, merge, and exit selections to handle data joins dynamically.

Nov 13, 2020

Loading thumbnail…

Lets make a MAP with d3 :)

This interactive map displays the municipalities of the Netherlands, rendered as green SVG paths with orange borders atop a pink sphere. It uses the d3.geoPath and d3.geoMercator APIs to project TopoJSON data from cartomap.github.io. A red circle is also placed using a projection call, though its data binding appears incomplete. The visualization incorporates d3.zoom to enable pan and zoom interactions, which apply a transform to the map group.

Nov 10, 2020

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of country populations, using D3 v6 to load data from a CSV file and render it as SVG rectangles. The visualization orders countries by descending population, with bar lengths scaled linearly and categorical spacing handled by `d3.scaleBand`. The code uses `d3.csv` to parse the data, `d3.scaleLinear` for the x-axis, `d3.axisLeft` and `d3.axisBottom` for labeled axes, and appends styled `<rect>` elements to the SVG.

Nov 3, 2020

Loading thumbnail…

Lets make a face :)

A stylized face built from SVG shapes animates with coordinated, repeated transitions. An orange background holds a lime-green circle, with black-stroked eyes and rectangles for eyebrows. The left eye and both eyebrows perform a looping "wink" or shrug via chained `transition().duration()` calls, shifting their positions and radius. A mouth is drawn using the `d3.arc()` path generator. The code uses D3 v6 and React, reading SVG dimensions with `parseFloat` and the unary `+` operator.

Nov 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A purple SVG canvas displays a face constructed entirely from D3.js shapes. The example uses `d3.select` to target the SVG element and applies a solid background color, creating the visual foundation. The face itself is built through D3's geometry and layout functions, though the concrete shape-drawing code is not visible in the provided snippet. The rendering relies on standard SVG elements within a 960×500 viewport, demonstrating basic D3.js styling and selection capabilities.

Nov 2, 2020

Loading thumbnail…

live API coding for fame

This example demonstrates a live, step-by-step coding session that fetches parking location data from the RDW Open Data API and explores its structure. The code retrieves a JSON dataset via the `fetch` API, extracts specific columns such as `areaid` and `usageid`, and logs unique values and counts of empty strings to the console. The page itself displays a simple "Hello API" message. It shows how to work with asynchronous data loading and array manipulation in vanilla JavaScript without visualization libraries.

Oct 27, 2020