Skip to main content
Log in
P

Philippe Bonnet Doring

@PhilippeBonnetDoring·9 public vizzes

Loading thumbnail…

Let's make a face!

A playful SVG face is constructed from a collection of circles for eyes and a mouth, with interactive positioning of facial features. The example uses React to render the SVG elements and demonstrates a simple component-based approach to data visualization, where user input can adjust the face's expression. The code relies on React's state management to update the visual elements dynamically. The rendering is done directly to the SVG canvas, with styling applied through an external CSS file.

Apr 12, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of geometric shapes rendered as SVG elements, styled with CSS. The page uses D3.js version 5 to manage SVG creation, though the body starts empty and shapes would be appended dynamically. The stylesheet sets the body margin and hides overflowing content, creating a clean canvas for the visual elements. The rendering approach relies on standard SVG primitives and CSS styling rather than canvas or WebGL, making it a lightweight demonstration of vector-based visualization within a React-free, minimal HTML structure.

Apr 12, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example uses raw SVG elements—circles and rectangles—to demonstrate how CSS and SVG attributes control shape styling. The SVG markup applies colors individually via inline attributes such as `fill="rgb(255,0,0)"` and `fill="#83cc2a"`, while a `<g>` group element applies a shared `fill="blue"` to its child shapes. The page, styled by a minimal external stylesheet, resets margins and hides overflow on the body.

Apr 12, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple text-based report of three used cars for sale, showing the model, year, and price. The page presents the data as an unstyled HTML list, with the first car highlighted in red to draw attention. It uses plain HTML for structure and a linked CSS file (styles.css) to set the font size, family, and the `.highlighted` class color, providing a minimal demonstration of HTML and CSS integration within a React framework.

Apr 12, 2020
Loading thumbnail…

Cars Report

This example displays a filtered list of used cars with prices under $2,000, loading after a two-second delay. It shows how to structure data with JavaScript objects and arrays, using the `JSON.parse` method to interpret inline JSON data. The code demonstrates asynchronous data retrieval with a `Promise` returned by `getCars`, and formatting logic via the exported `formatCar` function. The report is generated by chaining `filter`, `map`, and `join` methods in `generateReport`, with the output rendered as text content into the page’s `pre` element.

Apr 7, 2020
Loading thumbnail…

Cars Report

This example displays a static report of five used cars, showing each vehicle’s year, make, model, and price. It renders the data by parsing a JSON string embedded in the `cars.js` module with `JSON.parse`, then assigns a simple greeting message to a DOM element using `document.getElementById`. The visualization relies on React for its component framework and outputs the plain text message to a `<pre>` element in the HTML, demonstrating a minimal data-driven setup without interactive charts or graphics.

Apr 7, 2020
Loading thumbnail…

Cars Report

A minimal starter example titled "Cars Report" renders the static text "Hello HTML" on a blank page. It demonstrates the basic structure of a React project, including an `index.html` file with inline CSS styling and placeholder content. The example uses plain HTML and CSS, with no JavaScript libraries or data sources yet implemented.

Apr 7, 2020
Loading thumbnail…

Cars Report

This example displays a filtered list of used cars with prices under $2,000, loading after a two-second delay. It shows how to structure data with JavaScript objects and arrays, using the `JSON.parse` method to interpret inline JSON data. The code demonstrates asynchronous data retrieval with a `Promise` returned by `getCars`, and formatting logic via the exported `formatCar` function. The report is generated by chaining `filter`, `map`, and `join` methods in `generateReport`, with the output rendered as text content into the page’s `pre` element.

Apr 3, 2020
Loading thumbnail…

Cars Report

This example displays a simple text report of cars under a specified price, loading a hardcoded JSON dataset and formatting each car as a string with year, make, model, and price. It uses asynchronous JavaScript with a custom `getCars` promise and `formatCar`/`generateReport` modules to filter vehicles by price and join them into a newline-separated output, rendered in a large preformatted HTML element.

Apr 3, 2020