MrG113

@MrG113·6 public vizzes

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries from 2019 estimates in World Population Prospects. The visualization uses D3 v5 with SVG rendering and shows population values for each nation. The code reads data from a CSV file using d3.csv, then maps country names to rectangular bars with steelblue fill. The chart includes axes with labeled ticks, a title, and an axis label, all styled with the Ubuntu font.

Aug 10, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries based on 2019 data from the World Population Prospects. The visualization uses D3 v5’s `csv` method to load the dataset and renders rectangular bars in SVG with a steelblue fill. The axes, styled with tick labels and an axis label, are generated using D3’s default scale and axis functions. The chart includes a title element and uses the Ubuntu font from Google Fonts for consistent typography.

Aug 10, 2019

Loading thumbnail…

Making a Bar Chart

This visualization displays the populations of the ten most populous countries, based on 2019 estimates from World Population Prospects. The chart is rendered as SVG, with each country’s population represented by a vertical bar of proportional height. The code uses D3 v5 modules, specifically the `select` API to manipulate the DOM, and scales and axes are constructed to position bars and label ticks. Data is loaded from a local CSV file, and styling is applied via external CSS, including a custom font and steelblue bar fill.

Aug 10, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from SVG elements, with animated eyebrows that move up and down. The code uses D3 selections to append a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. It applies `transition` with a two-second duration to animate the eyebrow group’s vertical position, showcasing data-driven document updates. The rendering uses SVG within a 960x500 viewport, driven entirely by D3’s `select` and `arc` APIs.

Aug 10, 2019

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report, filtering a hardcoded JSON dataset of five vehicles by price and formatting each entry as a single line with year, make, model, and cost. It shows an asynchronous loading state before displaying the final report in a large `<pre>` element. The code uses ES6 modules, `JSON.parse`, a `Promise` with `setTimeout` to simulate a data fetch, and `Array.filter` combined with `Array.map` and `join` via exported functions `getCars`, `formatCar`, and `generateReport`.

Aug 10, 2019

Loading thumbnail…

Hello VizHub

A single large circle floats against a steel-blue field, its radius fixed at 100 units. The visualization loads country population data from a CSV, though the visible output shows no bars or axes. The code imports D3 v5 utilities like `select`, `csv`, and `scaleLinear`, but only renders the circle via a direct SVG attribute selection. The page structure uses a plain `div` in the HTML, with styling applied through an external stylesheet.

Aug 10, 2019