J

jons288

@jons288·84 public vizzes

Loading thumbnail…

Avocado Sales US States

This interactive map displays weekly avocado sales by US state for the week of 1/15/2017, with a time slider to explore all 52 weeks. State circles sized by total volume appear over a choropleth of regions. The visualization uses d3.geoAlbersUsa, d3.geoPath, and d3.zoom for panning, while d3.scaleSqrt encodes sales volume. It loads TopoJSON from a gist and CSV sales data from VizHub, rendering SVG elements and a custom rect-based time slider.

Loading thumbnail…

Eating Around the World

This choropleth map visualizes the user’s restaurant ratings across countries, with each nation shaded according to its review score on a red ordinal scale. Users click legend circles to filter countries by rating, which also dims non-matching regions and the background sphere. Built with D3 v5, the visualization uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for map interaction, while data is loaded via `tsv`, `json`, and `csv` from the World Atlas TopoJSON and a traveler dataset. Hovering reveals country names, restaurant details, and star ratings in tooltips.

Loading thumbnail…

Swantons

This visualization displays a choropleth map of world countries, colored by traveler reviews, alongside a legend and trip table for four travelers. Users can click legend entries to filter and highlight countries visited by a specific traveler. The map uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeReds for coloring. Data comes from world-atlas TopoJSON, a TSV of country names, and a CSV of traveler trips.

Loading thumbnail…

Avocado Sales US States

A choropleth map of the United States displays avocado sales volume for each state during the week of 1/15/2017, with darker red fills for higher values and grey for missing data. Semi-transparent circles, sized by d3.scaleSqrt, are positioned at each state’s centroid via d3.geoCentroid and d3.geoPath to show total volume. A time slider below, built with d3.scaleLinear and axisBottom, lets a user scrub through all 2017 weekly dates, triggering a re-render that updates both the map fills and circle radii. The visualization uses TopoJSON for state boundaries, d3.zoom for panning, and loads data from a CSV file.

Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volumes across US states for the week of January 15, 2017, using a choropleth map with overlaid circles sized by total volume. The map uses d3.geoAlbersUsa projection with topojson US state boundaries, while circles are positioned via d3.geoCentroid and scaled with d3.scaleSqrt. Interactive zoom is implemented through d3.zoom, and the visualization is rendered as SVG. Data comes from a CSV of avocado sales figures joined to state geometries, with missing states shown in gray and hover highlighting via CSS.

Loading thumbnail…

Swanton Choropleth Map With Interactive Filtering

A choropleth map of the world colors each country by its economy type using a spectral ordinal color scale derived from World Atlas TopoJSON data. Interactive filtering dims non-selected countries and highlights the chosen economy when a legend swatch is clicked. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `zoom` for panning, while the legend handles click events to toggle the filter. The SVG rendering includes hover effects, tooltips, and a semi-transparent background.

Loading thumbnail…

Swanton's Travels

A choropleth map displays world countries colored by income group, with a color legend for filtering. Clicking a country highlights it and dims all others; clicking again resets. The map uses D3's `geoNaturalEarth1` projection with `geoPath` for rendering shapes, and supports zooming via the `zoom` event. Data is loaded from a CSV of travelers and a TopoJSON world atlas, processed with `topojson.feature`. An ordinal spectral color scale maps economy categories.

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays global income groups, with countries colored by category and a legend allowing selection of specific values. Clicking a country highlights it, fades all others, and dims the sphere, while clicking the legend filters the map to matching countries. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for the map, with d3.scaleOrdinal and d3.schemeSpectral for colors, loading TopoJSON world data and TSV metadata from the world-atlas package.

Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries as red-filled polygons on a blue sphere, allowing users to click any nation to highlight it. Built with D3 v5 and TopoJSON, it uses a natural Earth projection and loads geographic data from the World Atlas. The visualization relies on `d3.geoPath` for rendering, `d3.zoom` is not implemented, and click events trigger a `render` function that updates fill colors. Country names are derived from a TSV file and attached as SVG `<title>` tooltips.

Loading thumbnail…

Fixed projection for US States

This example displays a choropleth map of US states using D3 v5 and the TopoJSON us-10m dataset, where each state is drawn as an SVG path with d3.geoPath. The map is projected using d3.geoAlbersUsa. Avocado sales data from a CSV file (specifically for January 15, 2017) is joined to state features. Red circles are placed at each state’s centroid (via d3.geoCentroid) to indicate data points, while CSS classes define region-specific fill colors for the Northeast, Midwest, South, and West, although region merging is commented out.

Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volumes across US states for the week of January 15, 2017, using a choropleth-style map where states with sales appear in pink and states without data are gray. Circles sized by total sales volume are overlaid at each state’s centroid, using `d3.geoAlbersUsa` projection and `d3.geoPath` for state boundaries. The code loads data from a CSV via `d3.csv` and merges it with TopoJSON state geometries using TopoJSON’s `feature` function, then applies `d3.scaleSqrt` to scale circle radii. Interactivity includes zoom via `d3.zoom` and hover effects that highlight states in red.

Loading thumbnail…

Circles on a Map

This map visualizes global population estimates for 2018 by projecting country centroids onto a natural Earth projection. Circles sized proportionally to population via a square-root scale are placed at each centroid, while uniform circles represent countries lacking data. The visualization uses D3.js APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `scaleOrdinal`, rendering with SVG. Population data comes from a CSV of UN estimates, and country shapes from a TopoJSON world atlas.

Loading thumbnail…

Fixed projection for US States

This example visualizes US states using a fixed Albers USA projection, plotting avocado sales data from a CSV dataset for January 15, 2017. State boundaries are rendered as SVG paths via d3.geoPath and topojson.feature, with red circles marking each state’s centroid using d3.geoCentroid. The map supports pan and zoom through d3.zoom, while color-coded regions (Northeast, Midwest, South, West) are defined in CSS but remain commented out in the active code.

Loading thumbnail…

Project in progress

This example shows a geographic map of the contiguous United States with red dots representing fast food restaurant locations, filtered to include only coordinates within the lower 48 states and Hawaii. The map is rendered using SVG with the d3.geoAlbersUsa projection and d3.geoPath, while restaurant data is loaded from a CSV file and plotted as circles. The visualization supports zooming and panning through d3.zoom, and states change color on hover via CSS.

Loading thumbnail…

US States Colored By Region

This map of US states categorizes each region with a distinct color: the Northeast in blue, the Midwest in teal, the South in green, and the West in light blue. It uses D3 v5 with TopoJSON to load and render the states, applying `d3.geoPath` to draw each selected region. The code filters state geometries by region sets and merges them separately to color the paths via CSS classes. Data comes from the US 10m TopoJSON file hosted on d3js.org.

Loading thumbnail…

So... here is the Earth

This visualization displays a world map using a natural Earth projection, where clicking any country highlights it with a distinct gold color while others remain a muted green. It reads country names from a world-atlas TSV file, mapping ISO codes to names for display, and renders the geographic boundaries. The implementation combines D3’s `geoPath` and `geoNaturalEarth1` for map projection, with TopoJSON’s `feature` function to process the 50m resolution country borders.

Loading thumbnail…

Data Table Summary

This data-table summary presents a plain-text snapshot of Walmart sales forecasting data, displaying the number of rows, columns, and file size in kilobytes, followed by the first 10 rows as formatted JSON. The code uses d3.csv to load the remote dataset, d3.csvFormat to compute its size, and d3.select to append preformatted text elements to the body. The black background with monochrome green text provides a terminal-like aesthetic.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top ten most frequently played live Pearl Jam songs, with play counts sourced from setlist.fm. The visualization uses D3 v5 to map song titles along the y-axis and play counts along the x-axis, encoding data as steelblue rectangles. It employs `scaleLinear` and `scaleBand` to compute scales, with `axisLeft` and `axisBottom` generating the axes, and `csv` to load the data.

Loading thumbnail…

So... here is the Earth

This interactive map of Earth uses a natural Earth projection to display world countries, with the code coloring the selected nation in gold while others appear green. Clicking a country reveals its name as a label, while the sphere background is rendered in blue. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then renders paths via `d3.geoPath` and `d3.geoNaturalEarth1`. It handles selection with D3’s click events, updating fills and text on each interaction using D3 v5.

Loading thumbnail…

Avocado Sales US States

This interactive choropleth map displays weekly avocado sales volumes across US states, with a slider beneath the map letting users select any week of 2017. State boundaries are rendered using `d3.geoPath` with a `geoAlbersUsa` projection, while translucent teal circles sized by `scaleSqrt` exaggerate total sales per state. A timescale brush updates the map by filtering CSV data on the selected date. The code combines TopoJSON for state geometries, D3 v5, and an SVG rendering approach with zoom support.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3.js with special cases for entering, updating, and exiting data. It shows a bowl of fruit where apples are added, eaten, replaced by lemons, and filtered out over time, using animated transitions. The code uses D3 v5’s `selection.enter`, `selection.merge`, `selection.exit`, and `transition.duration` to handle these updates, with ordinal scales for color, radius, and font size. Rendering occurs in an SVG via `circle` and `text` elements.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map, where hovering over a country highlights it in red and reveals its name in a tooltip. The map uses a natural Earth projection rendered as SVG paths, with a blue sphere background. Interaction is powered by D3's `zoom` module for pan and zoom, while country boundaries and names come from the `world-atlas` dataset loaded via D3's `tsv` and `json` helpers. The `topojson` library converts the raw topology data into geoJSON features for rendering.

Loading thumbnail…

Data Table Summary

This example summarizes an avocado price and volume dataset from the Hass Avocado Board. It displays the total row and column counts, the approximate file size in kilobytes, and the first ten rows as formatted JSON. The visualization uses d3.csv to load the external data and d3.csvFormat to compute the file size. Black background with green monospace text creates a terminal-like aesthetic.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by building a smiley face from SVG shapes. A red circle forms the head, with appended circles for eyes and rectangles for eyebrows, while a mouth is drawn using the `arc` generator. The code uses `selection.append` and `transition.attr` to move the eyebrow group up and down over two seconds. All elements are positioned relative to a centered `g` container, using D3 v5’s modular `select` and `arc` imports, with the SVG defined statically in HTML.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most-played Pearl Jam songs from a CSV file, ranking tracks like “Even Flow” and “Alive” by play count. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Data is loaded asynchronously via `d3.csv`, with play counts coerced to numbers. The chart includes margins and an updated scale to fit the fixed 960×500 SVG canvas.

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart visualizes population trends over time by region, with a vertical black line indicating the currently selected year. Moving the mouse across the chart updates the selected year, repositioning the line and reflecting the change in the visualization. The chart uses d3.scaleTime and d3.scaleLinear to map data, d3.line with curveBasis for the paths, and d3.nest to group data by region. Data comes from UN population estimates and medium variant projections, rendered as an SVG using D3 v5.

Loading thumbnail…

Avocado Sales US States

A choropleth map of the United States displays avocado sales volume by state for the week of January 15, 2017, with states colored light red or gray and circles sized by total volume via a square-root scale. Users can zoom and pan the map using d3.zoom. The visualization renders geographic boundaries with d3.geoPath and d3.geoAlbersUsa, processing topojson US state data and CSV sales records through d3.csv and d3.json. A horizontal slider bar at the bottom suggests date navigation, though no interactive date selection is implemented.

Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volumes across US states for the week of January 15, 2017. State boundaries are drawn using d3.geoPath with a geoAlbersUsa projection, while sales data from a CSV file is joined to TopoJSON state geometries. Circles sized by d3.scaleSqrt represent total sales volume, positioned at state centroids via geoCentroid. Users can zoom and pan using d3.zoom. States with missing data appear gray, and hovering highlights individual states in red.

Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volumes across US states for a specific week in 2017, using a choropleth map with proportional circles overlaid on each state. The circles use a square-root scale to represent total sales volume, while state fill colors distinguish regions. The code loads CSV sales data and TopoJSON state boundaries, then renders them with d3.geoPath and d3.geoAlbersUsa projections. Interactive features include zooming via d3.zoom and hover highlighting. A slider at the bottom indicates the date range, though only the selected week’s data is visualized.

Loading thumbnail…

Avocados Scatter Plot With Menus

This interactive scatter plot visualizes avocado pricing data from the Hass Avocado dataset on Kaggle. Two dropdown menus allow users to select which variables to plot on the x- and y-axes, dynamically updating the visualization. The plot uses D3.js v5's `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks, with circles animating via `transition().duration(1000).delay()`. The CSV data is loaded from a remote URL, and the scatter plot is rendered as SVG with axes labels and a grid of tick lines.

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between the total weekly volume of avocados sold and their average price, with each point colored by year from 2016 to 2018. The data comes from the Hass Avocado Board via Kaggle. Using d3.scaleLinear for both axes and d3.scaleOrdinal for color encoding, the code renders SVG circles with opacity, includes axis labels and a title, and adds a legend using nested SVG groups. Both axes use d3.axisBottom and d3.axisLeft with tick lines.

Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volume across U.S. states for the week of January 15, 2017. A choropleth map colors states with recorded sales in pink and those without in gray, while proportional circles over each state’s centroid use a square-root scale to represent total sales volume. The map uses an Albers equal-area projection via `d3.geoPath` and `geoAlbersUsa`, with data from a CSV joined to TopoJSON state boundaries. Circles and state paths are rendered as SVG, with tooltips showing state names and sales figures.

Loading thumbnail…

Cars Scatter Plot With Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes via dropdown menus. Built with D3 v5, it renders animated SVG circles that transition smoothly when the X or Y axis column is changed. The visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with `dropdownMenu` handling user selection. A color legend with clickable swatches filters data points. Data loads from a CSV via `csv()` and is processed in `loadAndProcessData`.

Loading thumbnail…

Cheap Tricks for Interaction

A world map rendered in indigo with black country borders uses interactive clicks to highlight a selected nation in red. Built with D3.js version 5 and TopoJSON, the visualization loads geographic data from the world-atlas package, combining 50m resolution TopoJSON shapes with a TSV file for country names. The d3.geoPath and d3.geoNaturalEarth1 projection draw the landmasses, while a click handler updates the fill color and logs to the console.

Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes the relationship between horsepower and weight for cars, with each point colored by the car's origin and rendered as an SVG circle. The visualization enables interactive filtering through a color legend: clicking a region on the legend highlights cars from that origin at full opacity while dimming all others. Built with D3 v5, the code uses `scaleOrdinal`, `schemeSpectral`, `scaleLinear`, `axisLeft`, `axisBottom`, and custom `colorLegend` and `scatterPlot` functions to render axes, grid lines, and the plot. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via `d3.csv`.

Loading thumbnail…

So... here is the Earth

A map of the United States highlights a specific set of states in red, using a natural Earth projection to render the country’s shape. The visualization loads US state boundaries from a TopoJSON atlas and uses d3.geoPath with d3.geoNaturalEarth1 to draw the paths. Selected states are merged via topojson.merge and filled with a distinct color, while d3.zoom is also loaded but not applied in the final code.

Loading thumbnail…

Fixed projection for US States

This example visualizes avocado sales volume across US states using a fixed Albers USA projection. Red circles sized by a square-root scale mark each state’s centroid, with circle radius proportional to total volume from the January 15, 2017 dataset. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from TopoJSON, while `d3.zoom` enables panning and zooming. State data is joined from CSV and TopoJSON via `d3.csv` and `d3.json`.

Loading thumbnail…

Fixed projection for US States

This example displays a map of US states colored in green, with red dots marking the geographic centroid of each state based on avocado sales data from January 15, 2017, loaded from a CSV file. The visualization uses d3.geoPath with the geoAlbersUsa projection to render the TopoJSON state boundaries, while d3.geoCentroid calculates the center points for the circles. The map is rendered as SVG and includes d3.zoom functionality for interactive panning and scaling, with state features merged from the TopoJSON data and augmented with CSV attributes.

Loading thumbnail…

Fixed projection for US States

A fixed US map, projected with `geoAlbersUsa`, draws all state boundaries as SVG paths. Red circles mark the geographic centroid of each state, using `geoCentroid` and the same projection to position them. The map supports zooming via an event-driven `zoom` interaction that applies a transform to the grouped SVG elements. State boundaries are generated from TopoJSON data merged with CSV sales records for a single date, though the sales values themselves are not visualized.

Loading thumbnail…

Fixed projection for US States

This example displays a fixed projection of US states using d3.geoAlbersUsa and d3.geoPath, with red circles marking the geographic centroid of each state. It loads avocado sales data from a CSV and merges it with TopoJSON state boundaries using topojson.feature. The visualization renders state shapes as SVG paths, with color-coded regional groupings (Northeast, Midwest, South, West) defined via d3.set filters, though the primary rendering shows all states in green with red centroid markers. The code uses d3.csv, d3.json, and d3.geoCentroid to process and position the data.

Loading thumbnail…

Fixed projection for US States

This example visualizes US states colored by region, using sales data from an avocado dataset filtered to a single date. The map renders geographic boundaries and circles representing data points through an SVG. It processes TopoJSON and CSV data with `d3.json` and `d3.csv`, merges them via `topojson.feature`, and applies static regional color fills for the Northeast, Midwest, South, and West. The `d3.geoPath` API generates the state outlines, while CSS classes define each region’s fill color.

Loading thumbnail…

Fixed projection for US States

This map visualization uses a fixed projection to display the four major U.S. census regions—Northeast, Midwest, South, and West—as distinct colored areas. It renders US state boundaries from the `us-10m` TopoJSON dataset, merging state geometries by regional ID using the `topojson` `merge` function. The D3 `select` and `geoPath` APIs generate SVG paths for each region, with styles defined in a stylesheet assigning each region a unique fill color.

Loading thumbnail…

Fixed projection for US States

This example displays US states grouped into four census regions—Northeast, Midwest, South, and West—each filled with a distinct color. It uses d3.json to load the TopoJSON file, topojson.merge to combine state geometries by region, and d3.geoPath to render the resulting shapes as SVG paths. State groupings are defined using d3.set of FIPS codes, and CSS classes control the fill colors.

Loading thumbnail…

Fixed projection for US States

This example displays the contiguous United States color-coded by Census region: the Northeast, Midwest, South, and West. Each regional group of states is drawn as a separate path element, with the colors defined in CSS. The visualization uses the D3 library’s `geoPath` to render geographic data and the TopoJSON `feature` and `merge` functions to combine the US states dataset with its geometries. The map is rendered as an SVG, and the data is loaded from the `us-10m.v1.json` file.

Loading thumbnail…

Fixed projection for US States

This example divides US states into four color-coded census regions—Northeast, Midwest, South, and West—drawn as fixed geographic projections. It uses D3 v5 with `d3.json`, `d3.geoPath`, and the `topojson` library to merge state geometries from the us-10m.v1 TopoJSON dataset. Each region is rendered as a separate SVG path with distinct fill colors defined in CSS.

Loading thumbnail…

Fixed projection for US States

This example displays a choropleth map of the United States, with states grouped into four color-coded regions: Northeast, Midwest, South, and West. It uses `d3.json` to load US TopoJSON data from `us-10m.v1.json`, then `topojson.feature` and `topojson.merge` to extract and combine state geometries by region. The paths are rendered as SVG elements using `d3.geoPath`, with regions filtered by state FIPS codes.

Loading thumbnail…

Swanton Choropleth Map

This choropleth map visualizes global income groups, coloring each country according to its income_grp category with a spectral color scale. The map uses a natural Earth projection and supports zooming via the zoom API, while a legend explains the color categories. The visualization loads world country geometries from the world-atlas TopoJSON and TSV datasets, processes them with topojson.feature, and renders the paths using d3.geoPath. Hovering highlights a country in gray and reveals a tooltip with its name and income group.

Loading thumbnail…

Fixed projection for US States

This example renders a fixed-projection map of US states using d3.geoPath and TopoJSON data from us-10m.v1.json. It displays all state boundaries in gray with black strokes, highlighting 27 selected states in yellow based on a predefined set of FIPS IDs. The visualization demonstrates how to load and convert TopoJSON features with the topojson.feature API, then bind them to SVG path elements. The projection is left null, producing raw geographic coordinates without any transformation.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a choropleth-style map of the United States using D3.js, highlighting a subset of states with a distinct CSS class. It loads TopoJSON data from `https://d3js.org/us-10m.v1.json` and uses `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries as SVG paths. The code filters state features against a predefined set of FIPS IDs, though the visual highlighting of selected states is commented out.

Loading thumbnail…

Let's make a map with D3.js!

This visualization displays U.S. states as a choropleth map, highlighting a subset of selected state IDs in orange while rendering all others in gray. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON data loaded from `us-10m.v1.json`. The code filters state features against a predefined set and applies the `.selected` CSS class, though the commented-out section means the highlighting is not rendered in the final output.

Loading thumbnail…

So... here is the Earth

This interactive map shows the Earth with countries rendered in green and the ocean in blue. Clicking a country fills it in gold and displays its name in the upper-left corner. The visualization uses D3 v5 with the geoNaturalEarth1 projection and geoPath for landmasses, while topojson converts the world atlas data. Country names come from a TSV file, and interactions are handled through D3’s event system.

Loading thumbnail…

Its finally working

This interactive map colors countries red by default, turning a clicked country green. Built with D3 v5 and TopoJSON, it loads world geographic data from the world-atlas package and renders it as SVG paths via a `geoNaturalEarth1` projection. Click handlers on each country path trigger a re-render, updating the fill based on the selected country's name from the TSV metadata.

Loading thumbnail…

Avocados Scatter Plot With Menus

This interactive scatter plot visualizes avocado pricing data from the Hass Avocado dataset on Kaggle. Two dropdown menus allow users to select which variables to plot on the x- and y-axes, dynamically updating the visualization. The plot uses D3.js v5's `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks, with circles animating via `transition().duration(1000).delay()`. The CSV data is loaded from a remote URL, and the scatter plot is rendered as SVG with axes labels and a grid of tick lines.

Loading thumbnail…

Cars Scatter Plot With Menus

This interactive scatter plot visualizes car data from the UCI Auto MPG dataset, with axes controlled by two dropdown menus that let users select which numeric columns to compare. The visualization uses D3 v5 with SVG rendering, employing d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a transition delay animation that sequentially animates each circle from the center to its final position when the data updates.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, users select which columns map to the X and Y axes, with the chart updating dynamically. The D3 v5 code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. SVG circles animate via `transition().duration(2000).delay()`, while axis labels and gridlines render from selected attributes like horsepower or weight.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with users selecting X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated circle rendering. The `dropdownMenu` function binds `<select>` elements to column options, while `scatterPlot` handles SVG axes, labels, and data point transitions.

Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes the relationship between horsepower and weight for cars, with each point colored by the car's origin and rendered as an SVG circle. The visualization enables interactive filtering through a color legend: clicking a region on the legend highlights cars from that origin at full opacity while dimming all others. Built with D3 v5, the code uses `scaleOrdinal`, `schemeSpectral`, `scaleLinear`, `axisLeft`, `axisBottom`, and custom `colorLegend` and `scatterPlot` functions to render axes, grid lines, and the plot. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via `d3.csv`.

Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing horsepower versus weight for individual car models. Each point is colored by the car’s origin using d3.scaleOrdinal with the schemeSpectral palette. The visualization includes an interactive color legend that filters the displayed data points; clicking a legend category dims non-matching points. The implementation uses d3.scaleLinear axes, d3.axisBottom and d3.axisLeft for gridlines and labels, and d3.select to manage SVG elements and event handling.

Loading thumbnail…

Swanton Choropleth Map

This choropleth map visualizes global income groups by country, coloring each nation according to its income classification on a natural Earth projection. The map supports interactive zooming and panning, with a legend displaying the categorical color scale. Built with D3 v5, it uses `geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` with `schemeSpectral` for colors, and loads country boundaries from the world-atlas TopoJSON dataset, joining income data from a TSV file. Hovering reveals country names and income groups via SVG titles.

Loading thumbnail…

Swanton Choropleth Map

This choropleth map uses color to depict the economic classification of each country, rendered as an SVG via D3's `geoPath` and `geoNaturalEarth1` projection. Hovering a country turns it gray and reveals its name and economy in a tooltip. The map loads world geography and tabular data from the world-atlas package, and displays a color legend built with custom `colorLegend` logic. The visualization supports zooming and panning through D3's `zoom` component.

Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit demonstrates special cases of the General Update Pattern for data joins. Animated transitions show five apples shrinking, disappearing, and morphing into lemons, with each fruit’s radius and label size changing accordingly. The example uses d3-selection with enter, merge, and exit methods, ordinal scales for color and radius, and d3-transition with a 1000-millisecond duration to animate attribute changes on SVG circles and text elements.

Loading thumbnail…

ywontthiswork

An interactive world map colors every country red, turning a selected country green upon click. Built with D3 v5 and TopoJSON, it loads country boundaries from the World Atlas 50m dataset and pairs them with names from a TSV file. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with country paths rendered as SVG elements.

Loading thumbnail…

ywontthiswork

This example shows an interactive world map where clicking a country turns it green while all other countries remain red, displaying a selected-country highlighting behavior. The visualization loads geographic data from the world-atlas TopoJSON dataset and country names from a corresponding TSV file, then renders the map using d3.geoPath with a d3.geoNaturalEarth1 projection. Click events trigger a re-render that updates fill colors based on the selected country’s ID. The code uses d3.json, d3.tsv, and d3.select to manage data loading and SVG elements.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with a natural Earth projection, where clicking a country fills it red using d3.geoPath and d3.geoNaturalEarth1. It loads country boundaries from TopoJSON and country names from TSV data via d3.json and d3.tsv, then binds click events to SVG paths. The fill color updates based on a selected country ID, using a simple render function with selection.merge to handle updates.

Loading thumbnail…

Avocados Scatter Plot

This scatter plot displays weekly avocado sales, showing the relationship between total volume sold and average price from 2016 to 2018, with each circle colored by year. Data comes from the Hass Avocado Board dataset. The visualization uses D3 v5 with `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` for ticks. The SVG rendering includes custom axis labels, a title, and a legend built from the color scale domain.

Loading thumbnail…

Hover Over Country to See Name

This interactive world map renders country boundaries as SVG paths using D3’s `geoPath` and `geoNaturalEarth1` projection. Hovering over a country reveals its name via an SVG `<title>` tooltip, populated from world-atlas TSV data keyed by ISO country code. Clicking a country highlights its outline in red by restyling the path’s stroke attribute. The example uses D3 v5, topojson for feature extraction, and includes a blue sphere backdrop.

Loading thumbnail…

ABV Craft Beer

This scatterplot-style line chart visualizes the relationship between alcohol by volume (ABV) and ounces per can for a collection of craft beers, sourced from the Craft Cans Kaggle dataset. The visualization, built with D3 v5, sorts beers by ABV and uses a basis curve to smooth both the area fill and the line path, which are generated via `d3.area` and `d3.line`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, with gridlines and labels, and the SVG output includes a title and clearly labeled axes for ABV and ounces.

Loading thumbnail…

Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a data-bound bowl of fruit, showing how elements enter, exit, and update smoothly. It uses D3 v5’s data join with key functions, `transition().duration()`, and ordinal scales for color and radius. The SVG circles represent apples and lemons, with apples being eaten and replaced over time. The code imports `scaleOrdinal` from D3 and executes timed state changes via `setTimeout` to trigger render updates.

Loading thumbnail…

ABV Craft Beer

This scatterplot displays the relationship between ABV (alcohol by volume) and ounces per can for craft beers, with each point representing a beer sorted by ABV. The D3.js v5 code uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for gridlines, and `area` with `curveBasis` to generate a smooth curve over the data. The chart also draws a maroon line path using `line` with the same basis curve. The data is loaded from a CSV via `csv`, with ABV values multiplied by 100, and renders as SVG within a 960x500 canvas.

Loading thumbnail…

World Population Area Chart

An area chart displays world population growth over time using a maroon filled region. The visualization uses D3 v5 to render an SVG, with a time-scaled x-axis and a linear y-axis. Axis grid lines extend across the chart, and axis labels are rotated. The population data is loaded from an external CSV file, and the area path is generated using the d3.area() API with a basis curve smoothing.

Loading thumbnail…

Avocados Scatter Plot

This scatter plot visualizes the relationship between the average price and total volume of avocados sold weekly from 2016 to 2018, with each point colored by year using a d3.scaleOrdinal legend. The chart loads data from a CSV file via d3.csv, converts numeric fields, and renders SVG circles positioned by d3.scaleLinear scales. Axes are generated with d3.axisLeft and d3.axisBottom, including tick lines and custom axis labels, while the legend is manually drawn as rectangles and text within the SVG.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between the total volume of avocados sold and their average price, with each point representing a weekly observation from 2016 to 2018, colored by year. The visualization uses D3 v5's scaleLinear, axisBottom, axisLeft, and scaleOrdinal APIs within an SVG rendering. Data is loaded from a CSV file containing Hass Avocado Board pricing information, processed by converting string values to numbers and normalizing volume to millions. The chart includes axes with grid lines, a title, and a legend indicating the color mapping for each year.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between total avocado volume and average price across years, with each circle colored by year (2016, 2017, or 2018) using a legend. The visualization uses D3 v5 with `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` for gridlines. Data comes from an external CSV file loaded via `d3.csv`, with SVG rendering for circles, axes, and labels, and styling applied through CSS.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between total avocado volume and average price across years, with each circle colored by year (2016, 2017, or 2018) using a legend. The visualization uses D3 v5 with `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` for gridlines. Data comes from an external CSV file loaded via `d3.csv`, with SVG rendering for circles, axes, and labels, and styling applied through CSS.

Loading thumbnail…

Data Table Summary

This example displays a text-based summary of a beer dataset loaded from a CSV file, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows as formatted JSON. The code uses D3 v5 methods `select` and `csv` to fetch and parse the data, then appends `pre` elements to the body. The text is styled with a black background and green monospace font via CSS. The dataset originates from Jean-Nicholas Hould’s craft-cans collection on Kaggle.

Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Loading thumbnail…

Data Table Summary

This data-table summary displays the basic dimensions of a Walmart sales dataset: the total row count, column count, and file size in kilobytes, followed by a JSON-formatted preview of the first 10 rows. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, then appends plain-text `<pre>` elements to a black page with green monospaced text. Data originates from a Kaggle-hosted CSV file loaded asynchronously from an external URL.

Loading thumbnail…

Making a Bar Chart

This example visualizes the top 10 most-played Pearl Jam songs as a horizontal bar chart, sourced from setlist.fm. The bars, rendered as SVG rectangles, are encoded with each song's play count. The code uses D3 v5 API methods including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, compute scales, and draw the chart.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most-played live Pearl Jam songs, ordered by play count from Even Flow down to Given to Fly. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render axes. Data loads via `d3.csv` and is rendered as SVG rectangles with steelblue fill. The code imports specific D3 modules and applies margins to position the chart within a 960×500 SVG canvas.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the top 10 most-played live Pearl Jam songs by play count, using data from a CSV file. Built with D3 v5, it loads `data.csv` via the `csv` method, then renders SVG rectangles using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axes added via `axisLeft` and `axisBottom`. The chart is styled with steelblue bars and includes a YouTube video embed in the README.