ratschke

Scatter Plot

This scatter plot shows the top 10 most populous countries, with each country positioned along the y-axis and its population along the x-axis using D3 v5’s `scalePoint` and `scaleLinear`. The code loads population data from a CSV file, converts values to absolute numbers, and renders circles with `d3.select` and SVG. It builds axes using `d3.axisLeft` and `d3.axisBottom`, formatting tick labels with `d3.format`. The chart includes labeled axes, a title, and steel-blue circles, with margins defined to accommodate the long country names.

Feb 10, 2020

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using D3.js v5 to render SVG. The chart customizes the x-axis to show abbreviated population values in billions by using D3's `scaleLinear`, `scaleBand`, and `axisBottom` with a tick format that replaces "G" with "B". It also removes default axis lines and tick marks on the y-axis, adds a custom axis label, and applies a title. Population data is loaded from a CSV file.

Feb 6, 2020

Rebrickable Lego Sets by Year

This chart shows the cumulative running total of Lego sets released each year from 1949 to 2019, based on Rebrickable data. The visualization uses vertical violet bars to represent the growing count over time, with a time-scaled x-axis and a linear y-axis. The code employs d3.dsv to load the CSV, d3.scaleTime and d3.scaleLinear for the axes, and SVG rectangles for the bars, which are flipped vertically using a scale transform. Axis labels and a title are added via d3 selections.

Rebrickable Lego Sets by Year

This bar chart shows the cumulative number of Lego sets released by Rebrickable from 1949 to 2019, with a steadily increasing running total over time. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the y-axis and `scaleTime` with `scaleBand` for the x-axis. Data is loaded from a CSV file via `dsv`, and axes are generated with `axisLeft` and `axisBottom`. The rectangular bars are appended and positioned using the scales, with the data sourced from Rebrickable.

Rebrickable Lego Sets by Year

This bar chart displays the cumulative number of Lego sets released each year from 1949 to 2019, sourced from Rebrickable data. Each bar’s height represents the running total, with the y-axis scaled linearly and the x-axis using a band scale for years. The visualization uses D3.js v5, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the plot as SVG. Bars are drawn as rectangles with a fill style, using a translation and vertical scale inversion to position them correctly.

Making a bar chart

This bar chart displays population counts for ten countries, using horizontal bars ordered by country name. The visualization is built with D3 v5, loading data from a CSV file and rendering to SVG. It employs `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, with `axisLeft` and `axisBottom` generating the ticks. Bars are drawn as SVG rectangles with a fixed steelblue fill, and the chart is positioned using explicit margins.

Let's make a face!

This example creates a simple, animated face out of basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a donut-shaped mouth made from an arc. The eyebrows animate, moving up and down via D3 transitions, while the rest of the face remains static. Built with D3 v5 and React, the code uses D3’s `select` and `arc` APIs to construct and manipulate the scene.

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled using CSS. It shows how SVG elements can inherit styling from parent `<g>` groups and how CSS classes like `.lines` apply stroke properties. The code uses raw SVG markup with React as the rendering framework, featuring inline `fill` and `stroke` attributes alongside CSS rules. A transform group scales and translates the shapes, while a path with `stroke-linejoin: round` illustrates geometric line styling. The visualization highlights the interplay between SVG presentation attributes and external stylesheet rules.

HTML Cars Report

This example presents a simple cars report as an HTML page, listing three used vehicles with their model years and prices. It demonstrates basic React integration with a static data source, rendering the list through the document body. The page uses standard HTML elements like `<h1>` and `<ul>`, with CSS styling from `styles.css` that sets a large monospace font and highlights the first car in red via the `.highlighted` class. The code relies on plain HTML/CSS rather than JavaScript libraries, showing a bare-bones approach to structuring textual data in a browser.

HTML Cars Report

This example displays a basic HTML and CSS report listing three used cars with their model years and prices. The page uses an unordered list to present the vehicles, with the first item—a 2012 Nissan Leaf—highlighted in red through the `.highlighted` class. Styling is applied via an external stylesheet that sets a large monospace font for the entire body, demonstrating simple CSS selectors and class-based styling without any JavaScript libraries. The embedded YouTube video provides additional context about the demonstration.

HTML Cars Report

This example demonstrates a simple HTML and CSS report that displays a list of cars filtered by price. It uses a JavaScript promise to simulate fetching car data from a static JSON source, then formats and displays the results. The report filters cars under $2000 and presents them as plain text in the browser. The code relies on core JavaScript features like `Promise`, `JSON.parse`, and string manipulation, along with basic HTML `pre` elements and inline styles.