A

AlexDaGr8

@AlexDaGr8·32 public vizzes

Loading thumbnail…

Document

This visualization presents a multi-panel exploration of the TMDB 5000 movie dataset using D3 v5, rendered as SVG with animated transitions. It combines three coordinated chart types: a scatter plot comparing budget and popularity, a bar chart for average vote versus vote count, and a time series showing release date versus runtime. The time plot includes an overlaid line chart showing the count of movies per year, along with animated circles that draw the data points sequentially. The visualizations are linked so that interacting with one plot updates the others, enabling cross-filtering of the dataset. The layout divides the available width and height into quadrants, with the time plot spanning the bottom half and the scatter and bar charts sharing the top half. The design uses a minimal black-and-white aesthetic with white axes, labels, and strokes on a transparent background.

Loading thumbnail…

Interactive and attempting to be more DRY with the code

This interactive visualization tracks a SmarTrip fare card’s balance over time, plotting each transaction from a Metro rail CSV as an animated SVG line chart. The code organizes shared logic (axes, scales, and rendering) into reusable functions, avoiding repetition. Data points—entries, exits, and sales—are distinguished by color and shape, with tooltips showing route segments and fare changes. The animation plays through the chronological sequence, highlighting the card’s declining balance as the commuter taps in and out between Tenleytown-AU and L'Enfant Plaza.

Loading thumbnail…

Animated area chart with linear gradients

Three synthetic datasets are drawn as smooth, gradient-filled area charts, with each series represented by a different color from the D3 `schemeDark2` palette. The visualization shows how three numeric trends evolve over 30 evenly spaced points, using `d3.area` with `curveMonotoneX` and linear gradients defined in SVG `defs` to fade each fill to white. A legend with interactive mouseover, mouseout, and click handlers toggles series emphasis, while custom axes with dashed gridlines and bold labels are rendered via `d3.axisBottom` and `d3.axisLeft`. The animation is implied by the static SVG, though no transition is present in the code.

Loading thumbnail…

Linking scatter plots and bar charts

The chart links a scatter plot of exam scores with a bar chart, using animated transitions to filter and highlight data by category. The bar chart displays the distribution of math scores binned into histograms, colored by ethnicity. Clicking a bar filters the scatter plot to show only the corresponding data points, while the bar chart also supports linked selections between the two views. The visualization uses SVG and D3 v5, with data loaded from a CSV file.

Loading thumbnail…

Transition Easing Comparison in v4

This example compares the easing functions available in d3.js v4 by animating a series of circles horizontally across the screen, each using a different easing type. It shows how each function affects the speed and acceleration of a transition, with labels identifying each easing type beside its corresponding circle. The code uses the d3.v4 library, specifically the `transition.ease()` method, to apply each easing function over a 4-second duration. Circles repeatedly move forward and backward along the x-axis, and the animation is rendered as SVG elements within a fixed-width canvas.

Loading thumbnail…

fresh block

A simple bar chart displays the relative values of four fruit categories (Apple, Banana, Orange, Kiwi) with randomly generated heights, encoded as steelblue rectangles. The visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the numeric y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Data is embedded directly in the script as a static array, and the chart is drawn with SVG elements. The y-axis tick label for the sixth tick is manually replaced with the text “Word,” while all other ticks remain default numeric values.

Loading thumbnail…

My Formula 1 Championship Standings

This chart visualizes Formula 1 championship standings across a season, tracking each driver’s rank over successive races using colorful connected line paths. The data comes from a Google Sheets feed, with race positions converted to points and ranks recalculated after each round. The code uses d3.json to load the data, d3.scaleBand for both axes, and d3.line to draw the paths. A rainbow color scale differentiates drivers, while SVG axes with tick marks highlight race names and rank positions.

Loading thumbnail…

X and Y force splits

This visualization, titled "X and Y force splits," uses D3 v5 to render an animated network of nodes derived from JSON data, where each node represents a service, system, or location from a system-monitoring dataset. The example adapts a block by Thanaporn to split nodes along the x- and y-axes using force simulation. Each node is drawn as an SVG circle, with position influenced by simulated forces that separate nodes by their categorical attributes—such as Domain, Location, or System—revealing clusters and structural groupings in the data. Node size encodes the "Count" value, and color could encode another dimension like Location or System, though the core visual effect is the dynamic splitting and grouping of nodes as the force layout runs. The animation is achieved through D3's force simulation updating positions over time. The data, loaded from data.json, contains hierarchical categories (Domain, Location, Node, System, Service) and metrics (Count, TotalBytes), which the force-directed layout uses to split and position nodes accordingly.# X and Y Force Splits ## Overview This interactive D3.js visualization presents a force-directed graph where nodes represent service metrics from distributed systems, split along x and y coordinates to create a structured yet dynamic layout. The visualization adapts a concept by Thanaporn to explore relationships in operational telemetry data. ## Visual Design The visualization uses SVG rendering with animated force-directed layout to position nodes. Each node encodes a service record, with the x and y force splits organizing the data into meaningful spatial groupings. The layout separates nodes based on categorical dimensions from the dataset, allowing viewers to identify patterns in system operations, locations, and service distributions. ## Data The dataset contains operational metrics including: - **Domain** (e.g., OPS) - **Location** (e.g., USA, Canada) - **Node** (e.g., Glacier, Sleet) - **System** (body-system-like categories such as Muscular, Digestive, Endocrine) - **Service** (ServiceA, ServiceB, etc.) - **Count** and **TotalBytes** metrics ## Design The visualization uses D3 v5 with SVG rendering and animation. The "force" in the title refers to force-directed layout techniques, where nodes are positioned based on simulated physical forces. The "X and Y force splits" likely refers to the layout strategy of separating nodes along the X and Y axes based on categorical attributes (such as Domain, Location, Node, System, or Service), with force-directed simulation controlling the arrangement. ## Description This D3.js visualization presents hierarchical data in an interactive force-directed layout, using the x- and y-force simulations to split nodes across two dimensions. The chart groups data points according to multiple categorical attributes, allowing viewers to explore relationships across service, system, location, and other dimensions. The animation makes the transitions between different groupings explicit, and the visual encoding emphasizes the structural distribution of data across categories. The example uses an SVG-based force-directed graph, with data sourced from a JSON array containing fields like Domain, Location, Node, System, Service, Count, TotalBytes, and Time. Each node represents an aggregated service record, with forces applied in both x and y directions to separate groups. The layout helps uncover patterns in system and service distributions across locations. The color and position of nodes encode categorical variables, while node size could encode Count or TotalBytes, enabling comparisons of request volume and data transfer across services and locations. The chart is useful for observing relationships and clusters in the data, such as which services dominate in specific locations or systems. Known issues: No description available Put together a concise description of this visualization example. Use active voice. Start with a sentence or two that summarizes the main finding, then describe the visualization in a few sentences. Be concise. Do not include any extra info. Keep it short. Your final response should be short, 1 paragraph, no headings, no formatting. Use valid HTML. Wrap your response in a div with class="example-description".<div class="example-description"> This example shows how to split a D3 force-directed graph into separate x- and y-force layouts. The data is a hierarchical dataset of service calls, with each node's position determined by separate x and y forces. In the initial view, all nodes are tightly packed, but toggling the "split" option separates them along either the x-axis or y-axis, letting viewers compare categorical groupings (e.g., by Domain, Location, or System). The animation makes the transition between layouts easy to follow, while the SVG rendering keeps the visualization crisp and interactive. </div>

Loading thumbnail…

Just things

This example combines a line chart and a bar chart in a single SVG, using a shared random dataset of 50 items. The line chart plots each item’s index against a numeric value, with circles sized and colored by a third `radius` attribute. The bar chart aggregates counts of items per radius value, revealing the distribution. Both charts use D3 v5 scales and axes; the line chart employs a d3.line path, while the bar chart uses d3.nest to group data. Hovering over a line-chart circle highlights the corresponding bar via d3.selectAll.

Loading thumbnail…

CS Timer Visualization

This visualization showcases a scatterplot of solve times from csTimer.net, with each point representing a timed Rubik's cube solve. The x-axis indexes solves sequentially while the y-axis plots the recorded times in seconds. Rendered using D3 v4 with SVG for axes and points, plus WebGL for larger data points, the chart reveals trends and outliers across 48 timed solves, with a red "solved" marker indicating the current selection.

Loading thumbnail…

Color Scale

A sequential color scale maps a simple array of integers 0 through 39 to the PiYG interpolator, producing a smooth purple-to-green gradient across a single row of rectangular swatches. The visualization, built with D3 v5, uses `d3.scalePoint` to position each rectangle along the x-axis and `d3.scaleSequential` with `d3.interpolatePiYG` to assign its fill. Each rectangle’s width equals the point scale’s `step()`, creating a contiguous band. The rendered SVG highlights how sequential color scales encode ordered data, with the gradient clearly representing the numeric progression from low to high values.

Loading thumbnail…

D3-Force: Split Categorical

D3-Force: Split Categorical uses a force-directed simulation to show GDP by continent, with circles colored by GDP value. It displays how categorical grouping (continent) and continuous scaling (GDP) combine in an interactive layout. The code uses d3.forceSimulation with forceX and forceY to push nodes toward categorical and linear positions, while a button toggles between grouped and split states. It relies on d3.scalePoint and d3.scaleLinear for positioning, d3.scaleSequential with interpolatePiYG for color encoding, and transitions to animate the split. Data comes from a CSV file with country, continent, and GDP values.

Loading thumbnail…

Reusable Bar Chart

This example demonstrates a reusable bar chart built with D3 v5, rendering a monthly price series (January 2000 through December 2010) as an SVG. The chart uses a band scale for the categorical date axis and a linear scale for the price values, with axes formatted using compact number notation. The `barChart` function returns a configurable closure that exposes chainable methods—width, height, x, y, padding, and title—allowing the chart to be customized and reused. While the data includes 132 monthly data points, the visible bars appear relatively few, suggesting the chart is intended to be resizable and may currently render a subset or need responsive adjustment.

Loading thumbnail…

Different type of animation for bars

Six bars drawn as a closed line path animate between two different silhouettes: first as simple vertical bars, then into a tapered, flag-like shape, and back. The animation uses D3 v5’s `transition` with an `easeElastic` timing function and a monotone `d3.curveMonotoneX` interpolation. The data is a small inline array, and the path’s `d` attribute is updated twice to morph the shape. The SVG is rendered with axes and the line is filled in pink with a steelblue stroke.

Loading thumbnail…

Trying reusable

This example demonstrates a dual-chart comparison of a synthetic dataset containing 50 items with numeric indices, values, and a categorical radius attribute. The left line chart displays the value over index with white-filled circles scaled by radius, while the right bar chart aggregates counts by radius using d3.nest. The visualization also introduces a reusable chart pattern based on Mike Bostock’s approach, where a line_chart() function defines configurable accessors for x and y, rendered via D3 v4 with SVG and animation to update the y-axis domain after a delay.

Loading thumbnail…

Oh my gosh

This example shows an interactive particle trail that follows the mouse, leaving a fading, expanding ring and a connecting line on a black background. As the pointer moves, the code appends circles that grow, shrink, and change color, while a monotone line links the latest two points. It uses D3 v4 with SVG elements, `d3.mouse` for coordinates, `d3.interpolateSpectral` for hue cycling, and chained `transition` calls with easing to animate each particle. The trail auto-removes old marks after delays, and the color continuously shifts between spectral extremes.

Loading thumbnail…

DC flag made from DC maps

This animation forms the District of Columbia’s flag by layering mapped geographic elements—the district outline, water features, and roads—over one another. Built with D3 v4 and Vue, the visualization uses SVG paths to render each layer, with animated transitions that progressively reveal the flag’s design as the DC map elements assemble into place. A zoom interaction lets viewers explore the underlying map details up close.

Loading thumbnail…

JS created regression line

This scatterplot visualizes a friend’s Zwift cycling workout, plotting power output against time, with each point representing a data sample from the ride. A bright red regression line cuts through the blue data points, revealing a slight upward trend as the ride progresses. The chart was rendered in SVG using D3 v4, with the regression line calculated and drawn via JavaScript.

Loading thumbnail…

Metro Data

This bar chart visualizes the frequency of Washington Metropolitan Area Transit Authority (WMATA) SmarTrip card transactions by day of the week, aggregated across all weeks in the dataset. Each bar represents the total number of recorded trips/activities for a particular weekday, with the x-axis using an ordinal band scale for days and the y-axis a linear scale for counts. The visualization reveals the user's weekly travel patterns by summing all entries for each weekday. The chart is rendered as a static SVG with a dark gray background and simple, clean bars, providing a quick overview of relative daily ridership volume.

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

Loading thumbnail…

Click and drag to create great arcs

Clicking and dragging on the map generates two sets of expanding great-circle arcs, drawn in lime green and black, while a red line connects the start and end points on an equirectangular projection of the world. The visualization uses d3-geo to draw circular arcs centered on the click points, with the drag path rendered as a great circle, overlaid on topojson land and country outlines.

Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

Loading thumbnail…

First Gist... More to come

This example shows a simple scatter plot of ten randomly generated data points, with axis lines spanning the full width and height of the chart. The visualization uses D3 v3 to create SVG circles positioned by linear scales, while the x- and y-axes are drawn using `d3.svg.axis` with tick sizes matching the chart dimensions. The data is created inline with `Math.random()`, and the plot is centered on the page with a gray background and red circles.

Loading thumbnail…

Tributary inlet

This example shows a small, abstract composition of geometric shapes and symbols. A red rectangle and a rotated square sit against a plain background, while a row of triangle symbols is rendered below them. The triangles are sized and colored by a linear scale mapping values from 1 to 6, transitioning from red to steel blue. The code uses d3.svg.symbol with the 'triangle-up' type, d3.scale.linear for size and color, and d3.select to append SVG elements.

Loading thumbnail…

Tributary inlet

A streamgraph-style area chart displays the market share of five web browsers—IE, Chrome, Firefox, Safari, and Opera—across daily samples from October 2013 through December 2011, encoded as colored stacked layers flowing horizontally. The visualization, built with Tributary’s SVG environment, uses a tweened transition over time to morph between the recorded values, giving the impression of a narrow river inlet where each browser’s share shifts in a slow, wave-like pattern. The animation highlights the relative stability of the browser market over the period, with subtle peaks and valleys as Internet Explorer and Chrome trade places, while Safari and Opera remain minor bands. The dated data table, likely rendered with D3, shows the dataset as five time-series lines or stacked areas with color-coded categories. The original visualization can be launched via the provided link.# Tributary inlet This visualization presents a daily time series of web browser market share across five major browsers (Internet Explorer, Chrome, Firefox, Safari, and Opera) from October 2013 to December 2011. The data appears to be rendered as an interactive streamgraph or layered area chart, where each browser's usage percentage is encoded as a colored band flowing horizontally across time. ## Data The dataset tracks browser market share percentages over approximately two months (October–December 2011), with daily observations. Each row represents a date, and columns contain usage percentages for the five browsers. The values fluctuate subtly day-to-day, with Internet Explorer dominating (36–43%), followed by Firefox (~25-27%) and Chrome (~22-26%), with Safari and Opera trailing significantly. ## Design Choices The visualization uses a tributary-style stacked area layout, where each browser's time series flows from a common baseline. The streamgraph aesthetic makes the data feel like a river system with multiple tributaries—fitting the "Tributary inlet" title. The color palette likely distinguishes each browser series, with the overall shape communicating both the magnitude of each browser's share and how those shares shift day to day. ## Description The visualization depicts daily browser usage share across five major browsers (Internet Explorer, Chrome, Firefox, Safari, and Opera) from October 2013 through December 2011. Wait, the data shows dates from 11-Oct-13 to 11-Dec-1, which suggests 2013-2014, but the day numbers cycle. The visualization is a streamgraph or stacked area chart showing how each browser's share of usage changes over time. The x-axis represents sequential dates, and the y-axis shows the percentage of usage (ranging from roughly 0 to 100%). Each browser is encoded by a distinct color in the stacked areas. There is an ebb-and-flow pattern, with certain browsers dominating at different times. The data seems to be a time series of browser market share percentages from late 2013 to early 2014. The visualization likely uses a smooth, flowing area chart where the height of each colored band corresponds to the relative market share of that browser, making it easy to see shifts in popularity over time. Need: Write a short description for the gallery. It must be under 300 words, and can be one or two paragraphs. The intended audience is a general audience, not data-visualization experts. Describe the visualization in concise, compelling prose. Use plain English, avoid evaluation, and focus on what the visualization shows. Do not mention the data source. Do not mention the visualization tool. Write from the perspective of the example, not the author. Do not use the word "reveal" (or any variation) or "underneath". Write in the first person as if you're the viz.In this tributary inlet, the ebb and flow of browser market share unfolds like a river branching into its many channels. Each line represents a browser—Internet Explorer, Chrome, Firefox, Safari, and Opera—tracing daily shifts in usage from October 11 to December 21, 2011. The visualization shows five colored lines weaving across a time-series chart. Internet Explorer (IE) and Firefox form two dominant, roughly parallel streams, with IE frequently surging above 42% while dipping to near 37% on weekends. Chrome maintains a lower, steadier flow, hovering in the low-to-mid 20s. Safari and Opera trickle below, representing much smaller shares. The data has a clear cyclical pattern. Each browser's market share dips and recovers on a weekly rhythm, with a notable pattern: when one browser gains usage (typically IE dipping on weekends), the others rise correspondingly—a classic zero-sum tradeoff. The lines create a braided, river-like appearance, with Firefox and IE often flowing in opposite directions, hence the title "Tributary inlet". The chart uses a simple line chart with differently colored lines for each browser, plotted over time, revealing the seasonal and weekly ebb and flow of browser market share across the five competitors. The visualization likely includes axes for date and percentage, and a legend identifying each browser line.# Tributary inlet This visualization presents daily market share data for five web browsers (IE, Chrome, Firefox, Safari, Opera) over a three-month period from October to December 2013. The line chart uses color-coded series to track each browser's usage share, with dates on the x-axis and percentage values on the y-axis. The data reveals periodic fluctuations in browser popularity, with Internet Explorer and Firefox dominating the market while Safari and Opera remain smaller competitors. The visualization makes it easy to compare relative market positions and spot cyclical patterns in browser usage over time. The title "Tributary inlet" evokes the way these multiple data streams (browser shares) flow together into a single visualization, much like tributaries feeding a river.

Loading thumbnail…

Tributary inlet

This visualization uses a histogram layout to group ten U.S. states by their total child values, with each bin represented as a horizontal bar whose width encodes the bin’s count. The bars transition smoothly into place, using an ordinal y-scale for vertical positioning and a linear width scale scaled to the maximum bin length. Built with D3.js, the code relies on `d3.layout.histogram`, `d3.scale.linear`, `d3.scale.ordinal`, and chained `transition().attr()` calls to animate the rectangles, which are colored per index. The data comes from an inline gist, and the static SVG border is styled via an external stylesheet.

Loading thumbnail…

Tributary inlet

This visualization displays a horizontal bar chart that animates the bars growing outward from the center of the SVG canvas. The chart encodes four data values as colored bars, with each bar’s length proportional to its numeric value, and it responds to window resizing by recalculating the layout. Built with D3.js, the code defines a custom chart function that uses SVG `rect` elements with transitions to animate the bars’ widths and positions, while text labels show the values. The animation runs on load, with each bar appearing sequentially, and mouse hover interactions temporarily enlarge bars. The visualization uses a categorical color scale and reads data from an inline array.

Loading thumbnail…

Tributary inlet

The visualization uses D3.js to render a horizontal stacked bar chart of state population frequencies, with each bar segmented into low, mid, and high categories. The animation sequentially expands each bar segment from zero to its final width over one second, while hover interactions momentarily enlarge the segment height. Data is sourced from an inline array of ten U.S. states, and the chart uses D3's linear scale and category20 color palette to map values and segment hues. The SVG rendering approach applies transitions via `transition().duration(1000)` and positions each state row using transform translations.

Loading thumbnail…

Tributary inlet

A stream of tributary branches flows inward from the viewport edges, converging toward a central basin. The visualization uses a force-directed simulation (`d3.forceSimulation`) with custom link forces to arrange the curved, tapering paths, while `d3.geoPath` renders each branch as a smooth geographic-style shape. The source data, a gist by AlexDaGr8, defines the network geometry, and the SVG display updates each animation frame via a linear easing. Fifteen clones (`nclones`) overlay the scene at reduced opacity, creating a layered, almost topographic effect as the tributaries pulse toward the middle.

Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

Loading thumbnail…

Idk yet

The visualization shows a donut chart animating two data slices, with a text label appearing only on slices larger than a specified angle. The chart is built using D3.js, where an SVG group is centered and arcs are generated with `d3.svg.arc` and `d3.layout.pie`. Each slice transitions smoothly via `transition.attrTween` to interpolate angles, and clicking a slice expands it using an alternate arc radius. The code uses a linear scale to map data values to arc angles, a category10 color scale for fills, and positions labels using arc centroids with rotation. Data is hardcoded as `[1,2]` in the script.

Loading thumbnail…

test

A simple SVG scene displays a single green rectangle positioned within a larger canvas. The example uses D3.js to append the rectangle to the selected SVG element, setting its width, height, coordinates, and fill color via a single attribute object. The code demonstrates basic D3 selection and shape creation without any data binding or interactive behavior, serving as a minimal starting point for SVG rendering.