Skip to main content
SimilarExport ZIP
100%

A classic comparison

✓ Published0🌍 Public
AAjayyy
Last edited Jun 17, 2019
Created on Jun 17, 2019

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.

AI-generated description

IEX API

forked from <a href='http://bl.ocks.org/iexviz/'>iexviz</a>'s block: <a href='http://bl.ocks.org/iexviz/ff90f973b5ef1a3ecbea4bbae76ad44d'>IEX Market - Classic Charts</a>

mit Licensed

Similar vizzes

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
92% 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
89% match
Loading thumbnail…

A classic comparison (sorted)

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.

TThanaporn-sk
78% match
Loading thumbnail…

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Ddevvansh1997
77% match
Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr
73% match
Loading thumbnail…

Visualizing Distributions

This example compares four chart types for visualizing a single data distribution: swarm plot, pile plot, histogram, and boxplot. Using d3.forceChart, the swarm and pile plots position individual data points with a force-directed layout, while the histogram aggregates counts into bins via d3.layout.histogram, and the boxplot summarizes quartiles using d3.scale.quantile. All charts render as SVG within a shared grid, sharing the same y-axis scale for direct comparison. The underlying data comes from 700 random log-normal values.

MMorganhaoyu
73% match
Loading thumbnail…

Fundamental Visualizations

This example showcases six fundamental visualization techniques—bar charts, line charts, pie charts, scatter plots, and choropleths—implemented as reusable Chiasm plugins with D3.js. Each chart is an independent component with no shared dependencies, demonstrating how common visualization methods can be modularized and combined in a single dashboard layout. The bar charts support both vertical and horizontal orientations with configurable margins and spacing, the line chart uses historical trade data, the pie and donut charts show categorical proportions, the scatter plot uses Fisher's Iris data, and the choropleth displays US demographic data. The design emphasizes encapsulation and simplicity, with duplicated styling code across components to illustrate a standalone-component architecture. This serves as a foundation for building more advanced visualizations with axes, labels, and interactions.

CCurran Kelleher
72% match
Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis
72% match