lukastieber

@lukastieber·9 public vizzes

Success Rate

This example displays a color legend for two fruit types, apple and lemon, each assigned a distinct color from a red-to-yellow palette. The visualization renders SVG circles with corresponding text labels, positioned along the horizontal center of a 960 by 600 canvas. Implemented in React with D3 v5, the code defines a custom `colorLegend` component that uses `scaleOrdinal` to map data domains to colors and appends circle and text elements to groups, with enter and exit animations for dynamic updates.

Aug 20, 2020

Loading thumbnail…

Lets make a BarChart

A bar chart displays the top 10 most populous countries, with horizontal bars ordered by rank and sized by population in thousands. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with `axisLeft` and `axisBottom` providing labeled ticks. Population data is loaded from a CSV file via `d3.csv`. The React framework wraps the rendering, which outputs SVG elements styled with steelblue rectangles and custom text for the title and axis labels.

Aug 10, 2020

Loading thumbnail…

Lets make a BarChart

This bar chart displays population counts for ten countries, with horizontal bars ordered by country name and scaled by population value. The visualization uses React with D3 v5, leveraging `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for labeled axes. Bars render as SVG rectangles filled with steelblue, with the population values multiplied by 1,000 during preprocessing. The chart applies margins and a padding value to separate bars, producing a clean, readable comparison of national populations.

Aug 10, 2020

Loading thumbnail…

Lets make a face

A cheerful cartoon face is drawn in SVG, with a yellow circular head, black-outlined eyes and eyebrows, and a curved mouth made from an arc path. The eyes and eyebrows perform a repeating blink animation using chained `transition().duration(500)` calls, shrinking the eye radius and shifting the eyebrow group vertically before returning to their original states. The visualization uses React with D3 v5, specifically the `select` and `arc` utilities, to build and animate the face in a fixed 960×500 SVG canvas.

Aug 10, 2020

Loading thumbnail…

Lets make a face

A friendly yellow face (rendered with SVG) blinks and raises its eyebrows: its eyes and brows animate through a pair of D3 transitions, while its mouth is drawn using the `d3.arc` shape generator. Created with React and D3 v5, the example uses a simple `transition` chain to shrink and restore the eye circles and shift the eyebrow rectangles. The underlying data is static, with all geometry defined by hardcoded dimensions and positions within a single centered SVG group.

Aug 10, 2020

Loading thumbnail…

Lets make a face

A smiling face is drawn with D3.js in an SVG, featuring a yellow circle head, two eyes, and a mouth arc. The code uses basic SVG shapes like `circle` and `rect`, and the `d3.arc()` function to generate the mouth path. The eyebrows are animated with chained `transition()` calls, moving up and down over 500ms intervals. This example is built with React and D3 v5, with the face centered and scaled based on the SVG’s dimensions.

Aug 10, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and styled entirely through CSS. It shows how SVG elements inherit presentation attributes like `fill` and `stroke` from parent groups and stylesheets, with a nested `g` element applying blue fills and black strokes. The code uses raw SVG markup inside an HTML file, with a separate stylesheet defining stroke widths and colors for the path elements. The rendering approach is pure SVG, with no JavaScript or external libraries involved.

Aug 7, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, where the area of each teal point is proportional to city population via a square-root scale. The map includes landmasses, country boundaries, and graticules, all rendered as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from the Simplemaps World Cities Database, loaded with `d3.csv` in React. Point sizes are computed with `d3.scaleSqrt`, with circles rendered at projected coordinates from `d3.geoPath`.

Aug 7, 2020

Loading thumbnail…

Cars Report

This example displays a single car record from a static JSON dataset, showing its year, maker, model, and price. The code imports the car data from a separate module, uses array filtering and mapping to process records, and writes the formatted result into a page element. It relies on React for the project setup, though the visible logic uses plain JavaScript with JSON parsing and DOM textContent assignment. The visualization is minimal, presenting only the first car’s details as text rather than a chart or graphic.

Aug 7, 2020