Skip to main content
100%

Metis: Data Transformation + Nest (sxywu)

✓ Published0🌍 Public
VVirginiaHNg
Last edited Jul 12, 2017
Created on Jul 12, 2017

This example shows a bar chart of venture investors, where each bar represents one investor and its height encodes the number of unicorn companies in their portfolio. The underlying data is first transformed with `d3.nest()` to group individual investment records by investor, then bound to SVG `<g>` elements using a data join. The chart uses `d3.select`, `enter`, `merge`, and `exit` to manage rectangles and text labels, with scales omitted and positions calculated manually via translation transforms. The bars are drawn as semi-transparent steelblue rectangles, and each label displays the count of investments.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Class: Stacking & Nesting

A stacked bar chart displays the number of startups in two sectors—consumer and enterprise—per investor, using color to distinguish sectors and hover to reveal individual company names and amounts. The code nests the data by investor and sector with `d3.nest()`, computes stack offsets via `d3.stack()`, and renders SVG rectangles and labels with D3 v4 selections and joins. The data is embedded in the script, with axis positions derived from array indices and bar heights scaled by counts.

VVirginiaHNg
76% match
Loading thumbnail…

Metis Simple Stacked Bar Chart with Labels

This example displays 2017 U.S. unemployment rates as a simple horizontal bar chart, with states sorted descending by rate and each bar labeled with its numeric value using SVG text. D3 v4 selects elements, binds CSV data, and uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The code also demonstrates grouping with `d3.nest()` and computes average rates per region and subregion using `rollup()`. The chart is rendered as an SVG element within a 960x500 canvas.

EElaineYu
70% match
Loading thumbnail…

CS 725 Information Visualization - VI2

This example demonstrates a bar chart for a dataset of 20 numeric values, with each bar’s height and color intensity proportional to its value. The chart is rendered as an SVG using D3.js (version 3.5.5), where `d3.select` appends an SVG element, and `selectAll("rect")` with `data()` and `enter()` creates the bars. Text labels are positioned at each bar’s top using an inverted coordinate system, where `y` is calculated from the height. The source code is a standalone HTML file, and the dataset is hardcoded as an array. The rendering uses basic D3 APIs such as `attr` for styling and `text-anchor` for label alignment.

CChristosT
70% match
Loading thumbnail…

Metis Unemployment Rate Bar Chart Nesting and Labels Example

This example uses a nested bar chart to show the average unemployment rate in 2017 across U.S. subregions, sorted from highest to lowest. The chart aggregates state-level data from a CSV file using d3.nest() and rollup to compute mean rates per subregion. Bars are rendered in SVG with value labels positioned inside each bar, while the code also demonstrates data grouping by region, subregion, and state, plus calculations of average unemployment rates by region.

EElaineYu
69% match
Loading thumbnail…

Untitled

This example presents a bar chart that visualizes a dataset by mapping values to the height of vertical bars. The rendering uses the D3.js library, specifically leveraging its `d3.scale` for mapping data to screen coordinates and `d3.selectAll` to bind the data to rectangular SVG elements. The chart’s bars are drawn with SVG `rect` elements, with their dimensions and positions calculated through D3’s linear scaling functions. The visualization greets viewers with a static, aggregated view of the underlying data, without interactive or animated features.

YY-oringe
69% match
Loading thumbnail…

nests1

This visualization presents a filterable bar chart of data on individuals under custody, using a nested hierarchy to organize records by status and priority. The interactive page, built with React and rendered as SVG, loads JSON data from a GitHub Gist and processes it through the `d3.nest()` API to create the structured dataset. The code imports `nest`, `select`, and `remove` from D3 v5, with data cleaning and transformation handled by custom functions in `prepareData.js`, while the `d3.json` method fetches the remote source.

EEvan Misshula
68% match
Loading thumbnail…

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

MMbrownshoes
68% match
Loading thumbnail…

BarChart D3

This example displays a bar chart of billionaire data loaded from a CSV file, mapping company founding years along the x-axis. The visualization uses React with D3 v6, rendering SVG rectangles positioned via index-based calculations. The code loads remote CSV data with d3.csv, though the dataset is logged to the console rather than driving the chart. The bars are appended to an SVG canvas using d3.select and data joins, with fixed dimensions of 1000 by 500 pixels.

Rrichard.adamson@hotmail.com
67% match