Luda Shashua (@lfunk), VizHub

Shapes with SVG and CSS

This example demonstrates population data for the world’s largest countries using rectangular shapes drawn as SVG elements, with each bar’s width representing the country’s population. The visualization uses D3 v5’s `csv` loader to parse the `data.csv` file and binds the parsed data to `rect` elements via `svg.selectAll('rect').data(data)`. The code also defines a separate `cars` dataset parsed from JSON, though it is not rendered. Styling is applied via CSS classes, including a `.lines` class that targets paths, while the React starter integrates the D3 logic within a component.

Nov 4, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes composed of circles, rectangles, lines, and paths, all positioned within a 960 by 500 viewport and scaled with a group transform. The shapes use CSS classes to apply strokes and fills, with the path element receiving a green stroke and round line joins. The React app also loads car data from a JSON string, filters for prices under $10,000, and displays the formatted results in a message element after a simulated asynchronous delay.

Oct 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes composed of circles, rectangles, lines, and paths, all positioned within a 960 by 500 viewport and scaled with a group transform. The shapes use CSS classes to apply strokes and fills, with the path element receiving a green stroke and round line joins. The React app also loads car data from a JSON string, filters for prices under $10,000, and displays the formatted results in a message element after a simulated asynchronous delay.

Oct 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

A static SVG scene shows circles, rectangles, a line, and a polyline path arranged in a decorative group, with teal, red, and blue fills, a red stroke on the rectangles, and green styling on the path via CSS. The page also loads a hardcoded JSON array of four cars, filters those under $10,000, formats each into a text string, and displays that text after a two-second Promise-based delay. The example uses React-compatible starter files, raw SVG elements, CSS class selectors, and JavaScript Promise `.then()` for asynchronous data handling.

Oct 20, 2020

Loading thumbnail…

Cars Report

This example shows a filtered list of cars from a small JSON dataset, displaying only those priced under $10,000 in a formatted text block. The page initially shows a set of hardcoded car entries in a bulleted list, then replaces a "loading..." message with the dynamically generated report after a two-second delay. The implementation uses React for the starter structure, JavaScript promises for the simulated asynchronous data fetch, and the `JSON.parse` API to convert the embedded car data into objects, which are then filtered and mapped into display strings using native array methods.

Oct 20, 2020