mikeferri

@mikeferri·6 public vizzes

Fork of Making a bar chart 2!

This chart displays the populations of the ten most populous countries using horizontal bars. It loads data from a CSV file, converts population values, and scales them with `d3.scaleLinear` while positioning countries via `d3.scaleBand`. The SVG rendering includes axes from `d3.axisBottom` and `d3.axisLeft`, with formatted tick labels and a title. Styling via external CSS sets bar color, tick text, and label sizes.

Jan 1, 2022

Loading thumbnail…

Making a bar chart!

This horizontal bar chart displays population figures for ten countries, using the D3 v7 library to render an SVG graphic. The code imports specific functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 module. It loads data from a local CSV file, multiplies the population values by 1000, and plots ranked bars with steelblue rectangles. Axis labels and tick marks are generated through D3’s SVG-based axis APIs, with margins surrounding the plot area.

Jan 1, 2022

Loading thumbnail…

Let's make a face with D3.js!

A playful SVG face built with D3.js animates when the page loads, flipping vertically and raising its eyebrows before settling back into place. The example demonstrates core D3 modules, using `d3.select` and `d3.arc` to construct the circular head, eyes, eyebrows, and mouth from primitive shapes. It chains `transition` and `attr` calls to animate the group containing the face and the eyebrow elements over two-second durations. The code imports `select` and `arc` directly from the D3 v7 library, which is loaded via UNPKG, and relies on SVG coordinates and CSS styling for presentation.

Dec 31, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes, including circles, rectangles, lines, and paths, using SVG elements styled with CSS. The visualization employs a scale transform to enlarge the entire composition and a translate transform to reposition a group of shapes, while inline `fill` and `stroke` attributes apply colors and outlines. A CSS class named `.lines` defines stroke properties for the line and path elements, with the path using a teal stroke and rounded line joins. The page structure relies on standard HTML and CSS, with the SVG embedded directly in the markup.

Dec 31, 2021

Loading thumbnail…

HTML Cars Report

This example displays a static HTML cars report, listing three vehicles with their model years, names, and prices. It demonstrates how to load D3 via UNPKG and import it using `import` from `"d3"`, while also importing from local ES6 modules. The page renders a simple bulleted list with an inline CSS class that highlights one car in red, using standard HTML elements and a linked stylesheet.

Dec 31, 2021

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generation workflow. It displays a list of cars, filtering and formatting data asynchronously. The code uses D3 v5 loaded via a CDN, alongside local ES6 modules for data fetching and report generation. A Promise with a two-second delay simulates an API call to retrieve hardcoded JSON car data. The final output is rendered into an HTML `<pre>` element, styled with CSS.

Dec 31, 2021