Skip to main content
Log in
V

Veerle

@veerleprins·18 public vizzes

Loading thumbnail…

Fork of Mouse Follower - components

A React application renders an SVG rectangle that tracks the user's mouse cursor across a 960-by-500 viewport. The `MouseFollower` component uses React's `useState` hook to store cursor coordinates, updating them via an `onMouseMove` event handler that calls `setMousePosition`. The SVG `<rect>` element repositions itself to the stored x and y coordinates. The code demonstrates state-based interaction without external libraries, relying solely on React's change detection to trigger re-renders.

Jan 16, 2021
Loading thumbnail…

Mouse Follower

A circle that tracks the mouse is not present; instead, this interactive SVG renders a 200-by-100 rectangle that follows the pointer across a 960-by-500 drawing area. The example demonstrates Reactive state updates in React, using the `useState` and `useCallback` hooks to capture `clientX` and `clientY` coordinates from the SVG’s `onMouseMove` event. Each pointer movement updates the rectangle’s position, with the captured coordinates logged to the console. Built with React 16.9 and rendered via ReactDOM, the visualization relies on declarative JSX to bind mouse data directly to SVG attributes.

Jan 16, 2021
Loading thumbnail…

Fork of Pie chart RDW - Sergio

This visualization shows how many Park & Ride locations were created per year in the Netherlands, using data from the RDW Open Data API. A donut chart displays each year as a segment, with year labels placed at the outer edge and hover interactions intended to reveal exact counts (though the mouseover functions are defined but not yet attached). The code uses d3.pie, d3.arc, and d3.scaleOrdinal with the category10 scheme, fetching data via the Fetch API and rendering as SVG with transitions prepared for hover effects.

Dec 23, 2020
Loading thumbnail…

Pie chart Test

This example shows a simple pie chart of browser usage, displaying four labeled slices with a legend-like color scale. The visualization is rendered as an SVG element using D3 v6, with data hardcoded in the script rather than loaded from the CSV file. The code uses `d3.pie()` to compute arc angles, `d3.arc()` to generate path data, and `d3.scaleOrdinal` for color mapping. Each slice includes a text label positioned via `label.centroid()`. The chart is centered on the page using CSS transforms.

Dec 23, 2020
Loading thumbnail…

Menus with React

This example shows a simple pet selector menu built with React, displaying a dropdown list of six animals and logging the current selection to the console. The interface uses a label and a <select> element, with the dropdown component receiving options, an ID, a selected value, and a change handler as props. The app manages state through React’s useState hook and renders the dropdown via ReactDOM. React 16.9.0 and ReactDOM are loaded from unpkg, with styling applied directly in the HTML document.

Nov 25, 2020
Loading thumbnail…

Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, ranked by population, with country names on the left and a linear population scale on the bottom. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Axis labels and ticks are generated by `AxisBottom` and `AxisLeft`, which map scales to SVG elements. Data comes from the UN World Population Prospects 2019 CSV, loaded asynchronously with `d3.csv` inside a custom `useData` hook.

Nov 20, 2020
Loading thumbnail…

Making a barchart

This bar chart displays the population of the ten most populous countries based on 2018 estimates from the World Population Prospects 2017 dataset. The SVG visualization uses d3.csv to load and parse the data, d3.scaleLinear for the population axis, and d3.scaleBand for the categorical country axis. Horizontal bars are rendered as SVG rectangles, with axes generated using d3.axisBottom and d3.axisLeft. d3.max determines the domain, while margin conventions and padding control layout and bar spacing.

Nov 10, 2020
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the World Population Prospects 2017. It uses D3 v6 with an SVG rendering approach. The code employs `d3.csv`, `scaleLinear`, and `scaleBand` for the axes, while `axisBottom` and `axisLeft` generate the ticks. Custom axis formatting via `format('.2s')` converts population values to abbreviated labels like "G" for billions, and gridlines are drawn using negative tick sizes.

Nov 10, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 General Update Pattern for entering, updating, and exiting data-bound circles. It initializes five apples as circles using `d3.range` and `selectAll().data().enter().append()`, placing them horizontally via the `cx` attribute. The SVG scene, defined in the HTML, is rendered with D3 v6, and the circle radius and color are set statically, without any interactive updates or transitions beyond the initial rendering.

Nov 4, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population over time, drawing on data from a CSV file of world population by year. The chart uses a time-scaled x-axis and a linear y-axis, with a filled area beneath the population curve. The visualization is built with D3 v6, using `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and the `axisBottom` and `axisLeft` helpers to render the SVG output. Population values are formatted with abbreviations, and both axes include custom labels.

Nov 4, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature measurements in San Francisco, with time on the x-axis and degrees Celsius on the y-axis, using a filled area curve to highlight the daily temperature variation. The visualization loads data from a CSV file provided by Data Canvas - Sense Your City, and renders the chart as an SVG using D3 v6. The code constructs scales with `d3.scaleTime` and `d3.scaleLinear`, generates axes via `d3.axisBottom` and `d3.axisLeft`, and creates the shaded area path with `d3.area` and `d3.curveBasis`.

Nov 4, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with a smooth curve plotted over time. The visualization uses D3 v6 to load CSV data, create time and linear scales with `scaleTime` and `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. The line is generated using the `line` generator with `curveBasis` for smoothing, displayed as an SVG. Data originates from the Data Canvas - Sense Your City project.

Nov 4, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 version 6, specifically calling `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Data is loaded from a CSV file via `csv()` and rendered as SVG circles with a fixed radius. The chart includes labeled axes and a title, with a clean design using muted tick marks and grid lines. The dataset originates from the Data Canvas - Sense Your City initiative.

Nov 4, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars from the UCI Auto MPG dataset, with each semi-transparent purple circle representing a vehicle. The x-axis maps horsepower while the y-axis maps weight, using linear scales created with d3.scaleLinear and axes generated through d3.axisBottom and d3.axisLeft. The code loads CSV data via d3.csv, parses numeric columns, and renders SVG circles positioned with the scale functions. Axis labels and a title provide context, while tick marks extend across the plot to aid reading values. The visualization uses d3.v6 and follows a margin-based layout pattern.

Nov 3, 2020
Loading thumbnail…

Scatter Plot

This scatter plot displays the 2018 population estimates for the top 10 most populous countries, using circles positioned along a horizontal population axis and a vertical country axis. The chart is rendered as an SVG using D3 v6, with a linear scale for population and a point scale for country categories. The code loads data from a CSV file, converts population strings to numbers, and uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the visualization. Axis tick formatting converts large numbers into abbreviated units like "B" for billions.

Nov 3, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, eyebrows, and a mouth is drawn using D3.js v6 SVG elements. The eyes and eyebrows are positioned symmetrically around the center, while the mouth uses a path generated with the `d3.arc` API. Eyebrows animate through chained `transition` calls, moving up and down over two seconds each way, demonstrating simple SVG attribute tweening. The example relies on explicit pixel coordinates for layout, with a static SVG viewport of 960 by 500 pixels.

Nov 2, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, eyebrows, and a mouth is drawn using D3.js v6 SVG elements. The eyes and eyebrows are positioned symmetrically around the center, while the mouth uses a path generated with the `d3.arc` API. Eyebrows animate through chained `transition` calls, moving up and down over two seconds each way, demonstrating simple SVG attribute tweening. The example relies on explicit pixel coordinates for layout, with a static SVG viewport of 960 by 500 pixels.

Nov 2, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of SVG shapes positioned in a grid, with circles and rectangles styled in black, red, and green, while a translated group and stroked line and path add variety. It demonstrates basic SVG markup with inline attributes for fill, stroke, and transforms, combined with minimal CSS for full-page layout. The code uses raw SVG elements—circle, rect, g, line, and path—without any JavaScript libraries, relying solely on browser-native rendering and a linked stylesheet for presentation.

Nov 2, 2020