Skip to main content
Log in
C

cguibourg

@cguibourg·14 public vizzes

Loading thumbnail…

World Population Area Chart

A filled area chart shows global population growth over time, using a smooth curve to trace the rise from the early 1900s to 2015. The visualization loads CSV data from a VizHub dataset and renders it as an SVG path generated with the D3 `area` generator and `curveBasis` smoothing. Time and linear scales position the axes, which include gridlines and custom tick formatting that abbreviates billions as “B.”

Jan 6, 2020
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, with temperature on the y-axis and time on the x-axis. The chart uses a smooth curve to fill the area beneath the temperature line, colored maroon, against a clean background with labeled axes and a prominent title. The code loads CSV data via `d3.csv`, scales time and linear values with `d3.scaleTime` and `d3.scaleLinear`, and renders the area using `d3.area` with `d3.curveBasis`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft` in SVG.

Jan 6, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to load a CSV from VizHub, scale the data with `scaleTime` and `scaleLinear`, and render smooth curves via `line` with `curveBasis`. Axes are drawn using `axisBottom` and `axisLeft`, with custom tick styling, and the chart includes labeled axes and a title, all output as SVG.

Jan 6, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This interactive scatter plot visualizes one week of temperature data in San Francisco, with time plotted on the x-axis and temperature on the y-axis using circular markers. The visualization loads data from a CSV file via d3.csv, then uses d3.scaleTime and d3.scaleLinear to map the data points to SVG coordinates. Axis labels and a title are added using d3.axisLeft, d3.axisBottom, and manually positioned text elements. The chart includes grid lines and colored tick marks to enhance readability, with the rendering entirely in SVG.

Jan 6, 2020
Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each point representing a car model. The plot uses D3.js version 5 with a linear scale for both axes, goldenrod semi-transparent circles, and labeled axes for horsepower and weight. The code leverages D3’s `scaleLinear` for scaling, `axisLeft` and `axisBottom` for coordinate axes, and `csv` to load data from the remote dataset, then converts numeric fields to numbers before rendering.

Oct 25, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adding grid lines via tick sizes, and formatting tick labels with `d3.format`. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with circles as marks. Data is loaded from a CSV file using `d3.csv`, and the chart is rendered as SVG.

Oct 25, 2019
Loading thumbnail…

Making a bar chart

This example visualizes the population of the ten most populous countries in 2018, using a horizontal bar chart drawn with SVG. The data, sourced from the United Nations, is loaded from a CSV file and parsed with D3’s `csv` method, then mapped to pixel positions using `scaleLinear` and `scaleBand`. The chart displays axes generated via `axisLeft` and `axisBottom`, with bars rendered as `rect` elements. D3 v5’s selection and data-join methods are used to bind and draw each bar.

Oct 25, 2019
Loading thumbnail…

Making a bar chart

This example visualizes the population of the ten most populous countries in 2018, using a horizontal bar chart drawn with SVG. The data, sourced from the United Nations, is loaded from a CSV file and parsed with D3’s `csv` method, then mapped to pixel positions using `scaleLinear` and `scaleBand`. The chart displays axes generated via `axisLeft` and `axisBottom`, with bars rendered as `rect` elements. D3 v5’s selection and data-join methods are used to bind and draw each bar.

Oct 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Oct 24, 2019
Loading thumbnail…

let's make a face with d3

A smiling face is drawn entirely with SVG shapes: a gold circular head, two black eyes, and a mouth created as an arc path. The code uses D3 v7’s `select` to append elements to an SVG canvas, and the `arc` generator to compute the mouth’s path with specified inner and outer radii and start/end angles. All shapes are centered via a translated group, with fixed pixel dimensions for the 960 by 500 canvas.

Oct 23, 2019
Loading thumbnail…

HTML cars report

This example creates a small, schematic car made of SVG shapes: two stacked circles serve as wheels, a rectangle forms the chassis, and lines and a path outline the body. The visualization is static and does not include interactive or animated behavior despite its title. The rendering uses SVG within HTML, with styling defined in a separate stylesheet. The code imports `select` from D3.js only to set a text message in a separate div, which is unrelated to the car graphic. The drawing relies on basic SVG elements and CSS classes without any data binding or computational layout.

Oct 23, 2019
Loading thumbnail…

HTML cars report

This example presents a static, stylized HTML page titled “CARS” with a simple list of text items. It uses D3.js’s `select` function to update the content of a message div with a greeting from a local ES6 module. The page imports a custom stylesheet that applies a dark blue background, light text, and a large monospace font via Google Fonts, demonstrating a minimal setup for combining D3 with modular JavaScript and CSS.

Oct 23, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup of a VizHub project, rendering a simple text message to the page. It imports the `select` function from D3 v5 to access the DOM and set the content of a `#message` div. The text itself comes from a local ES6 module, `myMessage.js`, which exports a constant string. A separate stylesheet applies the Ubuntu font, and the HTML loads both the D3 library and the compiled bundle script.

Oct 23, 2019
Loading thumbnail…

Cars Report

This example demonstrates a minimal D3.js setup within the VizHub framework, displaying a static text message. The page renders the phrase "Hello VizHub!" centered on a dark blue background with a custom Google font. The code uses the D3 selection API via `import { select } from 'd3'` and an ES6 module (`myMessage.js`) to update the DOM, replacing the initial "Hello" text with the imported message. The styling is handled entirely through an external CSS file.

Oct 22, 2019