Tristan Schrader

@schradert·11 public vizzes

Barcharts

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. The chart uses a horizontal layout with a linear scale for population and a band scale for country names, styled with steel-blue bars. Rendered as SVG via d3.v5, the visualization includes axes with abbreviated tick labels (e.g., "1.4B") and a title. Data is loaded from a CSV file and parsed using d3.csv.

Mar 5, 2020

Loading thumbnail…

World Map: Hover and Zoom/Pan

This example presents an interactive world map rendered in SVG using D3 v5, supporting hover effects and zoom/pan navigation. Users can explore geographic regions by moving the cursor or dragging to reposition the view, with zoom controls enabling closer inspection of specific areas. The visualization employs a projection-based mapping approach, where the map is drawn using `d3.geoPath` and geographic data is transformed into screen coordinates. Interaction is handled through D3's event system and zoom behavior, while the page layout uses fixed positioning CSS to maintain full viewport coverage for the interactive canvas.

Feb 22, 2020

Loading thumbnail…

World Map: Hover and Zoom/Pan

This example shows an interactive world map that highlights countries in red on hover and supports zooming and panning through mouse interactions. The map renders with D3’s `geoNaturalEarth1` projection and `geoPath` for SVG paths, while country boundaries come from TopoJSON data merged with names from a TSV file. Zoom behavior is implemented with `d3.zoom`, applying transforms to a group element. Country tooltips display names via SVG `<title>` elements.

Feb 22, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3 for managing dynamic data. It renders a bowl of fruit as SVG circles, where apples and lemons are represented by different colors and sizes. The visualization animates through a sequence of state changes: removing an apple, replacing one apple with a lemon, and filtering out another. The code uses `selection.enter()`, `selection.merge()`, and `selection.exit()` to handle data joins, along with D3’s `scaleOrdinal` for color and radius mappings. User clicks select a fruit, which receives a black stroke.

Feb 22, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes global population by year, using a smoothed curve to show the overall growth trend. The visualization encodes years on a time-based x-axis and population on a linear y-axis, with the area beneath the curve filled in maroon. The chart is rendered as an SVG using D3 v5 APIs, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis`. Data comes from a CSV file on world population statistics, format.

Feb 22, 2020

Loading thumbnail…

Area Chart

This area chart visualizes the relationship between temperature and time in San Francisco, using a smooth curved path to fill the space beneath the data line. The chart includes labeled axes for time and temperature, with gridlines and a title. Built with D3 v5, the visualization uses `d3.area` with the `curveBasis` interpolation, `d3.scaleTime` and `d3.scaleLinear` for scaling, and SVG rendering. Data comes from a CSV file loaded via `d3.csv`.

Feb 22, 2020

Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between a car’s timestamp and its temperature reading, contributing to a study of a week of San Francisco temperature data from the Data Canvas - Sense Your City project. The visualization uses D3.js v5 to render an SVG line chart, with a time-scaled x-axis (`scaleTime`) and a linear y-axis (`scaleLinear`). The code leverages `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw a smooth curve, while CSS styles the circles and path in steelblue.

Feb 22, 2020

Loading thumbnail…

Cars Scatterplot

A scatterplot displays temperature readings in San Francisco over one week, with time on the x-axis and degrees Celsius on the y-axis. Each circle represents a single data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and plot. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The code creates grid lines through tick sizing and includes axis labels and a title.

Feb 22, 2020

Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red, semi-transparent circle represents a car, with positions mapped using d3.scaleLinear scales. The SVG rendering includes custom axes with tick marks, grid lines, and labeled titles, all styled via the provided stylesheet. The code loads data with d3.csv and parses numeric fields before rendering.

Feb 22, 2020

Loading thumbnail…

Scatterplot

This scatterplot visualizes the population of the top 10 most populous countries using data from the 2017 United Nations World Population Prospects. Each circle represents a country, with its horizontal position encoding population size and its vertical position encoding country name. The visualization uses D3 v5 to create SVG output with axes, tick marks, and labels. It employs `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to map the data, and the chart includes a title and population axis label.

Feb 21, 2020

Loading thumbnail…

Worldwide Earthquake stats 2000-2015

This visualization presents a playful, animated face built with D3.js (v5), rendered as vector graphics in an SVG container. It uses D3 selection and attribute manipulation to construct a yellow circle head with eyes, eyebrows, and a mouth. The animation uses D3 transitions to move the eyebrows up and down in a repeating two-second cycle. The underlying data source, worldwide earthquake statistics, is not visually represented in the code.

Feb 21, 2020