Skip to main content
Log in
C

christoshanes

@christoshanes·8 public vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, based on 2018 United Nations estimates from the World Population Prospects. The data, loaded from a CSV file, is scaled using d3.scaleLinear for the horizontal axis and d3.scaleBand for the categorical vertical axis. The chart renders as SVG rectangles, with population values parsed from strings to numbers and multiplied by 1,000 before being mapped to bar widths. The visualization uses D3 v5, focusing on a clean, margin-less layout within a 960×500 SVG canvas.

Mar 31, 2019
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, based on 2018 United Nations estimates from the World Population Prospects. The data, loaded from a CSV file, is scaled using d3.scaleLinear for the horizontal axis and d3.scaleBand for the categorical vertical axis. The chart renders as SVG rectangles, with population values parsed from strings to numbers and multiplied by 1,000 before being mapped to bar widths. The visualization uses D3 v5, focusing on a clean, margin-less layout within a 960×500 SVG canvas.

Mar 31, 2019
Loading thumbnail…

Making a Bar Chart

This example demonstrates a basic bar chart that visualizes the populations of ten countries, from China to Mexico, using horizontal bars sorted by descending population size. The chart encodes population values as bar lengths along the x-axis, with country names positioned along the y-axis. Built with D3 v5, the code relies on `scaleLinear` for the numeric x-axis, `scaleBand` for the categorical y-axis, and the `csv` parser to load data from a local CSV file. The bars are rendered as SVG rectangles, with each rectangle’s width and height mapped from the parsed population data.

Mar 31, 2019
Loading thumbnail…

Making a Bar Chart

This visualization displays a horizontal bar chart ranking the populations of ten countries using data from a CSV file. The chart encodes population values on the x-axis and country names on the y-axis, with bars rendered as SVG rectangles. The code uses d3.csv for data loading, d3.scaleLinear for the population scale, and d3.scaleBand for the categorical country scale. The example demonstrates a step-by-step bar chart creation process, with margins and an SVG container sized at 960 by 500 pixels.

Mar 31, 2019
Loading thumbnail…

CBH

A smiley face drawn with SVG elements animates its eyebrows up and down in a looping transition. The yellow circle face, eyes, rectangular eyebrows, and arc-based mouth are all appended to a central group via D3's selection API. The example uses d3.v5 to demonstrate fundamental DOM manipulation, with `transition().duration(2000)` chaining to move the eyebrow group between two vertical positions. All rendering is performed in SVG with a 960 by 500 viewport, and the animation runs indefinitely without user interaction.

Mar 30, 2019
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a basic bar chart using D3.js, rendering bars as SVG rectangles filled with steelblue. The visualization starts with an empty SVG canvas and establishes its dimensions by reading the width and height attributes directly from the SVG element. It uses D3 v5's `select` function to access the SVG container, with the data and bar positions left unwritten in the visible code. The styling applies a font size to text elements and removes page margins for a clean, full-window display.

Mar 30, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Mar 30, 2019
Loading thumbnail…

Shapes with SVG and CSS

An empty SVG canvas with a 960-by-500 viewport is rendered, styled by a minimal CSS reset that removes body margins and hides overflow. The example demonstrates how an SVG container can be prepared for shape drawing, using the `svg` element and linked `styles.css` file. No shapes are defined in the markup, leaving the graphic blank and serving as a scaffold for subsequent SVG or CSS-generated visuals.

Mar 29, 2019