femke.pieters@uhasselt.be

@femkepieters213·7 public vizzes

Big dataset try-out scatterplot (with multiple functionalities)

This scatterplot visualizes the event timelines of multiple cases from a CSV dataset, mapping each event’s timestamp on the x-axis and its corresponding case on the y-axis. The visualization supports sorting cases by start time or duration via a dropdown menu, and users can highlight a specific activity, which changes the color of the event circles. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.axisBottom` to render the SVG, with hover tooltips and an animated color update for selected activities.

Sep 1, 2026

Loading thumbnail…

Try-out scatterplot (with hover-over + sorting option)

This scatterplot visualizes event data from a fine-issuance process, with each circle’s vertical position mapping to a specific case and its horizontal position to the event’s timestamp. Users can sort cases by start time or duration via a dropdown menu. The D3 v5 code uses `scaleBand` for the y-axis, `scaleTime` for the x-axis, and `scaleOrdinal` with `schemeCategory10` for activity colors. Hovering over a circle reveals a tooltip with case details, and a sorting option reorders the y-axis.

Aug 25, 2026

Loading thumbnail…

Fork of Try-out scatterplot (with hover-over + sorting option + activity selection)

This dot plot visualizes the duration and timing of fine-related processes, with each case plotted on the y-axis and events shown as colored circles along a time-based x-axis. The D3.js visualization uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleBand` for axes, and `d3.scaleOrdinal` for activity-based coloring, while `d3.axisBottom` and `d3.axisLeft` render the scales. Interactive features allow sorting cases by start time or duration via a dropdown and highlighting specific activities, with mouse hover revealing details through a positioned tooltip. The rendered SVG includes animation support and is built with D3 v5.

Aug 25, 2026

Loading thumbnail…

Try-out scatterplot (with hover-over)

A dot plot visualizes the lifecycle of traffic fine cases, with each circle representing an event plotted along a time axis (x) and grouped by case identifier (y), while color encodes the activity type. Hovering over a circle displays a tooltip with the case name, activity, timestamp, and total case duration in days. The visualization uses D3 v5 with `scaleTime`, `scaleBand`, `scaleOrdinal`, and `schemeCategory10`, rendering events as SVG circles from CSV data.

Aug 25, 2026

Loading thumbnail…

Try-out scatterplot

This scatterplot visualizes fine-management event sequences over time. Each circle shows an event, positioned by its timestamp on the x-axis and its case identifier on the y-axis, while color encodes the activity type. The visualization uses D3 v5 to parse the CSV data, map timestamps with `scaleTime`, and ordinal categories with `scaleBand` and `scaleOrdinal`. Axis ticks are formatted with `timeFormat` and rendered as SVG elements within a defined margin.

Aug 17, 2026

Loading thumbnail…

Try-out scatterplot (v2?)

This scatter plot shows the relationship between horsepower and weight for a collection of cars, using red semi-transparent circles on a light gray grid. It is built with D3 v5, using an SVG canvas and the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load and scale the data from an auto-mpg CSV file. The chart includes labeled axes, tick marks, and a title, with the visual encoding relying on circle position to convey the correlation.

Aug 17, 2026

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal HTML page titled “HTML Cars Report” that displays only the static text “Hello.” Built with a plain HTML document and no external visualization libraries, it serves as a blank-slate starting point for development with hot reloading. The page contains no dynamic data, charts, or interactive elements, instead offering an empty canvas for future work. The code is straightforward, consisting of a basic `<body>` element with no CSS or JavaScript logic beyond the document structure itself.

Aug 13, 2026