Skip to main content
Log in
D

damankwah

@damankwah·8 public vizzes

Loading thumbnail…

Scatterplot

This scatterplot displays the ten most populous countries with population on the x-axis and country names on the y-axis. Using D3’s `scaleLinear` and `scalePoint`, it maps the data from a CSV file into an SVG rendering. Axes are drawn with `axisBottom` and `axisLeft`, with formatted tick labels converting large numbers to billions. The chart is built within a React framework, using D3 v5’s selection and CSV parsing methods.

Apr 8, 2020
Loading thumbnail…

Scatterplot

This scatterplot displays the ten most populous countries with population on the x-axis and country names on the y-axis. Using D3’s `scaleLinear` and `scalePoint`, it maps the data from a CSV file into an SVG rendering. Axes are drawn with `axisBottom` and `axisLeft`, with formatted tick labels converting large numbers to billions. The chart is built within a React framework, using D3 v5’s selection and CSV parsing methods.

Apr 8, 2020
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars, while `d3.axisBottom` and `d3.axisLeft` render customized axes with removed domain lines and grid ticks. Population numbers are formatted using `d3.format` to abbreviate large values (e.g., "1.42B"), and the chart is rendered as SVG within a React-compatible setup using data loaded from a CSV file.

Apr 7, 2020
Loading thumbnail…

Making a bar Chart

This example displays a horizontal bar chart of country populations, with bars scaled proportionally to population values and country names on the vertical axis. It uses D3 v5 within a React-like structure, loading data from a local CSV file and rendering to SVG. The code employs D3’s `scaleLinear` for the numeric axis, `scaleBand` for categorical spacing, and `axisBottom` and `axisLeft` to generate tick marks and labels.

Apr 7, 2020
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face is drawn with D3.js, featuring circular eyes, rectangular eyebrows, and a curved mouth, all rendered as SVG elements. The eyebrows animate up and down over two seconds using D3 transitions. The code uses `d3.select`, `d3.arc`, and SVG shape methods like `append`, `attr`, and `transition` to build the face within a 960x500 viewport, centering the elements with a group transform.

Apr 7, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling rules. It shows circles, rectangles, lines, and a path, organized into groups that inherit fill and stroke properties. The code uses plain SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes like `.lines` to define stroke styles, and inline `transform` attributes for scaling and translation.

Apr 6, 2020
Loading thumbnail…

HTML Names Report

This example displays a simple static list of four names in large monospace text; the name "David" is highlighted in purple. The visualization is built with a plain React-free HTML page that loads a linked stylesheet called `styles.css`. The styling uses a CSS class selector (`.highlighted`) to apply the purple color and a body rule to set the font size and family. The page markup uses standard HTML elements `<h1>`, `<ul>`, and `<li>` to structure the content.

Apr 6, 2020
Loading thumbnail…

Cars Report

This example displays the make of the first car in a small, static dataset as large text on a web page. It loads car records—including year, make, model, and price—from a local JavaScript module using `JSON.parse`. The React-based code then accesses `cars[0].make` and writes that value into a `<pre>` element via `document.getElementById` and `textContent`. The visualization is minimal, showing only a single string rather than an interactive chart or table.

Mar 13, 2020