annesmets

@annesmets·3 public vizzes

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Nov 23, 2020

Loading thumbnail…

Intro to D3.js (making a face)

This example demonstrates how to construct a simple smiling face using D3.js v6 primitives. The visualization builds the face from an SVG circle for the head, two additional circles for eyes, and an arc-generated path for the mouth, all positioned within a translated group. The mouth uses an animated transition over 2 seconds to shift its vertical position, showcasing D3’s built-in transition capabilities. The code relies on D3’s `select`, `append`, and `arc` APIs, rendering entirely through SVG elements without external data sources.

Sep 8, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using raw SVG elements within a React-based visualization. The shapes are styled with both inline attributes and CSS classes, showing how to combine SVG presentation properties with stylesheet rules. The code uses native SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS controlling stroke width and color for grouped elements. It highlights the simplicity of drawing static vector graphics without external libraries, relying solely on markup and CSS for visual output.

Sep 8, 2020