Austin Krauss

@Beige-Coffee·5 public vizzes

Fork of Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. The code loads data from a CSV file with `d3.csv`, then renders horizontal bars using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. The y-axis lists country names, while the x-axis applies a custom tick formatter via `format(".3s")` to abbreviate large numbers in billions. The chart is drawn as SVG, with bars styled in steelblue.

Feb 8, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This fork of a D3 bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations’ World Population Prospects 2017. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, with axes generated by `axisLeft` and `axisBottom`. Data is loaded from a CSV file via `d3.csv`, and each population value is multiplied by 1000 to reflect actual figures. The chart renders purely as SVG, with steelblue bars.

Jan 31, 2021

Loading thumbnail…

Let's Make a Face with D3.js

This example uses D3.js to draw a smiling face with SVG shapes and animate a unibrow. It constructs a yellow circle for the head, black circles for eyes, and a nose and mouth using the `d3.arc` path generator. A rectangular unibrow transitions vertically over four seconds, alternating between a thick and thin state. The code relies on D3 v6 selections, `transition` for animation, and SVG attributes within an HTML page.

Jan 23, 2021

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report generator. It filters a static JSON array of five used cars by price and formats matching entries as a readable list. The code uses native JavaScript array methods—`filter` and `map`—combined with a `formatCar` helper that leverages object destructuring and template literals. The final output is displayed in a `<pre>` element on the page, though the current script only assigns a "Hello World" message, leaving the report logic as a modular tutorial for data processing.

Jan 23, 2021

Loading thumbnail…

Fork of Cars Report

This fork of the Cars Report tutorial demonstrates a JavaScript data-processing pipeline that filters and formats car listings. It shows how to define reusable modules with `formatCar.js` and `generateReport.js`, which filter an in-memory JSON array of five cars by price and render each as formatted text. The `getCars.js` module parses a static JSON string and returns the data asynchronously via a Promise with a simulated 2-second delay. The `index.js` script initiates the report by setting a loading message and then updates the page’s `<pre>` element once the data resolves, using only core JavaScript without external charting libraries.

Jan 23, 2021