Skip to main content
Log in
C

Claudio Barone

@claudiobarone·6 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

Apr 3, 2020
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

Apr 3, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates the basic building blocks of SVG graphics—circles, rectangles, lines, and paths—combined with CSS styling to control shapes, colors, and strokes. It shows how elements inherit fill and stroke properties from parent `<g>` groups, while individual attributes like `fill`, `stroke-width`, and CSS classes (`lines`) override those defaults. The visualization uses inline SVG with a `scale` transform and a `translate` group for positioning. The code relies on native SVG APIs and CSS rules defined in an external stylesheet, with no JavaScript or data source involved.

Mar 30, 2020
Loading thumbnail…

HTML Cars Report

This example presents a minimal HTML page titled “Cars Report,” rendered with React as the framework. The page displays a single heading, “Cars Report,” with no additional data or charts. It uses basic HTML structure via `index.html` and does not include any visualization libraries or data processing. The source is listed as v3, and the author is claudiobarone. The report focuses solely on the static header text, with no interactive elements or graphical representations of car data.

Mar 30, 2020
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, displaying models under a $2,000 price threshold after a simulated two-second loading delay. It uses JavaScript modules and Promises to handle asynchronous data retrieval. The `getCars` function parses hardcoded JSON, while `generateReport` filters and formats the output using template literals. The page initially shows “Loading...” and updates a `<pre>` element via the DOM API. No visualization libraries are used; the rendering relies on plain JavaScript string manipulation and DOM text content updates.

Mar 30, 2020
Loading thumbnail…

Cars Report

A sample React app displays a static “Hello World” message inside a preformatted HTML element. The interface shows the text in large, monospaced type on a blank page, with no interactive behavior. The implementation consists of an `index.html` file that references a bundled JavaScript file, and an `index.js` module that uses `document.getElementById` to directly update the text content of the message element. This minimal example demonstrates the basic structure of a React starter project, though it relies on vanilla DOM manipulation rather than React components or state. The data source is a single hardcoded JavaScript string.

Mar 30, 2020