Wiebke

@WiebkeHeilmann·6 public vizzes

Transaction History

This example shows a line chart of transaction history, plotting cost over time for a dataset loaded from a remote CSV file. The visualization uses D3 v5 (`d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`) to render an SVG line path, with labeled axes and a title. The code parses the CSV values, converts the date column to JavaScript `Date` objects, and applies margins to position the chart within a fixed 960×500 SVG canvas. Grid lines are drawn via tick sizes, and the line stroke is styled in blue.

Jul 8, 2023

Loading thumbnail…

Most transactions where

A dashboard visualizes COVID-19 vaccination doses administered daily across US states, combining a choropleth map with a linked bar chart. The map overlays circles sized by doses for a selected date, while the bar chart shows a chosen state's time series. A dropdown menu selects the state, and the map updates to reflect the date brushed on the bar chart. Built with React and D3 v6, it uses `d3.forceSimulation` to position non-overlapping map circles and `d3.geoPath` for state boundaries, animating transitions via `d3.transition`.

Jul 8, 2023

Loading thumbnail…

Octagon

This example renders a single, intricate octagonal shape as an SVG path element. The path’s `d` attribute contains a compact sequence of absolute and relative commands (M, H, C, V, Z, L, c, v, h, z, m), building a geometric form with layered curves and straight segments. The design exploits the SVG coordinate system and viewBox to define the shape’s proportions. The code uses no JavaScript or external visualization libraries, relying entirely on static SVG markup and inline path data to produce the final graphic.

Jul 7, 2023

Loading thumbnail…

American Express

This example displays the American Express logo as a single smooth vector path, drawn with a thick black stroke on a transparent background. The graphic is rendered inside an SVG element using the `viewBox` attribute, with the path coordinates defined explicitly in the markup. It relies solely on basic SVG structure and CSS, without JavaScript or external libraries, to present the stylized geometric shape in a static format.

May 3, 2023

Loading thumbnail…

Battery

This example shows a partially drawn battery outline created with SVG. The code defines a simple `viewBox` of 200 by 100 and uses a `<path>` element to trace the battery’s top and left edges with rounded corners, though the path is incomplete and lacks the terminal and full body. Rendering relies on raw SVG markup embedded directly in the HTML, with no JavaScript libraries or data sources involved. The visualization is a static, minimal demonstration of path drawing syntax.

May 1, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path syntax for drawing custom shapes. It renders two red stroked paths on a 200x100 viewBox using the `d` attribute with arc commands (`A`, `a`), quadratic Bézier curves (`Q`, `q`), and line segments (`M`, `h`). The first path forms a stylized heart-like shape composed of arcs and curves, while the second builds a smaller abstract form from repeated arcs and an open quadratic tail. The code uses plain SVG within an HTML page, with no external libraries or data sources.

Apr 26, 2023