dmb4ur

@dmb4ur·3 public vizzes

Scatterplot.js

This scatterplot visualizes the relationship between engine cylinders and horsepower for cars, using data from the auto-mpg dataset. The SVG rendering uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft with tick lines creating a grid. Circle elements represent data points, with a title noting the top 10 most populous countries despite the automotive data. The code loads CSV data via d3.csv, converts numeric fields, and includes axis labels and formatting with d3.format.

Jan 14, 2022

Loading thumbnail…

Let's make a face with D3.js

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3.js v5 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the visualization. The chart includes custom tick formatting that converts large numbers to abbreviated units like "B" for billions, and features a horizontal grid through `tickSize`. Data is loaded asynchronously via `d3.csv`.

Jan 13, 2022

Loading thumbnail…

Cars Report

This example shows a text-based report of cars filtered by price. It displays a loading message while fetching car data asynchronously, then renders each car’s year, make, model, and price on separate lines. The code uses a Promise-based `getCars` function with `setTimeout` to simulate a two-second delay, then filters the parsed JSON array with `filter` and formats entries via `map` and `join`. The report appears in a `<pre>` element, styled at a large font size.

Jan 13, 2022