Louis

@louatgithub·7 public vizzes

Making a Bar Chart

This bar chart displays the population of the thirteen most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. Population values are shown as horizontal bars, ordered from China down to the Philippines. The visualization is built with D3 v5, using `d3.csv` to load the data, `scaleLinear` and `scaleBand` for the axes, and `axisLeft` and `axisBottom` for tick marks. Rectangles are appended to an SVG and styled with CSS, with the data rendered as raw SVG elements.

Jan 20, 2019

Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face emerges from a collection of SVG shapes, with red eyes, gray eyebrows, and a fixed arc-based mouth. The example demonstrates D3.js animation through chained `transition().duration()` calls, which sequentially reposition the eyes and eyebrows to create a subtle, shifting expression. The face is built using primitive SVG elements—`circle`, `rect`, and `path`—positioned relative to a central group, with the mouth defined by the `arc()` helper and its properties for inner and outer radius and angle ranges.

Jan 18, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with red eyes, gray eyebrows, and an arc-based mouth is drawn using D3.js v5. The code builds the face with SVG shapes, including circles for the eyes and a path generated by the `arc` function for the mouth. The eyebrows animate via `transition` and `.duration()`, moving upward and back down. The visualization uses D3's `select` to target the SVG element and positions elements with a centered translation.

Jan 18, 2019

Loading thumbnail…

Untitled

This example shows an interactive particle system that responds to mouse movement, with particles drifting and congregating around the cursor's position. Built with D3.js, it uses `d3.forceSimulation` with forces like `d3.forceX` and `d3.forceY` to steer particles toward the pointer, while `d3.forceCollide` keeps them from overlapping. The visualization renders on an HTML5 Canvas via the Canvas 2D API, with particle positions updated each frame from the simulation’s tick events. The README notes the code is authored by louatgithub and uses a simple color palette based on particle speed.

Jan 17, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline SVG attributes. It shows basic geometric primitives with varied fills, strokes, and group-level transformations, including scaling, translation, and nested styling via classes. The code uses native SVG elements within an HTML document, with CSS rules in `styles.css` applying stroke colors and line join styles to the `.lines` class. No external libraries are used; rendering relies entirely on the browser’s SVG support.

Jan 17, 2019

Loading thumbnail…

HTML Cars Report

This example displays a static report of three used cars with their model years, makes, and prices. The data is hardcoded as an HTML list. It shows how CSS can style a single list item with a blue color and use a monospace font at a large size. The report is rendered through standard HTML elements and styled using a linked stylesheet, with the class name "highlighted" applied to the first entry.

Jan 17, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple text report of cars filtered by price, using asynchronous data loading to show a loading message before displaying results. The code uses ES6 modules to organize functions like `getCars` for a simulated API call, `formatCar` for string construction, and `generateReport` to filter and map car objects. The report is rendered into a `<pre>` element via the DOM API, with the data defined inline as JSON and parsed using `JSON.parse`. No D3.js is used despite the metadata, relying instead on native JavaScript promises and array methods.

Jan 17, 2019