Christine Lanser

Untitled

This map visualizes victims of the Troubles in Northern Ireland, plotting each individual as a colored circle marker on a Leaflet map. Circle color encodes the victim’s religion—Protestant, Catholic, Other, or Unknown—using a fixed color scale defined in JavaScript. The map is initialized with Leaflet and OpenStreetMap tiles, styled with a grayscale filter for a subdued background. Data is loaded from a CSV file with D3.js, and markers are drawn using `L.circleMarker` with coordinates from the dataset.

Nov 3, 2020

Sea Turtle Survival (mock data)

This stacked area chart displays the decline in sea turtle populations (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the three species, and `d3.area` with `d3.curveBasis` for smooth paths. Labels are positioned via the `d3-area-label` library, while axes use `d3.axisBottom` and `d3.axisLeft`. The visualization renders in SVG, with hover effects that turn areas black and tooltips showing species names.

Turtle test

This stacked area chart visualizes turtle population counts for three species—Green, Loggerhead, and Hawksbill—from 1940 to 2010, based on data from `data.csv`. The chart uses `d3.stack` with `d3.stackOrderAscending` to layer the areas and `d3.area` with `d3.curveBasis` to render smooth paths in SVG. The `d3-area-label` library positions white text labels within each area, while `d3.scaleOrdinal(d3.schemeDark2)` colors the series. Hovering turns areas black, and an interactive resize listener updates the chart’s dimensions.

Turtle Survival

This streamgraph visualizes the mock mortality rates of three sea turtle species (Green, Loggerhead, Hawksbill) from 1901 to 2000, showing their combined decline over time. The stacked area chart uses d3.nest to group data by year and d3.stack to layer the species’ counts. Each species is distinguished by a color from a d3.scaleOrdinal palette, with the SVG paths generated using d3.area. Axes are scaled with d3.scaleLinear, and data is loaded from a CSV file via d3.csv.

Untitled

A stacked area chart shows the changing levels of three turtle species—Green, Loggerhead, and Hawksbill—from 1901 to 2000, revealing a dramatic decline in all populations. The chart uses d3.area to render the stacked layers, with d3.scaleOrdinal and d3.schemeSet2 providing the color palette. Brushing, implemented via d3.brushX, allows zooming on the x-axis, while hovering highlights individual series by adjusting opacity. The d3-axis components handle the time-based and numeric scales, and the rendering is done with SVG.

Making a bar chart

A horizontal bar chart displays the top 10 most populous countries, with population values converted to thousands and formatted with a custom tick formatter that replaces gigabytes with billions. The chart uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render axes and bars in SVG. Grid lines extend from the x-axis, while axis labels and a title are added as SVG text elements.

Untitled

This streamgraph shows the imaginary mortality rates of sea turtles over time, with each colored layer representing a different category and labels appearing on hover. The visualization uses d3.v4 and d3-scale-chromatic to process a wide-format CSV dataset, stacking the values with `d3.stackOffsetSilhouette` to create the mirrored silhouette effect. Labels are displayed via a tooltip triggered by mouse events, while the x-axis uses custom tick values and a dashed gridline style.

Oct 23, 2020

Sea Turtle Mortality Rates

A streamgraph shows imaginary sea turtle mortality rates over time, with each colored layer representing a different cause or location of death. The visualization uses stacked areas with a wiggle offset to display trends across a continuous timeline. Built with D3 v4, it applies `d3.stack`, `d3.area`, and `d3.curveBasis` to render smooth SVG paths, while `d3-area-label` positions labels within each layer. Data is interpolated from yearly values, and axes are generated via `d3.axisBottom` with major and minor ticks.

Oct 23, 2020

Cars Scatter Plot with Menus

This interactive scatter plot displays car attributes from the UCI Machine Learning Repository’s Auto MPG dataset. Two dropdown menus let users select which numeric columns (such as horsepower, weight, or acceleration) appear on the x- and y-axes. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render axes, while SVG circles transition smoothly between positions when menu selections change. The code implements reusable dropdownMenu and scatterPlot modules that manage data joins and update patterns.

Oct 23, 2020

Interactive Filtering

A choropleth map of global economies uses color to encode categorical income groups, with a linked legend enabling interactive filtering. Clicking a legend category dims unmatched countries and the map sphere, while highlighting the selected group on both map and legend. The visualization employs d3.geoPath and d3.geoNaturalEarth1 for map projection, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for color encoding. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG.

Oct 14, 2020

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time from 1790 onward, broken down by source categories and fossil fuel types. The five segments represent Gas, Liquids, Solids, Cement Production, and Gas Flaring, with the chart emphasizing the dominant historical contributions of solid fuels. The visualization uses d3.stack, d3.scaleTime, and d3.area with curveBasis to create smooth stacked areas. Labels are positioned automatically using the d3-area-label library, while an ordinal color scale from d3-scale-chromatic distinguishes each category. The chart is fully responsive and includes axis tick marks and a rotated y-axis title, with basic tooltips showing segment names on hover.

Oct 14, 2020

Choropleth Map

This choropleth map visualizes the economies of world countries using a spectral color scale. The implementation uses d3.geoPath with the natural Earth projection to render world geometry from TopoJSON and TSV data sources. The custom d3.scaleOrdinal color legend displays circles and text labels, while the map supports zooming through d3.zoom. Each country is colored by its economy value with hover effects that turn the landmass red, and tooltips reveal the country name and associated economic classification.

Oct 8, 2020

Color Legend

This example demonstrates a versatile legend system for data visualizations, showing both a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend represents numeric tick values with proportionally scaled circles. The visualization uses D3 v5's scaleOrdinal and scaleSqrt APIs to generate the respective scales. The code constructs SVG groups for each legend item, positioning circles and text vertically with configurable spacing and offsets, and employs enter/exit animations for dynamic updates.

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as a tree layout. The code uses D3’s `tree()` layout with a `linkHorizontal` path generator to draw the connections, and the `hierarchy` function to parse the nested JSON data. Node labels are added as SVG text elements, with font size and anchor position varying by depth to distinguish parent regions from leaf countries. Pan and zoom interactions are enabled via `d3.zoom` and `event.transform`.

Blank Canvas!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move. It first uses `d3.select` to target the SVG element, sets its dimensions based on the viewport, and appends a rounded rectangle as the canvas background. The code relies on basic SVG attributes like `width`, `height`, and `rx`, while the interactive eyebrow animation is driven by D3’s data-binding and update patterns, though the specific motion logic is not shown. The visualization highlights how D3 can directly control SVG structure from JavaScript.

Cheap tricks for interaction: reduce instead of forEach

This example displays an interactive world map using D3.js with a Natural Earth projection. The visualization renders country boundaries as SVG paths, with hover effects that change country fill colors from light green to red. It uses d3.json and d3.tsv to load TopoJSON world map data and country names, with a lookup table created via JavaScript's reduce method to associate country IDs with names. The map supports zooming through d3.zoom, and each country includes a title element for tooltip display.

Cheap tricks for interaction

This example shows a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, where hovering over any country turns it red. It uses TopoJSON data from the `world-atlas` package, joined with a TSV file to add country names via `iso_n3` IDs. The map includes a blue sphere background, and each country’s `<path>` element contains a `<title>` child for tooltips, enabling interaction through CSS `:hover` styling.

Let's make a Map with simplified code!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

Let's make a Map with D3.js!

This example displays a world map rendered as SVG paths using D3.js. It loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON with `topojson.feature`, and projects it using `d3.geoMercator`. The `d3.geoPath` generator sets the `d` attribute for each country path through a data join, producing a simplified 110m-resolution map.

Hover to Select

Hovering over fruit-shaped circles selects them, highlighting the chosen fruit with a black outline. The visualization shows a row of apples and lemons that animate in and out as the dataset changes over time. It uses D3 v5 with `scaleOrdinal` for colors and radii, and binds data to SVG circles via `selectAll` and data joins. The `fruitBowl` function applies `transition().duration(1000)` for smooth enter, update, and exit animations, with mouseover and mouseout events triggering selection state.

Bowl of Fruit - Singular Elements

A bowl of fruit demonstrates the enter, update, and exit pattern for SVG elements. The chart shows five apples that are then eaten, replaced with a lemon, and removed one by one over time. Using d3.scaleOrdinal for color and radius, d3-selection's merge and exit methods update the circles and text labels. The visualization uses SVG rect for the bowl and groups for each fruit, with a custom fruitBowl function managing data joins.

Bowl of Fruit - Nested

A nested selection pattern updates a bowl of fruit rendered as SVG circles and text labels. The visualization starts with five apples, then sequentially removes one fruit, swaps an apple for a lemon, and filters out another apple. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `selection.enter` and `selection.merge` manage entering and updating elements. The code uses `d3.select`, `d3.range`, and generic SVG `circle` and `text` elements.

Bowl of Fruit- General Update Pattern

This example demonstrates the general update pattern in D3 by animating a bowl of fruit represented as circles. It shows how data joins handle entering, updating, and exiting elements: apples appear, one is removed, another changes to a lemon, and a third disappears. The code uses `selection.data`, `.enter()`, `.merge()`, `.exit()`, and `transition.attr`. It relies on `d3.scaleOrdinal` for color and radius scales, and renders with SVG circles in a fixed 960×500 viewport. Animated transitions adjust circle positions and radii over one-second durations.

Oct 3, 2020

Bowl of Fruit- General Update Pattern

This example demonstrates D3’s general update pattern for animating SVG circles that represent a bowl of fruit. Fruits are initially apples, then are removed, replaced with lemons, or deleted at timed intervals, with enter, update, and exit selections handled via `data()`, `merge()`, and `transition()`. The code uses `scaleOrdinal` for color and radius, computes x-position from index, and animates radius from 0 on enter and to 0 on exit over one-second transitions, with updates triggered by `setTimeout`.

Oct 3, 2020

World Population Area Chart

This area chart displays the growth of world population over time, with years on the x-axis and population on the y-axis, using a smooth curved line filled in maroon. The visualization loads data from a CSV file and renders it as an SVG using D3 v6, employing `d3.area` with `curveBasis` to generate the smoothed path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, with population formatted in billions and a labeled title. The chart uses a linear scale for population and a time scale for years, including grid lines and axis labels.

Area Chart

This area chart visualizes temperature in San Francisco over time, with time on the x-axis and temperature on the y-axis. The chart uses a filled maroon path to represent the data, smoothed with a basis curve. Built with D3 v6, it employs `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` for the filled region, and `axisBottom`/`axisLeft` for tick marks. Data comes from a CSV file of temperature readings, rendered as SVG with custom styling for labels and ticks.

Line Chart

This line chart visualizes temperature in San Francisco over time, with time on the x-axis and temperature on the y-axis. The chart uses D3's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a smooth `curveBasis` line to connect data points. Data is loaded from a CSV file, and the visualization is rendered as an SVG with custom styling for the line, axis labels, and title.

Week Temperature in SF

This visualization shows hourly temperature readings in San Francisco over a week, displayed as orange circles on a scatter plot with time on the x-axis and temperature on the y-axis. The code uses D3 v6 functions including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG chart, with data loaded from a CSV file via `d3.csv`. Axes are styled with tick lines and labels, and the title appears above the plot.

Test Scatter Plot

This scatter plot visualizes COVID-19 data, comparing the number of cases and deaths for four countries. The chart uses SVG circles to represent each country, with D3.js’s `scaleLinear` and `extent` functions to map the data to axes, and `axisLeft` and `axisBottom` to render the labeled axes. The code imports `csv` to load the data from `data.csv` and applies D3 v6 to build the visualization, with a clear title and axis labels.

Scatter Plot

This scatter plot displays population data for ten countries, with each country positioned along the y-axis and its population plotted on the x-axis using a linear scale. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` and `d3.scalePoint` for axes, while `d3.axisLeft` and `d3.axisBottom` generate ticks with a custom number formatter that converts large values to billions. Data comes from a CSV file showing 2018 population figures, which are multiplied by 1000 during processing. The chart includes a title, axis labels, and a steel-blue circle for each country.

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars from the auto-mpg CSV file. The visualization uses red, semi-transparent circles to represent each car, with axes labeled and tick marks drawn using d3.axisBottom and d3.axisLeft. The d3.scaleLinear functions compute the x and y scales based on the extent of the data, and the SVG rendering appends circles with attributes set via d3’s selection and data join methods.

Making a bar chart

This example shows the population of ten countries in 2018, ordered by rank in a horizontal bar chart using SVG. The chart loads data from a CSV file and scales the bars with d3.scaleLinear and d3.scaleBand, while rendering axes via d3.axisLeft and d3.axisBottom. Population values are multiplied by 1,000 in the data-loading step, and the bars are styled with steelblue fill. Data originates from the United Nations.

Sep 30, 2020

Smily Face

The example shows a green smiling face constructed from SVG shapes, which winks by animating its eyebrows and changing its mouth’s color and orientation. The face is built using d3.select and append to add circles, rectangles, and an arc-generated path, with d3.arc defining the mouth’s curved form. Animations are driven by chained transition calls on SVG attributes, such as transform, to move the eyebrows and rotate the mouth.

Sep 29, 2020

Smily Face

A yellow smiley face is drawn with SVG shapes, including circles for the eyes and an arc-based mouth, centered on a blank canvas. The code uses D3 v6 to construct the face and animates the eyebrows and mouth with chained `transition().duration()` calls, shifting their transforms over two-second intervals. The mouth path is generated using `d3.arc`, and the animation cycles the eyebrows up and down while rotating and recoloring the mouth. The example demonstrates basic SVG styling, grouping, and transition sequencing in D3.

Sep 29, 2020