A classic comparison (sorted)

100%

A classic comparison (sorted)

✓ Published0🌍 Public

Last edited Oct 7, 2016

Created on Oct 7, 2016

Seven random values are displayed in four small multiples, each using a different D3 layout: a bar chart, a pie chart, a treemap, and a bubble chart. The data are sorted in descending order before rendering, so every chart presents the same ranked sequence of categories. The code uses D3 v3 layouts including `d3.layout.pie`, `d3.layout.treemap`, and `d3.layout.pack`, with SVG shapes for all marks. A categorical color scale maps each of the seven classes to a distinct color across all panels.

AI-generated description

Same as the previous example, but the seven classes are sorted by descending value, giving four ordered charts.

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/6c9d44be408e541fd654'>A classic comparison (sorted)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

A classic comparison

This example compares the same dataset across four classic chart types—bar chart, pie chart, treemap, and bubble chart—arranged in a 2×2 grid. A dropdown menu lets the viewer switch the metric being visualized, which is market data from the IEX API, including volume, market percentage, and tape categories. The code uses d3.layout.pie, d3.layout.treemap, d3.layout.pack, and d3.svg.arc to generate the charts, with d3.jsonp handling the API request and d3-tip available for tooltips.

AAjayyy

78% match

Loading thumbnail…

A classic comparison

This example demonstrates a four-panel comparison of market data, using the IEX API as its data source. Each quadrant of the visualization applies a different classic chart type to the same dataset—a bar chart, pie chart, treemap, and circle packing—all driven by D3.js v3 and rendered in SVG. A dropdown menu lets you switch the metric being compared (volume, market percent, tapeA/B/C), and all four views update simultaneously to reflect the selected value. The design uses a categorical color palette and crisp, minimal styling, with tooltips provided by d3-tip. The layout places the four charts symmetrically around a central point, creating a clean, dashboard-like comparison.

663anp3ca

76% match

Loading thumbnail…

A classic comparison

This visualization compares market data across multiple trading venues using four classic chart types arranged in a quadrant layout: bar chart, pie chart, treemap, and bubble chart. A dropdown menu lets users switch between volume, market percentage, and tape categories. The code uses d3.layout.pie, d3.layout.treemap, d3.layout.pack, and d3.svg.arc to render the charts, with data fetched live from the IEX Trading API via d3.jsonp. Each chart shares a consistent color scale mapping venue names to categorical colors.

TThanaporn-sk

76% match

Loading thumbnail…

Just things

A side-by-side comparison links a line chart and a grouped bar chart through shared data. The line chart plots 50 random values, with circle markers whose size and color correspond to a radius value, while the bar chart counts how many items fall into each radius group. Hovering a circle highlights the matching bar by reducing its opacity. The visualization uses D3 v5 with `d3.line`, `d3.scaleLinear`, `d3.scaleBand`, `d3.nest`, and `d3.axisBottom`, rendering to SVG with an ordinal color scale.

663anp3ca

74% match

Loading thumbnail…

85. D3 Sort

Animated bar chart displays 20 numeric values as vertical bars, color-coded by intensity, that rearrange into ascending order when clicked. Built with D3.js v4.5.0, the visualization uses `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for y-axis scaling. The code demonstrates sorting via `d3.ascending` comparator within a `sort()` method on rect elements, with mouseover highlighting and mouseout color transitions, all rendered as SVG with 1000ms transition animations.

Aamakanju@nyit.edu

72% match

Loading thumbnail…

Sortable Bar Chart

A bar chart displays 24 random values from a normal distribution, with bars sorted and animated into ascending or original order every five seconds. The reordering uses d3.transition with staggered delays per bar to make individual movements traceable, referencing Heer and Robertson’s animated transitions. Built with d3.js v3, the chart uses d3.scale.ordinal with rangeRoundBands for vertical positioning, while bar rectangles and text labels are rendered as SVG elements. The x-axis is drawn via d3.svg.axis, and sorting is triggered by a setInterval toggling the index order.

Mmbostock

72% match

Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar

72% match

Loading thumbnail…

Multivariate binning II

Four synthetic datasets are aggregated with d3.hexbin and compared across six small multiples, each showing the same spatial bins in a different visual encoding: colored scatter dots, grouped bar charts, pie charts, radial arcs, and two polar variants. Each bin’s composition by class is rendered as proportional wedges or bars using d3.svg.arc and d3.layout.pie. The SVG output uses d3.scale.category10 for class colors and lodash for data manipulation.

TThanaporn-sk

72% match