chrisvaillancourt

@chrisvaillancourt·10 public vizzes

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses an SVG rendering approach with D3 v5, loading data from a CSV file via `d3.csv`. Each rectangle’s height is mapped to the population value, which is multiplied by 1000 to reflect the actual population count in thousands. The code demonstrates a basic bar chart construction using D3 selections and data binding, though the visual encoding is not fully implemented in the provided snippet.

Jun 21, 2019

Loading thumbnail…

Formatting axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` to render axes. The x-axis tick labels are formatted with `d3.format` to abbreviate numbers like “1.42B,” and gridlines extend across the plot area. The chart is rendered as SVG, with countries labeled on the y-axis and population values shown as horizontal bars.

Oct 21, 2018

Loading thumbnail…

Formatting axes

Oct 21, 2018

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository's Auto MPG Data Set. The visualization uses D3 v5 to render SVG circles, with each point representing a single car. The code employs D3's `scaleLinear` for both axes, `axisLeft` and `axisBottom` for the coordinate system, and `extent` to compute the data domain. The raw CSV data is loaded and parsed via D3's `csv` method.

Oct 21, 2018

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries in 2018 according to United Nations estimates. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the horizontal population axis and `d3.scaleBand` for the categorical country axis. The code loads data from a CSV file and converts population values from strings to numbers, appending rectangles and axes via `axisLeft` and `axisBottom`.

Oct 21, 2018

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017. The visualization customizes both axes, removing default domain lines and using a custom tick format that abbreviates large numbers with ‘B’ for billions on the x-axis. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render an SVG, with horizontal gridlines and a steelblue bar fill.

Oct 21, 2018

Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset, listing the row count, column count, and file size in kilobytes, followed by the first ten rows formatted as JSON. It uses d3.csv to load the data and d3.csvFormat to compute its size, then appends pre elements to the body. The styling applies a black background with green monospace text, echoing a terminal aesthetic. Data originates from the UCI Machine Learning Repository.

Oct 21, 2018

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, and its eyebrows animate up and down in a looping motion. The example demonstrates fundamental D3.js DOM manipulation by appending circles, rectangles, and an arc-generated mouth to an SVG canvas. It uses the `d3.select` and `d3.arc` APIs, along with chained `transition().duration()` calls to animate the eyebrow group's transform. The code imports from D3 v5 and renders entirely with SVG elements on a 960 by 500 canvas.

Oct 20, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and apply styling directly through attributes and CSS classes. The SVG is scaled with a transform, while a nested group uses inline styles for fills and strokes. CSS rules in `styles.css` define black strokes for the `.lines` group and an orange stroke for its path element. The visualization relies solely on raw SVG markup and CSS, with no JavaScript-based data logic or D3 imports involved in the rendering.

Oct 20, 2018

Loading thumbnail…

HTML Cars Report

This example displays a static HTML report listing three used cars with their model years, names, and prices. The first item, a 2012 Nissan Leaf, is visually emphasized in red via the `.highlighted` CSS class. The page structure uses plain HTML elements, while D3.js’s `select` function is imported but not actively applied to the list, and a separate ES6 module exports a message that would be set into a div. The data source is hardcoded directly in the markup.

Oct 20, 2018