A

audreyfr

@audreyfr·16 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face using D3.js, with eyebrows that animate based on user interaction. The visualization uses SVG elements created and manipulated through D3’s core DOM selection and data-binding methods. The code relies on D3 v5, loaded via a CDN, and includes a video tutorial explaining the process. Rendering occurs entirely in SVG, with styles defined in a separate CSS file. No external data source is used; the face is constructed programmatically.

Loading thumbnail…

Cars Report

This example displays a text-based report of cars under a specified price threshold, showing their year, make, model, and price. It begins with a "Loading..." message while data is fetched asynchronously using a Promise with a simulated delay, then renders the filtered list. The code demonstrates JavaScript modules and array methods, including `filter` and `map`, with `JSON.parse` to load the car data and template literals for formatting.

Loading thumbnail…

Test années

A line chart displays the number of blood donors across ten French election years from 1973 to 2016, using yellow-filled points connected by a thin border. The visualization uses Chart.js 2.x with a canvas renderer, custom white background drawn via the beforeDraw plugin, and hidden legend. Tooltips show values with custom gray styling, while axes display year labels without gridlines on the x-axis and zero-based scaling on the y-axis.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.

Loading thumbnail…

Hello VizHub

This doughnut chart visualizes the number of donors across ten distinct years, from 1973 to 2016, using data embedded directly in the script. Each segment’s size and color represent the count for that year, with labels displayed outside the chart via the ChartDataLabels plugin. The visualization is rendered on a Canvas using Chart.js 2.x, configured with a legend on the right and hidden axes to emphasize the proportional data. The code also includes a separate D3.js line chart example with time-based scales and axes, though it is not displayed in this view.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.

Loading thumbnail…

Let's make a face with D3

A smiley face rendered in SVG responds to mouse movement by shifting its eyebrows. The example demonstrates fundamental D3.js DOM manipulation using `d3.select` and `d3.append` to build the face from circles and paths, with the `transform` attribute controlling its position. Eyebrow movement is driven by event handlers that update the `cy` attribute of SVG elements. All drawing uses SVG primitives within a single `<svg>` element, with no external data source.

Loading thumbnail…

Untitled

A yellow smiley face with black-outlined eyes and a wide open mouth is rendered in D3.js. The animation moves the face’s rectangular eyebrows upward and back down in a looping transition. The code uses D3’s `select`, `arc`, and `transition` APIs to construct the SVG shapes and animate the eyebrow group’s transform attribute over two sequential two-second durations. The visualization demonstrates fundamental DOM manipulation by building each facial feature from primitive SVG elements.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling, showing how circles, rectangles, lines, and paths can be composed and colored using both inline attributes and CSS classes. It uses standard SVG elements rendered directly in the browser, with styles defined in an external stylesheet that applies stroke properties to the line and path elements. The visualization illustrates the fundamental building blocks of SVG graphics, including coordinate transformations and color specification through hexadecimal and named values.

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a polyline path—and style them using both inline attributes and external CSS classes. The code uses the SVG API directly within an HTML file, applying transforms like `scale` and `translate` to position and group elements. A CSS rule with `.lines path` sets stroke color and rounded line joins, while inline attributes control fills and stroke widths for individual shapes. The visualization serves as a simple catalog of geometric primitives and styling techniques.

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data report for car listings. It displays a list of cars under a specified price threshold, showing each car’s year, make, model, and price. The page initially shows “loading...”, then after a two-second delay, it renders the filtered report using `getCars()` and a `Promise`. The code uses `JSON.parse` for the embedded dataset and `Array.filter`/`Array.map` to generate the final text output.

Loading thumbnail…

Cars Report

This example shows a single data point from a small built-in dataset of used cars, displaying the make of the first car ("Honda") in large text on a webpage. It demonstrates a minimal data-to-DOM pipeline: a hardcoded JSON array in `cars.js` is parsed into a JavaScript array using `JSON.parse`, then imported via ES modules into `index.js`. The code selects an HTML element by ID with `document.getElementById` and sets its `textContent` to the value. No external visualization libraries are used; the rendering relies entirely on plain JavaScript and static HTML.

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in bright white text on a dark navy background, styled with the Ubuntu font. The text is rendered using D3.js v5, where the `select` function targets a div element and updates its content with a string imported from a separate ES6 module. The page structure is defined in HTML, with styles applied via CSS and the visualization logic bundled in `bundle.js`.