R

Rod Potter

@RoddiPotter·16 public vizzes

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This example shows a scatter plot of car data, plotting miles per gallon against acceleration, with each vehicle represented as a semi-transparent green circle. The visualization is built with D3 v5 and rendered as SVG, using `scaleLinear` for both axes, `extent` to compute the domains, and `axisLeft`/`axisBottom` for the labeled axes. Data is loaded from a CSV file via `csv`, and gridlines are drawn using negative tick sizes on the axes. The plot includes custom margin-based layout and styled text for axis labels and the title.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between a car’s MPG and its acceleration using the auto-mpg dataset. Green, semi-transparent circles mark each car, with axis labels and tick marks revealing the distribution. The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for scaling, and d3.axisLeft/axisBottom to render axes. SVG circles are appended via data joins, with axis lines removed and styled using CSS for a clean, readable layout.

Loading thumbnail…

Inspecting some data

This example loads a CSV dataset of automobile fuel consumption from a remote URL and displays a plain-text summary of its basic structure: row count, column count, and file size in kilobytes. It then prints the first ten rows of the data as formatted JSON. The implementation uses d3.csv to fetch and parse the data, d3.csvFormat to calculate the raw size, and d3.select to append multiple <pre> elements to the body, with JSON.stringify providing readable output.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, plotting population on the x-axis against country names on the y-axis. It uses d3.scaleLinear for the population scale and d3.scalePoint for the categorical country axis, with circular markers sized at 15 pixels. The code imports specific D3 v5 modules including csv, select, axisLeft, axisBottom, and format, and customizes both axes with tick formatting that converts values to abbreviated units like 'B' for billions. SVG rendering is used, with data loaded from a local CSV file.

Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values read from a CSV file. The chart customizes both axes: the y-axis removes domain lines and ticks, while the x-axis uses `d3.axisBottom` with a custom formatting function that converts millions to abbreviations like “B” for billion. The SVG rendering uses `d3.scaleLinear` and `d3.scaleBand` to map data, with grid lines created via the x-axis tick size.

Loading thumbnail…

Making a bar chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars ordered by country name. The visualization loads data from a CSV file and renders SVG rectangles scaled with d3.scaleLinear and d3.scaleBand, with axes generated via d3.axisLeft and d3.axisBottom. Population values are multiplied by 1000 during data preparation, and the chart applies a fixed margin layout within an SVG container.

Loading thumbnail…

Making a bar chart

This horizontal bar chart ranks the ten most populous countries using population data from a CSV file, with bars scaled linearly by population size and country names on the categorical y-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes and bars as SVG rectangles, while `csv` loads the data and `max` computes the domain. Population values are multiplied by 1,000 to reflect actual figures, and the chart is styled via CSS with steel-blue bars and large text.

Loading thumbnail…

Let's make a face with D3.js

A yellow circular face with eyes, eyebrows, and a mouth is drawn using D3.js v5. The eyebrows animate upward and back down with chained `transition().duration()` calls. The visualization demonstrates basic SVG shape creation and transformation, using D3 selections, `arc()` for the mouth, and `attr()` to position elements. The face is centered by translating a group element based on the SVG’s width and height, with all shapes rendered in SVG.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through simple circle, rectangle, line, and path elements. It shows how inline attributes like `fill` and `stroke` work alongside external stylesheet rules defined in `styles.css`. The SVG markup includes grouping with `<g>` and transforms such as `scale` and `translate`, while CSS classes like `.lines` control stroke properties. The visualization uses raw SVG elements without any JavaScript libraries, relying entirely on the browser’s native rendering of the SVG specification.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline SVG attributes and external CSS rules. The gallery features a static, premade SVG render and also includes a JavaScript-driven report that filters and formats used-car data from a hardcoded JSON array, displaying the results in the page via DOM text manipulation. Rendering uses the SVG API, while CSS handles stroke, fill, and color styling through class selectors. No external visualization libraries are used.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates SVG shapes—circles, rectangles, lines, and paths—styled with CSS, including grouped shapes with customized fill, stroke, and translation transforms. It renders static geometric forms without interaction or data binding. The page also includes a separate JavaScript module that asynchronously fetches car data via a Promise and generates a filtered price report, though this logic is not visually connected to the SVG. The SVG uses plain DOM elements with attributes like `cx`, `r`, and `transform`, while styling comes from imported Google Fonts and CSS rules targeting classes like `.lines`.

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML report of used cars priced under $2000, displaying three vehicles as a list with years, makes, models, and prices. The page initially shows a loading message, then fetches car data asynchronously via a Promise in `getCars` after a 2-second delay. The `generateReport` function filters and formats the data using `formatCar`, and the result is inserted into the DOM via `textContent`. Styling uses a monospace font and a red class highlight.

Loading thumbnail…

Cars Report

This example generates a text report of used cars priced under $2,000. It filters a static JSON array of five car objects, formats each entry with its year, make, model, and price, and displays the resulting lines in a styled `<pre>` element. The code uses native JavaScript array methods, including `filter` and `map`, along with the `JSON.parse` API to load data and a template literal for string formatting.

Loading thumbnail…

Cars Report

This example generates a text report of used cars priced under $2,000. It filters a static JSON array of five car objects, formats each entry with its year, make, model, and price, and displays the resulting lines in a styled `<pre>` element. The code uses native JavaScript array methods, including `filter` and `map`, along with the `JSON.parse` API to load data and a template literal for string formatting.

Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” from a small JSON dataset of five used cars, rendered as oversized text on a dark, centered page. The visualization uses a plain HTML `<pre>` element and JavaScript to parse the embedded `carsJSON` string, then writes the first record’s `make` property into the page via `document.getElementById`. Styling relies on CSS with the Ubuntu font, while data imports come from the `cars` module and rendering is handled by the browser’s DOM API, with no external visualization libraries.

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded dataset, rendering the word "Honda" prominently on a dark, styled page. It loads a JSON array of car records via JavaScript’s `JSON.parse` and uses a simple DOM `textContent` assignment to update a `<pre>` element. The page’s visual design relies on an imported Google font (Ubuntu) and CSS for large, centered text. No interactive or charting library is used, focusing instead on minimal data extraction and static presentation.