b-g-h

@b-g-h·6 public vizzes

Shapes and Colors with SVG and CSS

This example builds a smiling face out of basic SVG shapes, including a yellow circle, eyes, nose, and an arc-based mouth, all centered on a dark blue background. The face is constructed using D3 v5 selections and the `arc` generator, with CSS controlling the page layout. Animated eyebrows demonstrate D3 transitions, moving horizontally and vertically via `attr` changes on SVG path elements over specified durations.

Nov 29, 2019

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the population of the ten most populous countries, using data from the 2019 United Nations World Population Prospects. The chart features custom axis formatting: y-axis labels are stripped of their default domain and tick lines, while the x-axis converts tick labels to localized German abbreviations like "Mio" and "Mrd." The code uses `d3.csv` to load data, `scaleLinear` and `scaleBand` to map values, and `axisBottom` and `axisLeft` to generate axes. Bar rectangles are appended to an SVG element, and styles are applied via an external stylesheet.

Nov 27, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2019, based on United Nations estimates. The horizontal bars are colored purple, with country names on the y-axis and population values scaled linearly on the x-axis. The example uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for customizing the chart’s axes. All elements are rendered as SVG within a single page.

Nov 25, 2019

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced below $2,800, listing each vehicle’s year, make, model, and price on a large, styled webpage. It uses JavaScript array methods like `filter`, `map`, and `join` to process a static JSON dataset of five cars, while the `formatCar` function formats each entry. The output is rendered into a `<pre>` element via `document.getElementById` and `textContent`.

Nov 21, 2019

Loading thumbnail…

Cars report

This example shows a simple data report of five used cars, displaying their make, model, year, and price in a static JSON dataset. The page renders a large red greeting message and a heading, while the JavaScript sets the message element’s text content to the second car’s make, “Nissan,” using the DOM API `document.getElementByID` and `textcontent`. The data is parsed with `JSON.parse` and imported from a separate module, but no charting or visualization library is used.

Nov 21, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based report that filters a hardcoded dataset of five cars by price and displays a formatted list of matching vehicles. The code defines reusable JavaScript modules—`formatCar.js` for formatting car details, `generateReport.js` for filtering and mapping, and `getCars.js` for parsing embedded JSON data—then combines them in `index.js` to update the page’s `<pre>` element. It shows how to structure data manipulation with ES modules and asynchronous promises in a browser context.

Nov 21, 2019