Daniel Piqué

Hello world

This example demonstrates a simple data-processing pipeline that loads a hardcoded set of car records, filters them by price, and renders the formatted results as plain text on a webpage. The visualization uses JavaScript ES6 modules and asynchronous fetching via a custom `getCars` function that returns a Promise, simulating a delayed data source. The code relies on `JSON.parse` to handle the inline JSON data and `document.getElementById` to update the display element, with styling applied through an external CSS file. The output is a list of cars under a specified price threshold, shown without any graphical charting library.

Nov 29, 2018

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic DOM manipulation. The SVG face has blue circular head, green eyes, and an arc-based mouth, with rectangular eyebrows that animate up and down using chained `transition` calls. The code uses d3.select to target the SVG, d3.arc to generate the mouth path, and attribute methods like `.attr` to position elements. Eyebrow movement is achieved through sequential `.transition().duration()` operations that translate the eyebrow group vertically.

Nov 26, 2018

World population area chart

This area chart shows world population growth over time, with the area under the line filled in maroon. The chart uses a time-scaled x-axis and a linear y-axis that formats population values in billions. Data is loaded from a CSV file using d3.csv, and the chart is rendered with SVG. The visualization uses d3.scaleTime, d3.scaleLinear, d3.area, d3.axisBottom, and d3.axisLeft to construct the plot.

Cars Scatter Plot 2

This scatter plot displays population estimates for the ten most populous countries, using circles positioned along a categorical y-axis and a quantitative x-axis. The D3 v5 code loads data from a CSV file, applies a linear scale to the population values, and uses a point scale for country names. The visualization includes grid lines, axis labels, and a title, with all graphics rendered as SVG elements.

Line plot - weather

This line plot visualizes temperature readings from a week in San Francisco, using a filled area chart to show the range of temperature over time. The data, loaded from a CSV file via `d3.csv`, is mapped to time and linear scales (`d3.scaleTime`, `d3.scaleLinear`), with axes generated by `d3.axisBottom` and `d3.axisLeft`. The area is rendered as an SVG path using `d3.area`, styled with a maroon fill, and includes labeled axes and a title.

Line plot - weather

A line plot visualizes temperature changes throughout a week in San Francisco. The visualization renders an SVG line path and circles for each data point, using a red, semi-transparent overlay. The chart includes labeled axes for time and temperature, along with a title. The code relies on D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBundle`, and loads its data from a CSV file via `csv()`.

Cars Scatter Plot 3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository. Each red circle represents a vehicle, with axes labeled and a title indicating the comparison. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG circles for data points. The data loads from an external CSV via `d3.csv`, with numeric parsing applied before rendering.

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart highlights custom axis formatting and styling, including a tick format that converts large numbers (e.g., G to B) and the removal of default axis lines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes within an SVG canvas. A CSV file supplies the data, and CSS styles the text and tick marks.

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization maps population values to horizontal bar widths using `d3.scaleLinear`, while country names are positioned on a categorical `d3.scaleBand` axis. The chart renders as SVG, with axes created via `d3.axisLeft` and `d3.axisBottom`, and data loaded from a CSV file using `d3.csv`.

Auto MPG Summary

This example displays a plain-text summary of the Auto MPG dataset, showing the total row and column counts, file size in kilobytes, and the first ten rows as formatted JSON. The page renders black text on a white background in a terminal style. The code uses `d3.csv` to load the data from a remote GitHub repository, `csvFormat` to calculate its byte size, and D3 selections to append the result.

Making a Bar Chart

A horizontal bar chart displays the 2018 population estimates for the ten most populous countries from the United Nations World Population Prospects. The visualization uses d3.csv to load the data, then constructs the chart from an SVG with d3.scaleLinear for the population axis and d3.scaleBand for country categories. Axes are rendered via d3.axisLeft and d3.axisBottom, while rectangular bars are appended through a data join with fill styling from the stylesheet.