rjohnson5016

@rjohnson5016·5 public vizzes

Bar Chart with D3.js!

This example shows a blank SVG canvas awaiting data, with the code loading a CSV of country populations using `d3.csv` and logging the parsed data to the console. The bar chart visualization itself is not yet implemented, so the current behavior only demonstrates data loading and preparation. Rendered with D3 v5 in an SVG element sized 960 by 500 pixels, the example highlights the foundational step of fetching and inspecting dataset structure before creating visual marks.

Jan 8, 2021

Loading thumbnail…

Fork of Data Table Summary

This visualization presents a concise text-based summary of a CSV dataset containing population figures for the ten most populous countries in 2018, sourced from the United Nations World Population Prospects 2017. It displays the total row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. The code uses D3 v5's `csv` and `csvFormat` functions to load and measure the data, then appends the output to the page as styled `pre` elements with a green-on-black terminal aesthetic.

Dec 31, 2020

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows a yellow smiley face drawn with SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth—that animates through D3 transitions. The code uses d3 v5’s `select` and `append` methods to build the SVG hierarchy, with `transition()` and `attr` chaining to sequentially move the eyebrows and morph the mouth’s inner radius. The face is centered via a translation on a group element, and the mouth path relies on `d3.arc()` with changing `innerRadius` values. Styling is applied through CSS, while the animation logic is driven entirely by D3’s transition API.

Dec 31, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face out of SVG shapes, with animated eyebrows that move up and down. A yellow circle forms the head, two circles serve as eyes, rectangles become eyebrows, and a path generated with the `d3.arc` helper creates the mouth. Using a `transition().duration(2000)` chain, the eyebrow group toggles its vertical translation, shifting it downward then returning it to the original position. The code explicitly binds SVG elements via `select` and `append`, relying on D3 v5’s modular imports for `select` and `arc`.

Dec 31, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, a path, and a polygon—styled with inline CSS properties and grouped transforms. The SVG markup uses fill, stroke, and stroke-width attributes to apply color and outlines, while a scaling transform enlarges the first group of shapes and a translation move repositions the line and polygon group. No external libraries or data are used; the rendering relies purely on native SVG elements and a minimal external stylesheet that resets the body margin.

Dec 30, 2020