Zackaz

@Kazumaeric·4 public vizzes

React Starter

This horizontal bar chart displays the 2018 population estimates for the ten most populous countries, with values converted from thousands to raw numbers. The SVG visualization uses `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` with padding for the categorical y-axis. Population labels are formatted using `d3.format` to abbreviate large numbers, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The React starter project imports specific D3 v5 functions and appends rectangles directly to the SVG, styled with steelblue fills.

Dec 16, 2020

Loading thumbnail…

D3JS Starter

This example shows a simple animated smiley face rendered in SVG, with eyebrows that repeatedly raise and lower. The face is centered using a translated `<g>` element, and its features are built from basic shapes: circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The animation is driven by chained `transition().duration(2000)` calls that modify the eyebrow group’s transform. The code imports `select` and `arc` from D3 v5 and uses D3’s `transition` for the motion.

Dec 16, 2020

Loading thumbnail…

SVG Training Report

SVG shapes—circles, rectangles, lines, and paths—demonstrate fundamental vector drawing and styling in a static training report. The page shows primitive shapes with inline attributes like fill and stroke, augmented by CSS classes that apply shared stroke properties and highlight list items. It uses plain SVG elements within an HTML document, relying on CSS for color and stroke styling, while the accompanying markup lists sample vehicle prices.

Dec 15, 2020

Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each vehicle’s year, make, model, and cost as plain text. It fetches demo data from a local JSON array via a simulated asynchronous `getCars` promise, then applies a filtering and formatting pipeline using `generateReport` and `formatCar`. The React-based view updates a DOM element directly with `document.getElementById`, replacing an initial “Loading…” message with the final report.

Dec 15, 2020