Skip to main content
Log in
深

深度碎片

@EmbraceLife·107 public vizzes

Loading thumbnail…

Gist 0fbf0f6cbe67ab63e90d47d65cda05ea

This visualization demonstrates a three-stage search pipeline that locates content across numerous blog-post dialogs without loading entire files. Using Python's async/await syntax, the code calls three functions—`get_first_notes`, `get_section_summaries`, and `get_section_content`—in bulk loops to filter a folder down to relevant sections, reducing token usage from tens of thousands to roughly six thousand. The transitions between stages are driven by agent analysis of summaries, with each stage executing as a single kernel call.

Sep 27, 2026
Loading thumbnail…

{p.title}

This animated visualization illustrates the structure and interactive features of a FastHTML-based blogging application, rendering the flow from notebook files to styled HTML pages. The code demonstrates how Jupyter notebooks are parsed and converted into markdown with embedded HTML, using `mistletoe` for markdown processing and `fastcore.nbio` for file handling. The application manages subscriber data through a SQLite database via `fastlite`, while the user interface is built with `fasthtml.common` and `monsterui.all` components. The animation highlights the templating system that transforms content into a complete blog layout, including navigation, article rendering, and social media links.

Aug 28, 2026
Loading thumbnail…

Gist 1f62254390d4e6392b51eb4602a3ab9f

This example explains acute kidney injury (AKI) through a dialogue between a character named Kenny and a kidney-shaped persona. The text breaks down kidney function, the three types of AKI (prerenal, postrenal, intrinsic), detection methods, and treatments like dialysis. The visualization is presented as a narrative markdown document rather than an interactive graphic, using text and emoji-like characters. This plain-text format serves as the primary rendering method, with no data or external libraries involved.

Mar 18, 2025
Loading thumbnail…

Gist 0056a4ea42e66205cfe3cf26e3a6f908

This example presents a Socratic dialogue that explains the mathematics behind digital image editing, specifically how cloning and blending tools work. The rendered document uses HTML and CSS to format the conversation between Kenny and George Polya, covering concepts like the Laplace operator, the Poisson equation for seamless blending, and the biharmonic equation used in advanced healing brushes. The text describes image editing as a mathematical process of solving partial differential equations to naturally diffuse cloned pixels into their surroundings.

Mar 18, 2025
Loading thumbnail…

Gist 0e5ae22a48dcab9747f0fed6d90e4749

This example stages a dialogue about two approaches to learning a software library: mastering the API for rapid development versus studying the source code for deep, long-term flexibility. The code examines the trade-offs between quick delivery and the ability to extend or debug a library, using a conversational format to compare the benefit of immediate working results with the empowerment of understanding the underlying mechanics. It ultimately suggests a combined strategy, starting with the API and gradually moving into the internals as needs evolve. No external data or rendering libraries, such as d3 or Three.js, are present in the code.

Aug 22, 2024
Loading thumbnail…

Gist 731c0162a924e371a567e83d242d7fa2

This example shows a Python utility that generates `.pyi` stub files from source code by parsing and transforming Abstract Syntax Trees. The tool processes functions, classes, and decorators—specifically handling `@patch` and `@delegates`—ellipsizing bodies and cleaning annotations based on local type definitions. It uses the `ast` module for parsing, `inspect.signature` for extracting function parameters, and `fastcore` utilities like `@patch` and `delegates`. The script reads a Python file, walks the tree to collect class names, imports the module dynamically, and rewrites the tree before writing the stubbed output.

Aug 22, 2024
Loading thumbnail…

Gist 87f69df227eafef3f4fc3774184404e2

This example shows a collection of Python metaclasses and decorators that manipulate class creation, initialization, and function signatures. The code defines metaclasses like `FixSigMeta`, which adjusts `__signature__` based on overridden `__init__` methods, and `PrePostInitMeta`, which calls optional `__pre_init__` and `__post_init__` hooks. Decorators such as `delegates` and `use_kwargs_dict` rewrite `**kwargs` parameters by borrowing signatures from other functions or classes. The implementation relies on the `inspect` module to read and replace `Parameter` objects, with no external data source or rendering involved.

Aug 19, 2024
Loading thumbnail…

Gist b33154065c8c297e8bb1ee38a500a7f6

This example shows how to convert Python type annotations into a structured prompt that guides users through solving problems with the fastcore library’s py2pyi module. It uses plain text instructions and analogies to explain the module’s role in generating type stubs. The visualization relies on a text-based conversational interface, not graphical rendering, to break down tasks into beginner-friendly steps.

Aug 19, 2024
Loading thumbnail…

Gist f42c03466d97fd61bbbe1eadeb3ebaa9

A FastHTML web application serves a todo list, tracking tasks in an SQLite database through the fastlite and sqlite_minutils libraries. The interface provides toggle endpoints that route to Python functions, with changes reflected live via a WebSocket live-reload connection. When a user requests a specific todo by integer ID, the application attempts to query the database, but the operation fails with a TypeError because the query construction tries to concatenate an integer directly into a SQL string without converting it to text first. The visualization shows the resulting 500 Internal Server Error traceback.

Aug 8, 2024
Loading thumbnail…

Gist 8cbf27ad82dfa5db137efee33e258809

This example contrasts traditional full-stack web development with the FastHTML framework, showing how FastHTML unifies front-end and back-end in Python. It highlights how FastHTML maps HTML elements directly to Python function syntax, such as `H1('Hello ', name)`, eliminating the need for JSX. The description also demonstrates FastHTML’s deeper integration with HTMX, enabling server-driven interactivity without a virtual DOM or complex state management, and its reliance on Uvicorn and Starlette for asynchronous performance. The code references React, Angular, Vue, and Django for comparison.

Aug 4, 2024
Loading thumbnail…

Gist ffc170d3bf3e7ca6ced3f5585f3f97ef

This notebook explores the internal structure of the fastai library by tracing the import chain triggered by `from fastai.vision.all import *`. It shows the file listings and source code of key modules like `vision/all.py`, `basics.py`, and `callback/all.py`, revealing the hierarchical organization of the framework. Using shell commands (`ls`, `less`) within Jupyter cells, it documents how the vision module re-exports components from data, augment, learner, and callback subpackages, providing a code-level walkthrough of fastai's architecture.

Jun 18, 2022
Loading thumbnail…

The final step to get mamba ready: init the mamba

The example initializes the Mamba package manager by detecting the active shell and running `conda init` for zsh, bash, or fish. It reads the `$SHELL` variable to choose the correct shell name, then calls `~/mambaforge/bin/conda init` with that argument. The script includes commented-out logic to download a Mambaforge installer via `curl` based on OS and architecture, but the active code only performs the initialization. It concludes by instructing the user to reopen the terminal.

May 15, 2022
Loading thumbnail…

d3-selection

This example shows how d3-selection enables data-driven transformation of the DOM by setting attributes, styles, and properties on selected elements. The code demonstrates method chaining, where operations like `d3.selectAll("p").attr("class", "graf").style("color", "red")` apply multiple changes concisely. It also illustrates the distinction between methods that return the current selection versus new ones, using indentation conventions to reveal shifts in context. The document serves as a reference for the d3-selection module’s API, covering areas such as installing, data joins, and enter/exit selections.

Nov 16, 2019
Loading thumbnail…

d3-selection

This example presents the official documentation for the d3-selection module, rendered as a static HTML page with a table of contents and code snippets. It demonstrates how selections enable data-driven manipulation of the DOM through methods like `selection.attr` and `selection.style`, supporting method chaining for concise operation sequences. The page explains the data join concept with `selection.enter` and `selection.exit` for adding or removing elements. The code highlights core APIs such as `d3.selectAll`, `d3.select`, and `selection.append`, and is styled using the StackEdit CSS framework.

Nov 16, 2019
Loading thumbnail…

weather_data

This example visualizes weather data from a JSON file for a week of October 2018, showing daily summaries, icons, and key metrics such as temperature, humidity, wind speed, and precipitation. Rendered using D3.js, it employs linear scales for temperature and time, and axis generators like `d3.axisLeft` and `d3.axisBottom` to plot a line chart of temperature highs and lows. Data points include timestamps in Unix format, with temperature values in Fahrenheit. The chart also displays daily weather icons and summaries, extracting data from the `wh_weather_data.json` source. The visualization highlights trends in temperature fluctuations and weather conditions across each date.

Oct 24, 2019
Loading thumbnail…

terminal error message by `./mach run --jsdebugger`

This visualization shows the full terminal output from launching Firefox with `./mach run --jsdebugger`, capturing the sequence of warnings and errors as the browser starts. The log displays addon manifest permission warnings, connection details for the Browser Toolbox debugger server on port 61853, and subsequent failures downloading system add-ons like OpenH264 and WidevineCDM. It presents the raw text chronologically, with timestamps and log levels, using no additional libraries—only the plain-text data from the gist is rendered directly, preserving the original structure and stack traces for troubleshooting.

Sep 20, 2019
Loading thumbnail…

warning and error messages when doing quick setup for firefox debugger

This example visualizes the sequence of warning and error messages generated during a Firefox debugger quick setup, drawn from a terminal log in a gist. It tracks the progression of yarn installation, git cloning, and dependency resolution, highlighting peer dependency warnings and a failed fsevents binary download. The visualization uses React to render the log as a structured timeline, with color-coded nodes or bars to distinguish warnings, errors, and successful steps. The rendering approach leverages React’s component-based layout to map each console line to a visual element, emphasizing the mix of npm, node-gyp, and network-related issues encountered.

Sep 5, 2019
Loading thumbnail…

runWithDebugger added dependencies

This example shows a JavaScript implementation of a dependency-injection system called `librarySystem`, which manages named libraries and their dependencies. The code defines a function that stores library definitions in a `libraryStorage` object, allowing callbacks to receive resolved dependency libraries as arguments. It demonstrates how to register libraries with empty dependency arrays and how to retrieve them by name, as seen in the commented examples. The system uses the `window.myLibs` assignment to expose the `librarySystem` function globally.

Sep 3, 2019
Loading thumbnail…

run with debugger

This example demonstrates a JavaScript debugging utility called `runWithDebugger`, which invokes a callback function while pausing execution at a `debugger` statement. The code defines multiple test functions, such as `sayHi`, `sayHiTo`, and `sayFullName`, that log messages to the console via `console.log`. The utility handles zero to four arguments by explicitly branching on the length of the supplied arguments array, then calls the callback with the appropriate parameters. The page relies solely on native browser debugging tools and plain JavaScript, with no external libraries or data sources.

Aug 31, 2019
Loading thumbnail…

Cars Report

This example demonstrates generating a text-based report of cars, filtering a hardcoded JSON dataset to display only vehicles priced under $2,000. The interface shows a loading message before asynchronously fetching the data. It uses JavaScript objects, arrays, and modules, with asynchronous operations powered by a Promise and `setTimeout` to simulate a network request. The report is formatted through custom functions, `formatCar` and `generateReport`, using array methods like `filter`, `map`, and `join`. The result is displayed in an HTML `<pre>` element, styled for readability.

Jun 30, 2019
Loading thumbnail…

Experiment torch.tensor

This notebook explores the PyTorch library by listing the attributes of the `torch` module and the `torch.tensor` object, revealing the available classes, functions, and constants. The author also inspects `torch._utils` to understand its internal helpers, noting a discrepancy about a hidden function. The exploration uses simple Python `dir()` calls and string joins within Jupyter cells, with outputs shown as plain text lists. No data visualization is actually created; the "experiment" is purely an API inspection.

Mar 21, 2017
Loading thumbnail…

log-loss function plotting is not working properly

This example shows a log-loss function plot that fails to render correctly, displaying a distorted curve instead of the expected smooth descent. The visualization uses Vue to manage the plotting logic, while the underlying math and rendering rely on a Jupyter notebook environment. The code attempts to compute and display the loss values, but the output image appears broken, with the curve’s trajectory disrupted by rendering errors. The plot likely depends on standard numerical libraries for calculation, though the specific API is not explicitly referenced in the visible code.

Jan 4, 2017
Loading thumbnail…

Vgg16_catsdogsRedux_sampleSize

This example profiles a fast.ai deep learning workflow for the Dogs vs. Cats Redux Kaggle competition. It documents the notebook setup, including directory navigation with `%pwd` and `%cd` and imports from `utils` and `vgg16` modules using the Theano backend. The visualization shows the code structure and data organization as recorded in the notebook, using Vue.js and WebGL for rendering. The gist author, EmbraceLife, provides the file directly as a source, illustrating the data preparation steps before model training.

Jan 1, 2017
Loading thumbnail…

Gist 483c501b7e9c20d716dbcad0ad5ee1c4

This example demonstrates how to use Crossfilter to group payment records by payment type and summarize their total transaction volume. The code creates a Crossfilter dimension for the `type` field, then builds a group that reduces the data by summing the `total` attribute. It applies custom reduce functions to maintain a running count and total, and orders the grouped results by total value to retrieve the top three payment types. The visualization relies on the Crossfilter API, including `dimension`, `group`, `reduce`, `order`, and `top` methods, while using a hardcoded array of twelve payment objects as the data source.

Aug 19, 2016
Loading thumbnail…

Gist fe86959fa663f498cdc0aac9d9e02704

This example demonstrates the core functionality of the crossfilter.js library for multidimensional data analysis. It defines a dataset of payment transactions with attributes like date, quantity, total, tip, payment type, and product IDs, then performs grouping and reduction operations using the `dimension`, `group`, `reduceSum`, `top`, and `filter` APIs. The code logs output to the console, showing the payment volume by type and exploring total-based groupings, filters, and product queries. The visualization is entirely console-based, with no chart rendering, using d3.v3 for data functions and crossfilter.js for the cross-filtering logic.

Aug 19, 2016
Loading thumbnail…

第23回参議院議員通常選挙 比例代表

This interactive visualization shows the results of Japan’s 2013 House of Councillors proportional representation election, comparing vote counts by party, individual candidate, and winning seats. Users toggle between these modes via radio buttons. The chart uses stacked bar charts built with D3 v4, where each bar represents a party and segments show candidate votes. It loads data from a CSV file and employs `d3.scaleBand`, `d3.scaleLinear`, and d3-tip for tooltips, with an animated transition when switching modes.

Aug 13, 2016
Loading thumbnail…

D3.chart Boilerplate Example

A multi-panel financial chart displays Apple stock price trends from 2010, with closing prices, a moving average line, and trade volume bars in the main view. A separate brushable context area below enables zooming and panning across the full date range. Built with D3 v4, the visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.brushX` to render the SVG elements from the included aapl.csv dataset. Styling is defined in separate CSS and Stylus files.

Aug 13, 2016
Loading thumbnail…

D3.chart Boilerplate Example

A D3.chart boilerplate example displays Apple's stock price and 30-day average as two smooth lines over a time series, with a context area chart and a linked brush for zooming and panning the main chart. A bar chart of trading volume sits below, and the interface includes a legend with the date range. The code uses d3.scaleTime, d3.line with curveMonotoneX, d3.area, d3.brushX, and d3.axisBottom/axisLeft to render the SVG visualization, loading data from a local aapl.csv file.

Aug 12, 2016
Loading thumbnail…

Gist 21cc0f29827dacf30a658ef7763c19e7

An interactive area chart displays monthly S&P 500 price data. The visualization uses a focus-and-context technique, combining a large main chart with a smaller overview panel. Users can brush a region in the context panel to zoom the focus area, or directly pan and zoom the focus chart itself. The example uses d3.brush and d3.zoom, with d3.area for the line, and d3.axisBottom and d3.axisLeft for the axes, rendering as SVG.

Aug 10, 2016
Loading thumbnail…

30. stock return chart

A single red line charts the daily "return" of a stock, indexed to a base value of 1.0, over several months in 2011. The chart maps dates on the x-axis and the return value on the y-axis, using a basis curve for smoothness. It loads and parses the data from a CSV file with `d3.csv`, formats dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis elements created using `d3.axisBottom` and `d3.axisLeft`.

Aug 10, 2016
Loading thumbnail…

Gist d66394e7abd5ee805eeb82284db3106f

This example combines d3.brush and d3.zoom to implement Focus + Context navigation for a stock price dataset. The main panel displays daily candlestick bars (open, high, low, close) and an area chart of cumulative returns, while a smaller context panel shows the full price range. Dragging the brush in the context panel updates the focus domain, and panning or zooming in the focus area conversely adjusts the brush. The code uses d3.area, d3.axisBottom, and d3.axisLeft, with data loaded from a CSV file.

Aug 9, 2016
Loading thumbnail…

D3.chart Boilerplate Example

An interactive stock chart for Apple (AAPL) displays closing price and a moving average as two overlaid lines, with a smaller context area beneath for brushing and zooming. The chart includes volume bars and a tooltip that follows the mouse cursor. Built with D3 v3, the visualization loads time-series data from a CSV and uses d3.svg.axis, d3.time.scale, d3.svg.brush, and d3.bisector to manage axes, date parsing, range selection, and mouse interaction.

Aug 9, 2016
Loading thumbnail…

Baseball Scatterplot Matrix II

This example shows a scatterplot matrix of 1986 baseball statistics, plotting pairs of traits like hits, home runs, and RBIs to reveal correlations. A slider controls the fill opacity of the SVG circles, allowing users to adjust point visibility. Built with D3 v4, it uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleCategory20` for color encoding by position. Data comes from the R package Visualizing Categorical Data.

Aug 9, 2016
Loading thumbnail…

Brush & Zoom

This example implements a focus-plus-context visualization of monthly S&P 500 closing prices. The large focus chart displays the full time series as an area chart, while a smaller context chart below it includes a draggable brush for selecting a date range; zooming is performed via a transparent overlay rectangle supporting wheel and drag interactions. It uses the d3.brushX component for the selection and d3.zoom for the pan-and-scale transform, with both updating the focus area's x-axis domain. The data is loaded from a CSV file (sp500.csv), and all graphics are rendered as SVG paths.

Aug 8, 2016
Loading thumbnail…

30. 3-stock-return-missing-data chart

This chart displays daily stock returns for three stocks—shls, ssgf, and jqr—over time, with only jqr having data while the other two series consist entirely of missing values. The line chart uses D3 v4 with SVG rendering, employing `d3.csv` for data loading, `d3.timeParse` for date parsing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for positioning and color. Lines are drawn with `d3.line` using a basis curve, and missing values are handled explicitly by returning null. Axis labels and series legends are added using `d3.axisBottom` and `d3.axisLeft`.

Aug 7, 2016
Loading thumbnail…

30. 3-stock-return chart inner data

A multi-series line chart compares the daily return of three stocks (shls, ssgf, and jqr) over roughly ten months, with values indexed to a baseline of 1. The visualization displays each stock’s relative performance as a separate colored line, with a legend labeling the end of each series. Built with D3 v4, the chart loads data from a CSV file, parses dates with `d3.timeParse`, maps dates to the x-axis using `d3.scaleTime`, and encodes return values on the y-axis with `d3.scaleLinear`. Lines are rendered as SVG paths, with color assigned via `d3.schemeCategory10` and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Aug 7, 2016
Loading thumbnail…

sync candlebar and line, 2-y-axis

This example syncs a candlestick chart of stock price data with a line chart of returns, using two separate y-axes. The left axis shows price (Open, High, Low, Close) via red and green candles for up and down days, while the right axis displays a steelblue line for the return ratio. Built with D3 v4, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `d3.curveBasis`, and `d3.axisRight`/`d3.axisLeft`, rendering as SVG from a CSV file. The legend and axis labels clarify the dual metrics.

Aug 7, 2016
Loading thumbnail…

return-line & candleBars-background

A stock chart combines candlestick bars with a pink return line overlaid on the same time axis. The candlesticks show open, high, low, and close prices, colored red when price rises and green when it falls. The return line uses a distinct y-axis scale, while the candlestick bars use the price scale. Built with D3 v4, it uses `d3.csv` to load data, `d3.timeParse` for dates, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes `rect` elements for bodies and `line` elements for wicks.

Aug 7, 2016
Loading thumbnail…

candleBars

A candlestick chart visualizes stock price movements over time, showing daily open, high, low, and close values using red and green bars. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for price values. Each candle consists of a thin line for the high-low range and a rectangle for the open-close spread, colored green for down days and red for up days. Data comes from a CSV file containing date, price, volume, and return columns.

Aug 7, 2016
Loading thumbnail…

my-workflow-d3

This multi-series line chart visualizes the daily returns of three financial variables—shls, ssgf, and jqr—over a year, with missing data represented as gaps in the lines. It uses d3.csv to load the data, d3.timeParse to parse dates, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10 for x, y, and color encodings. Rendering as SVG, it employs d3.line with curveBasis, d3.axisBottom, and d3.axisLeft. The code filters null values to avoid plotting missing points, displaying series labels near the line endpoints.

Aug 7, 2016
Loading thumbnail…

Line with Missing Data

This example demonstrates how a line chart handles missing data points by breaking the line into segments. The visualization plots a sine wave–like curve across 40 evenly spaced samples, where every fifth data point is null, causing the line to skip those gaps. The chart uses D3 v4’s `d3.line()` with a `.defined()` accessor to filter null values, while circles mark the valid points. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, with the data generated procedurally using `d3.range()` and `Math.sin`.

Aug 6, 2016
Loading thumbnail…

step5

This example shows the daily average temperatures for New York, San Francisco, and Austin over a period spanning late 2011 to early 2012. Three lines, each representing one city, are drawn using the `d3.line` API and colored via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The visualization uses `d3.tsv` to load and parse the tab-separated data, with a time scale for the x-axis and a linear scale for the y-axis. City labels are placed at the end of each line using `d3.axisBottom` and `d3.axisLeft` for the chart axes.

Aug 5, 2016
Loading thumbnail…

30. Multi-Series Line Chart

This example shows a multi-series line chart tracking the daily average temperatures of New York, San Francisco, and Austin over one year. Each city is drawn as a separate colored line, with the y-axis labeled in degrees Fahrenheit, and city names labeled at the end of their respective lines. Written with D3 v4, the visualization loads and parses a TSV file using `d3.tsv` and `d3.timeParse`, encodes time on the x-axis with `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories with `d3.scaleOrdinal` and `d3.schemeCategory10`. Lines are rendered as SVG paths via `d3.line` with a basis curve, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Aug 5, 2016
Loading thumbnail…

step4

This example shows daily temperature readings for three cities (New York, San Francisco, and Austin) across several months, plotted as three multi-series line charts. The visualization displays each city's temperature trend over time on a shared time axis and temperature scale, with color distinguishing the cities. It uses D3 v4’s `d3.tsv` to load tab-separated data, `d3.line` with `d3.curveBasis` for smooth curves, and renders the result as SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` map dates, temperatures, and city names respectively.

Aug 5, 2016
Loading thumbnail…

step3

This visualization displays daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. Three separate lines, each representing a city, are drawn over time on a common set of axes, allowing for direct comparison of temperature trends and seasonal variations across the locations. The graphic is rendered as an SVG using the D3.js v4 library, employing `d3.line` and `d3.curveBasis` to create smooth paths. The code loads tab-separated data via `d3.tsv`, parses the date column with `d3.timeParse`, and maps the categorical city names to colors using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette.

Aug 5, 2016
Loading thumbnail…

step 2

This example displays temperature data over time as a smooth blue line chart. The visualization uses D3.js v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to map dates and temperature values to screen coordinates, while `d3.line` with `d3.curveBasis` creates the curved data series. The SVG rendering uses a hidden x-axis path and a steelblue stroke, with data formatted from a `%Y%m%d` date string via `d3.timeParse`.

Aug 5, 2016
Loading thumbnail…

multi-line chart 1

This example displays a blank SVG canvas with dimensions 960 by 500 pixels. The D3.js v4 library is loaded from a CDN, but the main visualization code is commented out, leaving the chart incomplete. The commented sections show the intended structure for setting up margins, calculating width and height, and creating a group element to position within the SVG. The visible code does not yet render any data or lines, as the drawing logic remains disabled.

Aug 5, 2016
Loading thumbnail…

Template

This example presents a blank HTML page with empty styling and script sections, containing only the foundational structure for a D3.js visualization. It initializes the D3 library (version 4) from a CDN and sets up a canvas where custom JavaScript can be added. The code includes placeholder comments for adding CSS styles and D3 code, but no actual visualization or data processing is implemented. It serves as a bare template for starting a new D3 project, with no data source, rendering, or interactive behavior demonstrated.

Aug 5, 2016
Loading thumbnail…

30. Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city rendered as a distinct colored line. It uses D3 v4 to load a TSV file via `d3.tsv`, parse dates with `d3.timeParse`, and set scales for time, linear values, and color. The SVG rendering applies `d3.line` with basis curves, axes via `d3.axisBottom` and `d3.axisLeft`, and encodes city names as categorical colors using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Aug 5, 2016
Loading thumbnail…

sortable table with Bars

A sortable table displays population proportions by age group for each U.S. state, with each cell rendered as a horizontal bar whose width corresponds to the percentage of the state's total. Clicking a column header sorts the rows in descending order by that age group's share. The visualization uses D3 v3 to load CSV data, bind the table structure, and draw the bars as SVG rectangles, with hovering highlighting a row in brown. The included state.csv provides the underlying census data.

Aug 4, 2016
Loading thumbnail…

Map Projections

This interactive scatterplot compares dozens of map projections across four quantitative distortion metrics—scale, areal, angular, and accuracy at 40 degrees—plus a categorical name axis. Built with D3 v3, it renders polylines (via `d3.svg.line`) as parallel coordinates, with each projection path connecting its metric values. The code loads data from a TSV file and uses `d3.scale.ordinal` and `d3.scale.linear` to map axes, with hover interactions highlighting a single projection while dimming others.

Aug 4, 2016
Loading thumbnail…

Random Tree

A random tree grows in an animated SVG visualization as nodes are added one by one to a random parent. Using d3.layout.tree, the example applies the Reingold-Tilford tidy layout algorithm to recompute positions with each insertion, while entering nodes transition smoothly from their parent’s previous location. The code renders circles and diagonal links via d3.svg.diagonal, and stops once 500 nodes have been added.

Aug 4, 2016
Loading thumbnail…

Line Tension

The visualization shows how varying line tension affects the shape of a cardinal spline passing through a fixed set of ten data points, with tension values mapped from brown to steelblue. Each curve is rendered as a separate SVG path using `d3.svg.line` with its `tension` method set to a different value, while white circles mark the original data coordinates. The axes are generated with `d3.svg.axis`, and the data is loaded from a TSV file using `d3.tsv`. The tension range is explicitly limited to 2/3 to 1 due to a bug in D3 v3.

Aug 4, 2016
Loading thumbnail…

Area Chart

This area chart displays the daily closing price of AAPL stock from early 2011 to May 2012, with time on the x-axis and price in dollars on the y-axis. The visualization uses D3 v3 with an SVG rendering to draw a filled steelblue area under the price curve. The code loads and parses data from a TSV file using `d3.tsv` and `d3.time.format`, encodes positions with `d3.time.scale` and `d3.scale.linear`, computes domains with `d3.extent` and `d3.max`, and renders axes via `d3.svg.axis` alongside the `d3.svg.area` shape.

Aug 4, 2016
Loading thumbnail…

Bivariate Area Chart

A bivariate area chart visualizes two years of daily high and low temperatures in San Francisco, with the area between the two temperature lines filled in steelblue. The data is loaded from a TSV file using `d3.tsv`, with dates parsed via `d3.time.format` and positions encoded with `d3.time.scale` and `d3.scale.linear`. The chart uses `d3.svg.axis` for axes and `d3.svg.area` to render the filled region.

Aug 4, 2016
Loading thumbnail…

Bivariate Area Chart

This bivariate area chart visualizes daily high and low temperatures in San Francisco over two years, with the shaded region spanning the gap between these values. The data is loaded from a TSV file using `d3.tsv`, with dates parsed via `d3.time.format`. The visualization encodes time on the x-axis using `d3.time.scale` and temperature on the y-axis with `d3.scale.linear`. The area shape is rendered using `d3.svg.area`, while `d3.svg.axis` displays both axes. The chart applies conventional margins and renders as SVG, with the area filled in steelblue.

Aug 4, 2016
Loading thumbnail…

color via clipping

This line chart shows daily temperature readings from a TSV dataset spanning October 2011 to September 2012. The visualization uses clipping to split the temperature curve at the 55°F threshold, coloring the portion of the line above this value in red and the portion below in black. The code applies `d3.svg.line` with basis interpolation and two `clipPath` rectangles, each assigned to one of two line paths via the `clip-path` attribute. D3’s time and linear scales map dates and temperatures, while SVG axes display the temporal and temperature scales.

Aug 4, 2016
Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a line across seven dimensions such as fuel economy, horsepower, and weight. Users can drag axes to reorder dimensions and brush along an axis to filter which cars remain visible. Built with D3 v3, it uses `d3.svg.brush` for interactive filtering, `d3.svg.axis` for scales, and `d3.behavior.drag` to reposition axes. The SVG renders both background and foreground paths, with foreground lines dynamically hidden based on brush extents.

Aug 4, 2016
Loading thumbnail…

Sleep Cycles

This visualization plots a person’s daily sleep intervals as a time-series graph in the style of Eric Boam’s “Seven Months of Sleep,” covering seven months of synthetic data. The y-axis shows time of day from evening to morning, while the x-axis spans consecutive dates, with each sleep period rendered as a filled step-area region. The code uses d3.scaleUtc and d3.utcFormat for time axes, d3.area with a step-after curve for the shapes, and parses the CSV data with d3.utcParse. The data is generated by a Node script using d3.randomNormal.

Aug 4, 2016
Loading thumbnail…

Area with Missing Data

This example demonstrates how D3 can represent time-series data with gaps, showing a jagged line and shaded area that skip missing points entirely. The synthetic dataset deliberately inserts null values every fifth sample, and the area and line generators use the `.defined()` method to interpolate across those gaps. The visualization renders as SVG using `d3.line()` and `d3.area()` with a Cartesian coordinate system built from `d3.scaleLinear()`, plus circular dots marking only the valid data points. Axes are added via `d3.axisBottom()` and `d3.axisLeft()`.

Aug 4, 2016
Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart with inline data labels, showing values for Apples and Bananas across several years. Every point is labeled directly on the line, with a white rectangle behind the text to ensure legibility, computed via SVG’s `getBBox` and a small padding. The chart is built with D3 v4 Alpha, using `d3.requestTsv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. The final label in each series appends the series name as a bold `tspan`.

Aug 4, 2016
Loading thumbnail…

Line Chart 4.0

This line chart visualizes daily closing stock prices from April 2007 to June 2008, with time on the x-axis and price in dollars on the y-axis. The SVG rendering uses D3 v4 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate the path, while axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a tab-separated `data.tsv` file containing date and close columns, with the line styled in steelblue.

Aug 4, 2016
Loading thumbnail…

31.Multi-Line Voronoi

This multi-line chart displays monthly unemployment rates for several metropolitan areas over time, with each city represented as a gray line. Hovering over the chart highlights the nearest point on the closest line and shows the corresponding city name and value. The example uses an invisible Voronoi tessellation, created with `d3.voronoi`, to map mouse position to the nearest data point across all lines, making interaction efficient. A checkbox toggles the visibility of this Voronoi overlay, which is rendered in red for inspection. The visualization is built with D3 v4 and SVG, loading data from an external TSV file.

Aug 4, 2016
Loading thumbnail…

29. Curved Links

This example visualizes the character relationships from *Les Misérables* as a force-directed network of colored nodes and curved Bézier links. It builds on a standard D3 force layout, but inserts an invisible intermediate node into each link so that connections render with aesthetic curves rather than straight lines. The implementation uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, with each relationship’s path drawn as an SVG path using a smooth quadratic curve command. The graph is interactive, allowing users to drag nodes while the simulation continues to adjust link positions.

Aug 4, 2016
Loading thumbnail…

29. Link Nodes by Name

Six colored nodes are linked by name rather than numeric index in this force-directed graph. The SVG renders circles and lines using d3.forceSimulation with d3.forceManyBody, d3.forceLink, and positional forces. Graph data from graph.json specifies node ids like "red" and "violet", and links reference those same ids as source and target. The simulation assigns coordinates, and the ticked function updates the circle centers and line endpoints accordingly.

Aug 4, 2016
Loading thumbnail…

Demers Cartogram

This interactive SVG cartogram visualizes U.S. adult obesity rates from CDC 2008 data, representing each state as a square whose size scales with the prevalence of BMI ≥ 30. The map preserves approximate geographic locality—squares stay near their original positions—rather than maintaining adjacency between states. A custom collision force iteratively pushes overlapping rectangles apart while d3.forceSimulation with d3.forceX and d3.forceY pulls each square toward its projected Albers USA centroid. The code uses a manual collide function with four iterations per tick to separate the rect elements.

Aug 4, 2016
Loading thumbnail…

30.Beeswarm

A beeswarm plot distributes circular marks along a logarithmic x-axis to show the distribution of file sizes from the flare dataset, with a force simulation stacking points vertically to prevent overlap. A Voronoi overlay expands the hover target for each point, displaying a tooltip with the file’s ID and value. The visualization uses d3.forceSimulation with d3.forceX, d3.forceY, and d3.forceCollide, rendered as SVG, with a d3.axisBottom log scale and d3.voronoi polygons for interaction.

Aug 4, 2016
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

Aug 4, 2016
Loading thumbnail…

29. force drag 1

A force-directed network graph displays character relationships from Les Misérables, with nodes representing characters and links showing their connections. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while the links are rendered as SVG lines and nodes as circles. Users can drag any node to interact with the layout, as the code enables d3.drag on the circles with start, drag, and end handlers that fix and release the dragged node's position during the simulation.

Aug 4, 2016
Loading thumbnail…

29.Force-Directed Graph

This example shows a force-directed graph of character co-appearances in *Les Misérables*, with nodes colored by group membership and link thickness scaled by interaction weight. Using D3 v4, it loads data from `miserables.json` and runs a `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions. Nodes and links render as SVG circles and lines, and the visible `ticked` function updates their coordinates. The code also wires up `d3.drag` handlers to let viewers reposition nodes.

Aug 4, 2016
Loading thumbnail…

28. stacked bar (states on x-axis, age groups stacked)

This example visualizes the population distribution across all 50 U.S. states, broken down by seven age groups. Each state is represented on the x-axis, with the total population divided into stacked, color-coded segments for each age bracket. The data originates from a CSV file, and the visualization is built using the D3 v4 library. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.stack` to create the stacked bar chart, with rendering facilitated by SVG.

Aug 4, 2016
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The visualization uses d3.csv to parse the data, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. d3.stack computes the stacked positions, while d3.axisBottom and d3.axisLeft render the axes. The SVG rendering includes a legend and uses d3.format with SI prefixes (e.g., "10M") for population labels.

Aug 3, 2016
Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

Aug 3, 2016
Loading thumbnail…

D3: An HTML div tooltip

This example shows a bar chart of 20 numeric values that users can hover over to see a tooltip with the exact data point. The tooltip is an HTML div styled with CSS, and it appears near the cursor using `d3.select` to update its position and text content. The chart uses `d3.scaleBand` and `d3.scaleLinear` for layout, and each rectangle responds to `mouseover` and `mouseout` events to toggle the tooltip’s visibility. Clicking any bar triggers a sorting animation with `transition` and `delay`, reordering the bars by value in ascending or descending order.

Aug 3, 2016
Loading thumbnail…

D3: A browser default tooltip

This example shows a bar chart where hovering over any bar triggers the browser's default tooltip to display the bar's value. Clicking on any bar alternates the sort order of the bars between ascending and descending, with a staggered animation that repositions each rectangle. The chart is built with D3 v4, using `d3.scaleBand` and `d3.scaleLinear` to map the array of twenty numbers to SVG rectangles. The animation relies on the `transition()` method, with `d3.ascending` and `d3.descending` comparators applied to the data on each sort.

Aug 3, 2016
Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

Aug 3, 2016
Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

Aug 3, 2016
Loading thumbnail…

D3: Smoother highlight transitions

A bar chart displays a static series of twenty numerical values, rendered as SVG rectangles. On mouseover, the individual bar's fill immediately changes to orange, and on mouseout, it smoothly transitions back to its original blue shade over 250 milliseconds using D3 v4's `.transition()` method. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with each bar labeled by its value via text elements that have pointer-events disabled.

Aug 2, 2016
Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

Aug 2, 2016
Loading thumbnail…

D3: Adding and removing values from a chart (dynamic labels included)

This example shows a bar chart where clicking the “Add” or “Remove” text buttons appends or removes a data value, with bars and their numeric labels animating to updated positions. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, a key function on `d.key` for data binding, and `selection.merge` with `transition` to smoothly shift rectangles and text over 500 milliseconds. Entering elements slide in from the right, while exiting ones slide out left before being removed.

Aug 2, 2016
Loading thumbnail…

D3: Removing values from a chart

Clicking the text above the chart removes the first value from a fixed array, shifting the dataset leftward. D3 v4 uses a band scale for the x-axis and a linear scale for the y-axis to render SVG rectangles and white text labels. The update pattern calls `selection.enter`, `merge`, and `exit` with chained `transition` methods, animating exiting bars and labels out the right edge while repositioning the remaining elements over 500 milliseconds.

Aug 2, 2016
Loading thumbnail…

D3: Removing values from a chart

A bar chart displays 20 numeric values, each labeled with its value. Clicking the text prompt removes the first data point and smoothly slides the remaining bars and labels left into their new positions. The example uses D3 v4’s `scaleBand` and `scaleLinear` for axes, and relies on selection `enter`, `merge`, and `exit` transitions to animate rectangles and text over 500 milliseconds. It binds data with a custom key function and renders entirely as SVG.

Aug 2, 2016
Loading thumbnail…

D3: Adding values and elements to a chart

This example shows a bar chart that grows dynamically as users click a text prompt, adding a new randomly generated value between 0 and 25 to the existing dataset. Each bar is labeled with its corresponding value, rendered as white text directly on the bar. The chart uses D3 v4’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with SVG `rect` and `text` elements. Clicking triggers D3’s `.transition()` API to animate the bars and labels, smoothly repositioning and resizing them as the domain and axes update.

Aug 2, 2016
Loading thumbnail…

D3: Adding values and elements to a chart

A bar chart displays a fixed dataset of 20 values as blue rectangles with white value labels, using D3 v4 scales (`scaleBand` and `scaleLinear`) and SVG rendering. Clicking the text above the chart triggers a transition: a random number between 0 and 25 is appended to the data array, the scales’ domains are recalculated, and both bars and labels animate over one second via `transition()` and `merge()` to accommodate the new element with a slightly narrower band width.

Aug 2, 2016
Loading thumbnail…

D3: Adding values and elements to a chart

This example demonstrates an interactive bar chart that starts with 20 values and adds a randomly generated data point each time the user clicks the text prompt. The visualization shows a static bar chart with data labels, and the interactive element updates both the chart's scales and geometry. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` to manage axes, and `transition` to animate the repositioning and resizing of rectangles and text elements over 500 milliseconds. The data is an inline JavaScript array, rendered as SVG.

Aug 2, 2016
Loading thumbnail…

D3: Using each() to specify two transitions in sequence

Clicking the paragraph triggers a chained animation in a D3 v4 scatterplot of 50 random data points. The example demonstrates `transition.each()` to apply two sequential transitions: first, circles grow in radius and change to semi-transparent steelblue over one second, then they shrink back and regain full opacity. Axes rescale simultaneously using `d3.axisBottom` and `d3.axisLeft` with updated linear scales. This SVG-based visualization shows how to coordinate multi-stage updates on a single selection.

Aug 2, 2016
Loading thumbnail…

D3: Transitioning points to randomized values, plus rescaled axes!

This interactive visualization displays 50 randomly generated points on a scatterplot. Clicking the text updates the dataset with new random values and smoothly transitions the circles to their new positions. The chart’s x- and y-axes rescale to fit the new data range. Built with D3 v4, the example uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements with a one-second `transition` applied to both points and axes.

Aug 2, 2016
Loading thumbnail…

D3: Transitioning points to randomized values

A scatterplot displays 50 randomly generated points, each shifting to new random coordinates when the user clicks on the text. The visualization updates the positions of existing circles without adding or removing elements, using a smooth 1000-millisecond transition. The code builds the chart with d3.scaleLinear for the x and y axes, d3.axisBottom and d3.axisLeft for the ticks, and binds the data to SVG circle elements. The click handler regenerates the dataset, rescales the domains, and calls transition().attr() on the selected circles to animate the movement.

Aug 2, 2016
Loading thumbnail…

D3: Transitioning to randomized data values

This example shows a bar chart with value labels that randomize each time the user clicks on the text prompt above it. Initially, a fixed dataset of twenty values is rendered as SVG rectangles with a blue color scale and overlaid text labels. Upon clicking, the D3 transition API animates each bar's new height, fill color, and label position with a staggered delay based on its index, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The original code was adapted from the book *Interactive Data Visualization for the Web* and updated to work with d3.v4.

Aug 2, 2016
Loading thumbnail…

D3: A chart transition with controlled duration (labels, too!)

This example demonstrates a bar chart whose values, bar heights, colors, and labels all animate over five seconds after a user clicks the accompanying text. The chart initially displays a set of twenty numeric values as SVG rectangles, with corresponding white text labels positioned above each bar. The code uses D3 v4’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and the `transition().duration()` method to smoothly interpolate the `y`, `height`, `fill`, and label text attributes when new data is applied. The dataset is a hardcoded array of numbers, rendered entirely via SVG elements.

Aug 1, 2016
Loading thumbnail…

If...Else

Small colored circles drop from the top of the SVG canvas and traverse a series of dashed guide paths. A circle’s color, randomly chosen from five classes, determines its branching path: red circles bounce after one segment, blue after two, and all other colors travel through all three, visually encoding the logic of an `if...else if...else` conditional statement. The animation is driven by D3.js transitions with `attrTween` and custom `translateAlong` functions, while a `setInterval` loop calls `sort()` to generate new circles every 200 milliseconds. The code uses D3 v3 and SVG rendering, with static labels like `if (color == 'RED')` and `else` marking the decision points.

Aug 1, 2016
Loading thumbnail…

D3: A bar chart that transitions to new data!

A bar chart of 20 static values transitions to a new dataset when the user clicks a text prompt. Built with D3 v4, the visualization uses SVG rectangles and text labels, scaled by `d3.scaleBand` and `d3.scaleLinear`. Clicking triggers a `transition()` on both the bars and labels, animating their `y`, `height`, `x`, and fill color (a blue scale based on each value) to reflect the shuffled data order.

Aug 1, 2016
Loading thumbnail…

10.transition-update pattern

The visualization demonstrates the D3 update pattern by animating a changing subset of the alphabet as text elements enter, update, and exit. The code defines separate transition states for each lifecycle phase—green for entering, dark gray for updating, and brown for exiting—using the `d3.transition` API with a 750-millisecond duration. Elements move horizontally to their new indexed positions, while exiting items fade out and shift downward before removal. The data shuffles and slices randomly every second via `d3.interval`, with the SVG output repositioning based on the current array.

Aug 1, 2016
Loading thumbnail…

9. key-function-update-pattern

This example demonstrates the D3 key-function update pattern for binding data to existing SVG elements. It shows the alphabet rendered as text elements, with each update randomly shuffling and slicing the dataset, highlighting entering elements in green and updating elements in dark gray. The code uses `selection.data(data, keyFunction)` to join data by value rather than index, then applies `merge()` and `remove()` to manage the enter, update, and exit selections. The visualization runs on a one-second interval, using `d3.shuffle` to generate new sequences.

Aug 1, 2016
Loading thumbnail…

8. update-enter-merge-exit

This example visualizes the D3 general update pattern, showing how a data-join with enter, update, and exit selections manages a changing set of letters. Entering elements appear in green, updating elements in black, and exiting elements are removed immediately. The code uses `d3.shuffle` and `slice` to generate random subsets of the alphabet every second, and `d3.interval` to trigger a custom `update` function. Without a key function, enter elements append at the end and exit elements remove from the end, demonstrating positional data binding in SVG.

Aug 1, 2016
Loading thumbnail…

7. date-x-axis histogram

This visualization shows the number of homicides in Chicago per week during 2015, displaying each week as a bar. It uses D3 v4’s `d3.histogram` function to bin data by week based on parsed dates, with the x-axis scaled by `d3.scaleTime`. The bar heights are mapped using `d3.scaleLinear`, and the SVG rendering includes labeled counts above each bar. The data comes from the City of Chicago’s public dataset, loaded from a CSV file.

Aug 1, 2016
Loading thumbnail…

6. linear-x-axis histogram

This histogram visualizes the distribution of 1,000 randomly generated samples from a Bates distribution, binning the data at regular intervals along a linear x-axis. Counts per bin are displayed as white text atop steelblue bars. The chart uses D3 v4’s `d3.histogram` to bin data, `d3.scaleLinear` for the axes, and `d3.axisBottom` for tick marks, which are positioned between bars to clarify bin boundaries. The y-axis height reflects each bin’s count, and the SVG output is styled via CSS classes.

Aug 1, 2016
Loading thumbnail…

5. hover barChart

This bar chart visualizes the frequency of letters in English text, with each letter’s bar height proportional to its occurrence rate. Hovering over a bar turns it brown, while non-hovered bars remain gray. Built with D3 v4 and SVG, the chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with a `.tsv` data file providing letter-frequency pairs. Axis styling, tick marks, and labels are customized via CSS.

Aug 1, 2016
Loading thumbnail…

4. x-y-axis barChart

This example shows a bar chart of letter frequencies in English text, with the x-axis listing letters A through Z and the y-axis scaling from 0 to the maximum value. Each bar displays its numeric value directly above it in orange text. The chart is rendered as an SVG using D3 v4, with d3.scaleLinear for the y-axis and d3.scaleBand for the x-axis. Data is loaded from a TSV file and drawn via d3.axisBottom, d3.axisLeft, and appended rect elements.

Aug 1, 2016
Loading thumbnail…

3. scaleBand barChart

This example shows a bar chart of letter frequencies in the English language, with each letter labeled on the x-axis and its proportional value on the y-axis. Using D3 v4, the chart employs `d3.scaleBand` for the ordinal x-axis, which maps categories to pixel positions with configurable padding, and `d3.scaleLinear` for the numeric y-axis. Data is loaded from a TSV file containing name-value pairs, and rendered as SVG rectangles with `text` labels showing the numeric value above each bar. The chart is styled with a steelblue fill and cyan text.

Aug 1, 2016
Loading thumbnail…

2. vertical barChart

A vertical bar chart displays the relative frequency of each letter in the English alphabet, with values loaded from a tab-separated data file. The SVG rendering uses D3 v4's `d3.scaleLinear` to map data values to pixel heights, with each bar grouped in a `g` element and positioned via `translate`. Bar width is calculated by dividing the chart width by the number of data points, and a one-pixel gap creates visual padding. Orange rectangles show the values, while steel-blue text labels display the numeric value above each bar.

Aug 1, 2016
Loading thumbnail…

1. horizontal barChart

A horizontal bar chart displays six name–value pairs from a tab-separated data file, with steelblue bars and white value labels positioned at each bar’s end. The D3 v4 code uses `d3.tsv` with a row function to parse numeric values, `d3.scaleLinear` to map data to pixel widths, and SVG `rect` and `text` elements appended to translated `g` groups. The chart height is calculated from the data length and a fixed bar height.

Aug 1, 2016
Loading thumbnail…

Spline Transition

A smooth line continuously shifts leftward as new random data points, generated by `d3.randomNormal`, are appended and old ones removed. The `d3.line` path with `d3.curveBasis` interpolation animates via a `transition` that slides the SVG element using a transform, while a `clipPath` rect masks the line so the changing tangent at the boundary remains hidden. The axes use `d3.axisBottom` and `d3.axisLeft` on linear scales.

Jul 29, 2016
Loading thumbnail…

Line Transition 1: (Broken)

This example demonstrates a broken path transition where a smoothly moving line fails to slide horizontally as intended. Using d3 version 4, a path element with class “line” is drawn via `d3.line` and updated with `d3.transition` when new data points push and shift an array of 40 random normal values. The default `d3.interpolateString` pairs numbers in the SVG path’s “d” attribute incorrectly, causing only the y-coordinates to change while x-coordinates stay fixed. The animation runs continuously via the `tick` function, redrawing with linear easing over 500ms.

Jul 29, 2016
Loading thumbnail…

line_Transition_4

This example shows a real-time updating line chart that scrolls new data points across an SVG canvas as the page is scrolled. The line continuously shifts left as new random values are appended and old ones removed. The implementation uses d3.line and d3.scaleTime for the x-axis, d3.axisBottom for the labels, and transitions tied to the window scroll event, with d3.randomNormal generating the initial data.

Jul 29, 2016
Loading thumbnail…

Line Transition1

This example demonstrates a smooth scrolling line chart that continuously updates with new data points while sliding old ones off the left edge. A line chart displays 40 data points sampled from a normal distribution, with a new point appended and the oldest removed in each cycle. The visualization uses `d3.line` and `d3.scaleLinear` for chart construction, and animates via `transition()` with `d3.easeLinear`. A `clipPath` element hides the line outside the chart area, while the `transform` attribute translates the path leftward to create the sliding effect.

Jul 29, 2016
Loading thumbnail…

d3.tsv usage

This example demonstrates the various ways to load and parse tab-separated values using the `d3.tsv` method in D3 v4. It shows four different invocation patterns, including direct callbacks, the `.get()` alias, row conversion functions, and custom MIME types. The code logs the parsed `data.tsv` array (containing two objects) to the console multiple times, with each approach applying optional transformations like negating numeric fields or appending strings. This serves as a practical reference for understanding D3’s asynchronous data-loading API.

Jul 24, 2016