johncoder21

@johncoder21·8 public vizzes

Bar Chart 8/1

A horizontal bar chart displays the population of the ten most populous countries from 2018 United Nations estimates, ordered by country name. The chart uses d3.scaleBand for the y-axis categories, d3.scaleLinear for the x-axis population values, and d3.axisLeft for ticks. Population values are loaded from a CSV file and multiplied by 1,000. The SVG rendering includes steelblue rectangles with heights set by the bandwidth, demonstrating customized D3 axes.

Aug 1, 2021

Loading thumbnail…

Fork of Cars Scatter Plot

This fork of a cars scatter plot displays population data for countries as a horizontal bar chart, with bar length proportional to each country’s population and bars aligned along a categorical y-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` for tick labels. All marks are appended as SVG `<rect>` elements within a `<g>` group, with data parsed from a CSV file where population values are multiplied by 1,000. The chart’s margin-based layout and width/height attributes are read directly from the `<svg>` element.

Aug 1, 2021

Loading thumbnail…

Gonna make a Scatter Plot

This example shows a horizontal bar chart of country populations, with each bar’s length scaled to the population value and its vertical position set by a categorical scale for country names. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleBand`, and `csv` to load and parse the data, then appends SVG `<rect>` elements. The population values are multiplied by 1,000 after loading, and bars are rendered in black against a full-viewport SVG canvas.

Aug 1, 2021

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It shows how D3 v5 axes can be customized to improve readability of the value labels. The SVG rendering uses d3.csv to load data and d3.scaleBand with d3.scaleLinear for positioning, while d3.axisBottom creates the x-axis. The page also includes a separate SVG element demonstrating a circle update pattern with d3.select and .join.

Jul 31, 2021

Loading thumbnail…

Fork of Fork of Fork of Making a Bar Chart

This bar chart displays the 2018 population estimates for the ten most populous countries, drawn from United Nations data. It uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG graphic. The chart customizes axes by removing gridlines and domains, and formats population values using `format('.3s')` to abbreviate numbers with a 'B' suffix, while the x-axis label is annotated as "Population". Bars are filled with a steelblue color via CSS.

Jul 29, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js v5 to animate its eyebrows in a repeating up-and-down motion. The face is built by appending SVG circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. D3 transitions move the entire eyebrow group by changing its `transform` attribute over two-second intervals. The code imports `select` and `arc` from D3, and the animation runs automatically on page load.

Jul 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered at the center of the browser window, with its size adapting to the viewport dimensions. The face consists of a yellow circle with a black stroke, two solid black eyes, and uses React and ReactDOM to create SVG elements dynamically. Positions and radii are computed from `window.innerWidth` and `window.innerHeight`, and the entire drawing is grouped inside an SVG `<g>` element with a `translate` transform. The code relies on React 16.9 and renders via `ReactDOM.render`.

Jul 20, 2021

Loading thumbnail…

SmileyFacePartI

This example shows a yellow smiley face rendered as an SVG, with two black eyes and a curved mouth arc, though it omits the mouth’s stroke width for a partially completed look. The visualization uses React to construct the SVG elements, while D3’s `arc` generator creates the mouth path based on inner and outer radii and angular start and end points. The face is centered using fixed coordinates, with eye positions offset from the center and a black stroke outlining the head.

Jul 20, 2021