L

Leora Wenger

@leorawe·24 public vizzes

Loading thumbnail…

Tree Example

This example visualizes a hierarchical tree of Torah portions, with the root labeled "Torah" branching into the five books—Breishit, Shmot, Vayikra, Bamidbar, and Deuteronomy—and each book expanding into its individual weekly portions. The code uses d3.tree() to compute the layout, d3.hierarchy() to structure the data, and d3.linkVertical() to generate the curved paths connecting parent nodes to children. It renders the resulting SVG with paths for links and text elements for node labels, styling parent nodes at 16px and leaf nodes at 8px.

Loading thumbnail…

Chloropleth Map - Interactive

This interactive chloropleth map displays global economic data by country, with a color legend that filters the map to highlight selected categories. The visualization uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections to render the world map, while the legend leverages `scaleOrdinal` and `schemeSpectral` for color mapping. Users can click legend ticks to isolate specific economic classifications, with non-selected countries dimmed and the selected category emphasized. The map also supports zooming via D3’s `zoom` event, and country data is loaded from the world-atlas TopoJSON and TSV sources.

Loading thumbnail…

Fruit: Click to Select

This example demonstrates five fruits as circles that grow into apples or lemons over time. A user can click any fruit to select it, which adds a black stroke. Data updates remove fruits, change types, and trigger smooth size transitions using the D3 v5 selection API and `transition().duration()`, while the `scaleOrdinal` scales map fruit types to colors and radii.

Loading thumbnail…

Fruit - Update Pattern - Nested, Transitions

A bowl of fruit changes over time as apples are removed and one apple transforms into a lemon. The visualization demonstrates the D3 update pattern with nested elements. It uses d3.scaleOrdinal for color and radius, and applies d3.transition to animate position changes over 1200 milliseconds. Exit transitions shrink removed fruits over 500 milliseconds. The SVG rendering is driven by a custom fruitBowl function that merges entering and existing groups.

Loading thumbnail…

Chloropleth Map - Color

This choropleth map colors countries by their economic classification using a categorical color scale. The visualization uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections to render world map topology, with an ordinal color legend showing the economy categories. Country data comes from the world-atlas TopoJSON and TSV files. Hovering highlights countries in red, while the legend uses D3’s `scaleOrdinal` and `schemeSpectral` for distinct color assignments.

Loading thumbnail…

Tree with Countries

This visualization shows the hierarchical structure of countries organized by continent and subregion, with each country’s name displayed as a leaf node. The tree layout, generated using `d3.tree` and `d3.hierarchy`, positions nodes horizontally, and links are drawn with `d3.linkHorizontal` as SVG paths. Labels scale in font size based on tree depth, from large continent names to smaller country names, while the entire diagram supports pan and zoom via `d3.zoom`. Data is loaded from a JSON file using `d3.json`, and the SVG output is styled with a tan path color and a custom font.

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable D3.js legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colors, while the size legend uses a square-root scale with four reversed ticks. Both legends are implemented as custom D3.js functions that accept an SVG group and configuration props, using d3.scaleOrdinal and d3.scaleSqrt. The SVG rendering includes labeled circles with custom spacing and text offsets, styled via CSS with sans-serif fonts and black stroke outlines.

Loading thumbnail…

Blank Canvas

This example demonstrates a blank, interactive-free canvas that fills the browser viewport with a single rounded rectangle. Using the D3.js library’s `select` function, it dynamically retrieves the body’s client width and height, then sets the SVG’s dimensions accordingly and appends a `rect` element whose corners are rounded via the `rx` attribute. The visualization relies on D3 v5 and SVG rendering, with styling provided by a fixed-position CSS layout that ensures the canvas remains fully visible.

Loading thumbnail…

World Map - Cheap Tricks Version

This map displays countries of the world in a natural Earth projection, with each country colored in orange and featuring a hover effect that lightens its fill. A tooltip reveals the country name when hovering, using data combined from a TSV file for names and TopoJSON for geometries. The visualization employs D3 v5’s `geoPath` and `geoNaturalEarth1` for map rendering, `zoom` for pan and zoom interactions, and `topojson.feature` to extract country boundaries.

Loading thumbnail…

Fruit - Update Pattern - Nested

An animated SVG demonstrates a nested update pattern for fruit data, showing an array of apples that lose elements and transform one into a lemon through time-based transitions. Five circles render initially, then sequential actions remove the last fruit, change the third fruit's type, and delete another element. The visualization uses d3 transitions with a 1000ms duration for positions, colors, and radii, while exit animations shrink removed elements to zero radius over 2000ms. The code applies d3.scaleOrdinal for color and radius mappings, and d3-selection’s enter/merge/exit pattern to handle nested circle and text elements.

Loading thumbnail…

Fruit - Update Pattern

Five fruit circles enter as apples and animate through a join sequence using D3’s data-join, `enter`, `merge`, and `exit` selections. The code drives transitions for radius, color, and removal, with `d3.scaleOrdinal` mapping fruit type to size and hue. A timer updates the array, replacing an apple with a lemon and filtering out elements.

Loading thumbnail…

World Map - topojson

This example renders a natural Earth projection world map using SVG. It displays country boundaries and landmasses in brown with red strokes, overlaid on a light blue sphere representing the globe. The visualization loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere outline is generated from a GeoJSON Sphere object, and styling is applied via CSS classes.

Loading thumbnail…

Fruit: Hover Gets Ya Selected

Five fruit circles sit in a row, each filled red for apples or yellow for lemons. Hovering over a circle selects it with a black outline, and hovering away deselects it. The visualization uses D3 v5 with SVG and animated transitions to smoothly change circle radius, position, and fill. The `fruitBowl` module maps fruit types to colors and sizes using `scaleOrdinal`, while `setSelectedFruit` updates the selection state on `mouseover` and `mouseout` events.

Loading thumbnail…

World Pop Area Chart

This area chart visualizes world population by year, with the data sourced from a CSV file and rendered as a filled path with a smooth curve. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` components to map years to the x-axis and population values to the y-axis, with formatted tick labels like “B” for billions. A title and axis labels are added via SVG text elements, and the chart is styled with CSS classes for the maroon fill and sans-serif fonts.

Loading thumbnail…

Avocados Area Chart with Time

This area chart visualizes the total bags of Hass avocados sold each month in 2018, with time on the x-axis and volume on the y-axis. The chart includes circular markers for each data point and a green filled area beneath a steelblue line. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to render the SVG. The data comes from the Hass Avocado Board and is loaded via `d3.csv`.

Loading thumbnail…

Avocados Line Chart with Time

This line chart displays the total number of avocado bags sold each month in 2018, with time on the x-axis and volume on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG with gridlines, circular data points, and a steel-blue line path connecting the monthly totals. Data comes from the Hass Avocado Board’s public volume and price dataset, loaded via `d3.csv`. The chart includes labeled axes, a title, and rotated axis text for readability.

Loading thumbnail…

Avocados Scatter Plot with Time

This scatter plot displays avocado volume data from the Hass Avocado Board for 2018, plotting total bags against dates across the year. The visualization uses D3 v5 with SVG rendering, employing d3.scaleTime and d3.scaleLinear to map temporal and quantitative dimensions. Circles represent individual data points, with axes generated using d3.axisBottom and d3.axisLeft. The code loads CSV data via d3.csv, formats date strings into JavaScript Date objects, and applies a dark green fill with partial opacity to the circles.

Loading thumbnail…

Books with Pages

A horizontal bar chart displays eight classic novels ranked by page count, from War and Peace at 1,392 pages to Great Expectations at 505. The chart uses D3 v5’s `scaleBand` and `scaleLinear` to map book titles and page values, with SVG rectangles and axes generated via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using `d3.csv`, sorted descending, and styled with an Ubuntu font.

Loading thumbnail…

Avocados Scatter Plot

This scatter plot displays the relationship between average price and total volume for avocados in 2018, with each point representing a market observation. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and map data from the Hass Avocado Board, rendering circles in an SVG canvas. Axes include formatted tick labels and clear titles, while a green, semi-transparent fill highlights point density. The code handles data parsing, margin-based layout, and custom axis labels, all styled via an external CSS file.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing the relationship between horsepower and weight for individual car models. Each circle represents a car, with position mapped by d3.scaleLinear scales for both axes. The SVG rendering uses D3 v5’s selection, axis, and data join methods to draw the plot, including grid lines, labeled axes, and a title. Circle opacity is reduced to show overlapping points, and the data is loaded asynchronously via d3.csv.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.scalePoint for the categorical country axis and d3.scaleLinear for the population axis, with circles sized at a fixed radius. SVG rendering is implemented through d3 v5, featuring axis functions d3.axisLeft and d3.axisBottom with custom tick formatting that abbreviates numbers using the d3.format method, replacing 'G' with 'B' for billions.

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses d3.scalePoint for the categorical country axis and d3.scaleLinear for the population axis, with circles sized at a fixed radius. SVG rendering is implemented through d3 v5, featuring axis functions d3.axisLeft and d3.axisBottom with custom tick formatting that abbreviates numbers using the d3.format method, replacing 'G' with 'B' for billions.

Loading thumbnail…

Bar Chart

This bar chart displays the 2018 estimated population of the ten most populous countries, with values in thousands from the UN World Population Prospects. The visualization uses the D3 library (v5) to project data from a local CSV file into an SVG graphic, employing `scaleLinear` for the population axis and `scaleBand` for categorical country labels with a 0.1 padding. Custom tick formatting converts values to billions, and gridlines extend across the chart for readability.

Loading thumbnail…

Immigration Data Table - 1892

This example presents a text-based summary of a single day’s immigration records from Ellis Island in 1892, sourced from Cool Datasets. It uses d3.select to append HTML pre elements to the body, displaying the dataset’s row count, column count, and size in kilobytes via d3.csvFormat. The first ten rows appear as JSON in a second pre block. The output is styled with black background and green monospaced text, offering a minimal, terminal-like view of the raw data.