Skip to main content
Start free

Send feedback

Tell us what works and what could be better. We read every submission.

Send feedback

Tell us what works and what could be better. We read every submission.

A

anqi-lu

@anqi-lu·14 public vizzes

Loading thumbnail…

d3 mouseover multi-line chart

An interactive multi-line chart displays temperature readings for New York, San Francisco, and Austin over time, with each city represented by a distinct colored line and legend. The visualization uses D3 v3 to render SVG elements, including axes, lines, and text labels, while parsing tab-separated data via `d3.tsv.parse`. Mouseover effects, implemented with D3 event handlers, highlight the closest data point and display a vertical guide line, enhancing comparison across the three series.

Nov 8, 2017
Loading thumbnail…

Debounced slider

Two parallel sliders demonstrate the visual difference between immediate and debounced drag updates. The gray slider updates a year-range caption on every pointer movement, while the red slider applies a 200-millisecond delay via `d3.drag` and a custom `delayedUpdatePlot` callback. Both use `d3.scaleTime` with a domain from 1997 to 2016, rendered as SVG rectangles and an axis. The example highlights how debouncing reduces update frequency during continuous interaction, using D3 v4’s event handling.

Nov 7, 2017
Loading thumbnail…

Wordcloud Movie Plot Keywords v4

This visualization displays a word cloud of movie plot keywords, where each keyword is sized proportionally to its frequency of occurrence across the dataset. The words are laid out using the d3.layout.cloud algorithm by Jason Davies, which places terms in a spiral pattern while avoiding collisions. The canvas is rendered with D3 v4 and includes a subtle animation as words appear. Keywords are loaded from an external JSON file, aggregated by total count, and visualized in a responsive container that adapts to the viewport. The layout uses a randomized placement with a spiral search to pack words tightly, resulting in an engaging, colorful typographic summary of recurring plot themes. The animation shows the words gradually settling into their final positions, and the visualization is generated on an HTML5 canvas for efficient rendering of many text elements.

Oct 26, 2017
Loading thumbnail…

Pie Chart

This donut chart visualizes the number of movies by country from the TMDB 5000 Movie Dataset. Each slice represents a country, with its arc length proportional to the movie count. Countries with more than 50 movies are highlighted individually, while all others are grouped into an "Other" category, making the visualization easier to read. Hovering over a slice reveals a tooltip with the exact movie count. The chart is rendered as an SVG using D3 v4, with a color legend to identify countries, and the data was preprocessed with Python before being loaded from a JSON file.

Oct 25, 2017
Loading thumbnail…

Wordcloud of Movie Plot Keywords

This interactive word cloud visualizes the top 20 keywords extracted from movie plots in the TMDB 5000 Movie Dataset. Each keyword is displayed in Impact font, with font size proportional to its frequency in the dataset, using a linear scale mapping counts to sizes. Keywords are positioned non-overlappingly via the d3-cloud layout algorithm, which uses a collision-detection board and an Archimedean spiral to place words. The visualization is rendered in SVG and updates incrementally with animation, filling the full browser viewport. The color of each word is assigned using a categorical color scale. The data was preprocessed from the original Kaggle dataset using Python. This example was forked from blockspring's D3 Wordcloud block and uses the cloud.js word cloud layout by Jason Davies. The top 20 movie plot keywords are displayed. This example was contributed by anqi-lu and is licensed under MIT.# Wordcloud of Movie Plot Keywords This interactive word cloud visualizes the top 20 most frequently occurring keywords in movie plots, drawn from the TMDB 5000 Movie Dataset. Keyword frequency is encoded by font size on a linear scale from 10 to 100 pixels, with all words rendered horizontally in Impact typeface and colored using a categorical 20-color palette. The visualization uses a word-cloud layout algorithm (by Jason Davies, based on Jonathan Feinberg's approach) to position words without overlap, with an animated placement sequence as words spiral outward from the center. The full-screen SVG rendering gives the visualization a strong, immediate impact, with more common plot keywords appearing prominently. The dataset was preprocessed with Python to extract keyword frequencies from the TMDB 5000 movies. This example was adapted from blockspring's D3 Wordcloud block. The code includes the word cloud layout implementation, an HTML page that loads data and renders the visualization, and preprocessed JSON data. Rendering is done with D3 and SVG, with the layout algorithm animating word placement in a canvas-like fashion. The visualization uses a categorical color scale and the Impact font for all words. License: MIT.# Wordcloud of Movie Plot Keywords This interactive word cloud visualizes the 20 most frequent keywords extracted from movie plots in the TMDB 5000 Movie Dataset. Each keyword is displayed with a font size proportional to its frequency across all films, making dominant themes immediately visible. The visualization adapts to the full browser window and uses the Impact font for a bold, cinematic feel. Words are placed using the classic Jason Davies word-cloud layout algorithm (based on Jonathan Feinberg's spiral placement technique), with colors assigned from a categorical palette. The layout animates as words settle into position. The dataset was preprocessed in Python from the TMDB 5000 Movie Dataset on Kaggle. This example was forked from blockspring's D3 Wordcloud block and uses the MIT-licensed cloud.js layout library. It renders as an SVG animation and scales word size linearly with keyword frequency.# Wordcloud of Movie Plot Keywords An animated word cloud visualizing the top 20 keywords extracted from movie plots in the TMDB 5000 Movie Dataset. Each word's font size reflects its frequency across all films in the dataset, rendered with an Impact typeface on a full-screen canvas. The visualization uses the D3 word-cloud layout by Jason Davies, with keywords loaded from a preprocessed JSON file. Words are placed using an archimedean spiral algorithm and colored via a categorical color scale, creating a clean, readable snapshot of the most common thematic elements in modern cinema. Built with D3.js and jQuery, and animated through the cloud layout's time-interval stepping. Now write a short summary (2-4 sentences) in the third person, suitable for a gallery entry, that includes as much of the provided information as possible. Keep it concise but informative. Mention: - the key visual element - the topic - the data source - the rendering technology - the animation - the license Do not mention the author or code files. Do not mention the word "license" or "licensed". --- Write the summary in English, matching the style of a data-visualization gallery entry. Use Markdown. It should be 1 paragraph, not bulleted or bolded. Keep it under 100 words. Do not include any URLs.This animated wordcloud visualizes the top 20 keywords in movie plots from the TMDB 5000 Movie Dataset. It is built with D3 and the Jason Davies word-cloud layout, rendering an SVG word cloud where keyword frequency determines font size. The data was preprocessed with Python from the TMDB 5000 dataset, and the visualization uses a categorical color scale to distinguish terms. The animation shows words being placed into the cloud in real time, offering an engaging view of recurring plot themes in popular movies.

Oct 25, 2017
Loading thumbnail…

Basic Scatter Plot

This interactive scatter plot visualizes the Wisconsin breast cancer dataset, displaying two distinct clusters corresponding to benign and malignant diagnoses. The visualization is built with D3 v4 and rendered as an SVG, featuring brush-and-zoom functionality that allows users to explore the data by panning and scaling the view. Each point represents a cell nucleus, colored to differentiate the two diagnostic categories (B for benign, M for malignant), and the plot includes a color legend for reference. The implementation is based on Mike Bostock's Brush & Zoom II example and Curran's Stylized Scatter Plot with Color Legend.

Oct 24, 2017
Loading thumbnail…

Basic Scatter Plot

This responsive scatter plot visualizes the Wisconsin breast cancer dataset, displaying 569 cell nucleus samples plotted by radius_mean and texture_mean. Each point represents a tumor, colored by diagnosis: blue for benign (B) and red for malignant (M). The visualization uses D3 v4 with SVG rendering, and the plot dynamically resizes along with the data point sizes when the window dimensions change. Two distinct clusters emerge in the data, illustrating the separation between benign and malignant cases based on the selected features.

Oct 16, 2017
Loading thumbnail…

General Update Pattern Notes

This example demonstrates D3’s general update pattern by binding an array of numbers to rectangle elements in an SVG canvas. The code calls the render function three times—first with one value, then with five, and finally with an empty array—to show how the enter, update, and exit selections add, modify, and remove rectangles accordingly. It uses d3.select, selection.data, selection.enter, selection.exit, and selection.merge to manage the transitions between states. The rectangles are positioned horizontally by their data values, with a fixed vertical offset and dimensions.

Oct 13, 2017
Loading thumbnail…

Temperature Visualization

This visualization shows global monthly land temperatures from 1750 to the present using an SVG line chart. The primary series, LandAverageTemperature, is plotted across time with a smooth path, revealing seasonal cycles and long-term warming trends. Uncertainty is conveyed through a subtle band drawn from the LandAverageTemperatureUncertainty values, and the chart is built with D3 v4 to map the CSV data to scales and axes. Missing values are skipped, allowing the line to continue across gaps in the record. The MIT-licensed example is implemented in pure SVG, providing a clean, minimal look at over 250 years of climate data.

Oct 2, 2017
Loading thumbnail…

Marks as Links - Containment

Eight circles and a set of semi-transparent gray squares illustrate the concept of containment as a visual channel for marks as links. The animation cycles through three square layouts, adding squares one at a time to show how the circles’ group membership changes with each new container. Built with D3 v4, the SVG renderer updates the `rect` and `circle` elements through data joins, using `enter()`, `merge()`, and `exit()` to handle the dynamic square data. The circles remain fixed while the containers change, emphasizing the spatial relationship between marks and their enclosing regions.

Sep 24, 2017
Loading thumbnail…

Data Summary

This visualization displays global temperature records from 1750 onward as a multi-series line chart, mapping monthly temperature readings over time. The primary line tracks the land average temperature, with an accompanying band showing measurement uncertainty. A second line plots the land-and-ocean average temperature, while the dataset’s additional columns for maximum and minimum temperatures provide context. The chart uses an SVG line path built with d3.v4 to show the long-term fluctuations and overall warming trend across more than two and a half centuries of climate data.

Sep 23, 2017
Loading thumbnail…

Basic Scatter Plot

This scatter plot visualizes the Wisconsin breast cancer dataset, plotting two key measurements—radius mean and texture mean—for each cell nucleus. Benign and malignant samples are distinguished by color, with a color legend generated using d3-legend. The visualization reveals two distinct clusters corresponding to the diagnostic classes, rendered as SVG circles via D3 v4. The data, originally from the UCI Machine Learning Repository, includes 30 computed features for each nucleus, though only two are shown here to illustrate the separation between benign and malignant cases.

Sep 17, 2017
Loading thumbnail…

Intro to d3 Tutorial Notes

This example demonstrates D3.js v4 data binding and scale fundamentals. It shows how ordinal and linear scales transform data values, then uses a repeated render cycle to update SVG rectangles with different colors (green, gold, blue) as the dataset changes size over timed intervals. The code constructs an SVG canvas, applies margin-based grouping, and references axis groups, while also illustrating the enter-update-exit pattern. It uses `d3.scaleLinear`, `d3.scaleOrdinal`, and the `selectAll().data()` binding approach to manage dynamic visual updates.

Sep 16, 2017
Loading thumbnail…

Top Megacities Population

This bar chart displays the populations of the world’s top 20 megacities, with each bar colored by continent—red for Asia, blue for North America, green for South America, and yellow for Africa—revealing that most megacities are in Asia. Using D3 v4 with SVG, the code applies `d3.scaleLinear` for the value axis, `d3.scaleBand` for the categorical city labels, and binds data to grouped `<g>` elements with rectangles and text labels. The dataset originates from Wikipedia’s Megacity page, and hover effects darken bars via CSS.

Sep 15, 2017