Balu-2111

@Balu-2111·4 public vizzes

Let's make a face with D3.js!

A smiling yellow face is drawn with SVG circles, rectangles, and an arc path, then animated when its eyebrows jump upward and settle back down. The example uses D3.js version 5 selections and transitions, including `transition().duration()` to move the eyebrow group's `transform` attribute. A React starter variant is mentioned in the README, though the core code relies on D3’s `select`, `arc`, and attribute manipulation to compose the face from basic geometric shapes.

Jun 19, 2023

Loading thumbnail…

Bar Graph AK

This example displays a static bar graph comparing the populations of ten countries, with bars rendered as fixed-size rectangles. The visualization uses D3 v5 to load population data from a CSV file and scales the x-axis domain based on the maximum population value, though the bars do not visually reflect the data values. The SVG output is generated through React, with the code importing `select`, `csv`, `scaleLinear`, and `max` from D3 to handle data binding and scaling.

Jun 18, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style geometric shapes using SVG elements and CSS. It displays circles, rectangles, lines, and paths within an SVG canvas, with some shapes inheriting fill and stroke properties from a parent `<g>` element. The code uses React for structure, vanilla SVG for rendering, and CSS rules to apply stroke styling to line and path elements. The `transform` attribute positions groups, while CSS classes control visual properties like stroke color and width.

Jun 17, 2023

Loading thumbnail…

Cars Report

This example presents a brief report on a small set of cars, listing their make, model, year, and price. The page initially displays “Loading…” for two seconds before using data from a local JavaScript array and a `generateReport` function to output a formatted text summary. Built with React and vanilla JavaScript, the visualization uses a promise-based `getCars` function to simulate asynchronous data retrieval, then updates the text content of a preformatted HTML element. The core library is D3.js, used here for DOM selection and text manipulation via `d3.select`.

Jun 16, 2023