Daniel García

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of temperature data in San Francisco, with each circle representing a temperature reading plotted against time. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the timestamp and temperature values, with axes rendered via `axisBottom` and `axisLeft`. Data is loaded as CSV from a VizHub dataset, parsed for numeric temperature and date objects, and drawn as SVG circles. Grid lines are created through tick sizes, and the visualization includes a title and axis labels.

Mar 24, 2020

World Countries Tree

This visualization presents the hierarchical structure of world countries as a tree diagram. Using a JSON dataset, it organizes countries by continent and subregion, such as Asia and Southern Asia. The code builds the layout with D3's `tree` and `hierarchy` functions, then renders the connections as horizontal links using `linkHorizontal` and `select` from D3. The result is an SVG graphic, with black paths representing the parent-child relationships between geographic entities.

Art Tree

This visualization renders a hierarchical dataset of world regions and countries as a horizontal tree diagram, showing the geographic structure from the root node "World" down through continents and subregions to individual nations. Using D3 v5, the code applies the `tree` layout and `hierarchy` functions to position nodes, while `linkHorizontal` generates curved SVG paths that connect parent and child entries based on the data from data.json. The tree fills the entire browser viewport, with node labels omitted, emphasizing the branching relationships across the geographic taxonomy.

Blank canvas

An empty, rounded-rectangle SVG canvas fills the entire browser viewport. The example demonstrates a minimal D3 v5 setup where the `select` and `arc` functions are imported but unused, leaving the visualization intentionally blank. The code sets the SVG’s width and height attributes based on `document.body.clientWidth` and `clientHeight`, then appends a single `rect` with a 40-pixel corner radius. No data or interaction is present, showing the starting point for a blank visualization project.

Cheap Tricks for interaction

This visualization displays a world map using a natural Earth projection, with countries rendered as light green SVG paths that turn red on hover, accompanied by tooltips showing country names. The map is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and TopoJSON for converting geographic data into features. It loads country boundaries and names from the world-atlas package (50m TSV and JSON files), and the rendering is done entirely in SVG. The zoom interaction is handled by `d3.zoom`, which applies a transform to the map group when the user presses and drags.

Lets make a map with D3.js!

A world map rendered as an SVG using D3.js v5 and TopoJSON, displaying countries in light green against a steel-blue sphere. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and draws geographic paths with `d3.geoPath`. Country boundaries come from the world-atlas dataset at 110m resolution, loaded as JSON and converted with TopoJSON’s `feature` method. The code appends path elements for each country and the sphere, styled with CSS classes for fill and stroke.

Bowl of fruit - Hover to select

Five fruit circles initially render as apples via an ordinal color scale and size scale, then update through d3 transitions when the data changes—removing a fruit, converting one to a lemon, and filtering another. Hovering a circle triggers `mouseover` and `mouseout` events that call `setSelectedFruit`, toggling a black stroke on the selected fruit. The visualization uses D3 v5's data joins, `selection.enter`, `merge`, `exit`, and `transition` APIs to animate the SVG elements.

Bowl of fruit - Click to select

Five circles representing fruit appear in a row and animate to their full size. Clicking a circle selects it, drawing a black outline around that fruit. The example uses D3 v5 with data joins and transitions to update the visualization, while `scaleOrdinal` maps fruit types to colors and sizes. Over time, the data changes to remove fruit or change one apple to a lemon.

Bowl of fruit General Nested Elements

A bowl of five apples renders as circles inside a rounded rectangle, with each fruit labeled by type. Over time, the animation removes apples, changes one apple into a lemon, and filters out another, demonstrating how nested SVG elements (groups, circles, text) update through D3's selection and merge APIs. The visualization uses D3 v5’s `scaleOrdinal` for color and size scales, and animates radius transitions with `.transition().duration(1000)`. The code relies on general element nesting with `selectAll` and enter/exit patterns, driven by a timer that mutates the fruit data array.

Bowl of fruit General Update Pattern

This example demonstrates D3’s General Update Pattern by animating a bowl of fruit as apples are eaten and one transforms into a lemon. Circles enter, update, and exit with staggered transitions over one-second intervals, smoothly resizing and recoloring via `scaleOrdinal`. Using d3.v5, the code applies `data` joins with key functions, merges enter/update selections, and chains `transition().duration(1000)` for radius and position changes, while exit transitions shrink circles to zero before removal, all rendered in SVG.

World population Area Chart

This area chart displays world population by year, with time on the x-axis and population magnitude on the y-axis, using a filled curve to emphasize growth. It renders as an SVG using D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and the `area` generator with `curveBasis` for smoothing. Data is loaded from a CSV file of world population figures, and the y-axis labels are formatted to abbreviate billions with `format('.1s')`.

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, showing how temperatures fluctuate over time using a smooth, filled curve. The x-axis represents time, while the y-axis displays temperature in degrees Celsius, with a title noting the location and duration. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smooth shading, and `axisBottom` and `axisLeft` for tick rendering. Data is loaded from a CSV file via `csv`, with timestamps parsed and temperatures converted to numbers for scaling and rendering as SVG.

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, using timestamps on the x-axis and temperature values on the y-axis. The chart renders an SVG with a smooth curved line, grid lines, axis labels, and a title, with all data drawn from a CSV sourced from Data Canvas. The code leverages D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis`, and parses the CSV asynchronously before generating the visualization.

Cars Scatter Plot

This scatter plot visualizes the relationship between acceleration and horsepower for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red semi-transparent circle represents a car, positioned using linear scales. The code employs D3 v5’s `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` functions to load data, map values, and render axes with grid lines. The SVG output includes labeled axes and a title, with styling controlled by external CSS.

Mar 21, 2020

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using data from the 2017 World Population Prospects, with circles positioned on a linear x-axis and a point scale on the y-axis. The visualization loads data via d3.csv, applies a population multiplier, and renders an SVG using d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom. Gridlines extend across the chart, while tick labels use custom formatting to abbreviate large numbers.

Mar 20, 2020

Customizing axis

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the World Population Prospects 2017. It demonstrates customizing chart axes by removing default domain lines and tick marks on the y-axis, and applying a custom tick format on the x-axis that converts labels to billions. The visualization is built with D3 v5, using `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes.

Mar 20, 2020

Making a bar chart

This example visualizes the population of the top 10 most populous countries in 2018, sourced from the World Population Prospects 2017. The bar chart encodes country on the y-axis using a band scale and population on the x-axis using a linear scale. Built with D3 v5, the visualization renders as an SVG, using `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for tick labels. Population values are read from a CSV file and multiplied by 1000 to reflect actual figures. Steelblue rectangles represent the data.

Mar 19, 2020

D3js Tutorial

This example renders an animated emoji face using D3 v5 within a minimal HTML page. A yellow circle forms the head, with two eyes and a mouth drawn using SVG shapes and D3’s `arc` generator. The eyebrows animate vertically through chained `transition` calls on a group element, moving up and then back down over four seconds. The code imports `select` and `arc` from D3, sets SVG dimensions from attributes, and applies styling via an external CSS file that removes page margins.

Mar 18, 2020