D3 Ternary Plot

100%

D3 Ternary Plot

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Jun 9, 2017

A D3 ternary plot displays compositional data with three variables summing to 100%, using an interactive animation. The visualization renders an equilateral triangle grid with major and minor tick lines along the A, B, and C axes, plus labeled tick marks. SVG circles represent data points, which change when a "Data change" button is clicked. The code builds the plot using the D3.js library (version 3.1.6) with raw SVG attributes and transformations, computing point coordinates from the three-part ratios and using `selectAll` and `append` to construct the axes and labels dynamically.

AI-generated description

A ternary plot forked from this one by Marielle Lange

forked from <a href='http://bl.ocks.org/tomgp/'>tomgp</a>'s block: <a href='http://bl.ocks.org/tomgp/7674234'>Ternary plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Quadrant

Four labeled quadrants—Assess, Adopt, Avoid, and Analyze—organize a scatterplot of fabricated data points, each colored by category and positioned by random percentage and count values. The D3 v7 visualization uses linear scales for both axes and avoids overlaps with the legend in the lower-right corner. SVG rectangles, text, and circles render the quadrants, labels, and legend items, while a CSS keyframe animation applies a marching-ants dash offset to any path elements.

CCarloWK1202

74% match

Loading thumbnail…

tp3

This chart displays a line graph with interactive circle markers, plotting seven categorical data points from a local JSON dataset. The visualization uses D3.js v3 with an ordinal x-axis and linear y-axis, rendering as SVG. On mouseover, a circle turns red, displays a tooltip with the numeric value, and draws a dashed vertical line extending downward. The line itself is drawn using a D3 path with the line generator.

JJeremyBesson

72% match

Loading thumbnail…

d3 yoga

The visualization displays a small dataset of six numeric values using three overlaid chart types: circles sized by radius, vertical bars, and a line path. It shows how the same values can be represented through different encodings. The code uses d3.v4 with SVG for the circles and line, and HTML div elements positioned absolutely for the bars. Linear scales map the data domain to pixel ranges for radius, bar height, and line y-coordinates. The data is hardcoded as an array in the script, with no external source. The SVG and divs are both rendered on the same page, creating a combined view.

FFlameFuel

71% match

Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04

71% match

Loading thumbnail…

Untitled

A grid of 3D bars rises from a flat plane, each bar labeled with its height value on top. The visualization uses d3-3d to project cube geometries into SVG paths, with interactive drag rotation that updates the perspective in real time. D3 v4 handles the data binding, transitions, and text tweening, while color comes from the categorical scheme. A button triggers a full data refresh with animated transitions.

Aavnreddy95

71% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

71% match

Loading thumbnail…

2d to 1d binned chart

This interactive visualization lets viewers collapse a two-dimensional scatterplot of nine colored circles into one-dimensional histograms along either the x-axis or y-axis, or retain the full 2D layout. Buttons trigger animated transitions where circles bounce into their respective bins, which are delimited by dashed reference lines. The code uses d3.v4’s SVG rendering, `d3.scaleQuantize` for positioning, and `d3.histogram` to bin data by chosen coordinates. A custom `transition` with `d3.easeBounceOut` and 500–750ms durations animates the morph, while `d3.scaleOrdinal` assigns distinct fill colors to each point.

PPatrick Wojda

71% match

Loading thumbnail…

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Mmrharis1

71% match