Sortable Table with Bars

100%

Sortable Table with Bars

✓ Published0🌍 Public

Last edited Mar 11, 2017

Created on Mar 11, 2017

This visualization presents a sortable table of U.S. state population data by age group, using horizontal bars to show each age category’s proportion of a state’s total population. Clicking a column header re-sorts the table rows in descending order based on that age group’s share. The chart is built with D3 v2 (d3.csv, data joins) and renders each bar as an SVG rect, with width scaled proportionally to the data value. The underlying dataset, readme-states-age.csv, is loaded via d3.csv.

AI-generated description

forked from <a href='http://bl.ocks.org/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/9904798'>Sortable Table with Bars</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Sortable Table with Bars

This example shows a sortable data table of U.S. state populations by age group. Each cell contains a horizontal bar, drawn as an SVG rectangle, whose length is proportional to the percentage of that state’s total population falling into the corresponding age bracket. Clicking a column header sorts the table rows in descending order by the selected age group’s share of the total, allowing quick comparison across states. Hovering over a row highlights its bars in brown. The table is implemented with D3 v3, binding CSV data to an HTML table and using SVG rects for the in-cell bar charts.

AAlainRo

93% match

Loading thumbnail…

sortable table with Bars

A sortable table displays population proportions by age group for each U.S. state, with each cell rendered as a horizontal bar whose width corresponds to the percentage of the state's total. Clicking a column header sorts the rows in descending order by that age group's share. The visualization uses D3 v3 to load CSV data, bind the table structure, and draw the bars as SVG rectangles, with hovering highlighting a row in brown. The included state.csv provides the underlying census data.

深深度碎片

93% match

Loading thumbnail…

Sortable Table with Bars

This example displays demographic data for U.S. states as a sortable HTML table, where each age-bracket column is rendered as a horizontal bar chart. Clicking a column header re-sorts the table rows by the proportion of the population in that age range, with bar lengths proportional to that share. The visualization uses D3 v3 to load the CSV data with `d3.csv`, then builds the table structure with `d3.select`, `selectAll`, and `.data`, appending SVG elements to each cell. The bars are drawn as `rect` elements whose widths are calculated from the percentage values, with hover styling applied via CSS.

Mmbostock

90% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The data is loaded from a CSV using d3.csv. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis with SI prefix formatting via d3.format, and d3.scaleOrdinal with a categorical color palette. d3.stack computes the stacked series, which are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft.

TThanaporn-sk

84% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of different states broken down by age groups, with each bar segmented into colored bands representing the age categories. The chart uses an ordinal x-scale for states, a linear y-scale for population counts, and a color ordinal scale for the age series. The visualization is rendered as SVG via D3 v3, loading data from a CSV file and using d3.csv, d3.scale.ordinal, d3.scale.linear, d3.format, d3.max, d3.keys, and d3.svg.axis. A legend identifies the age groups, while the bars are sorted by total population.

CCBasis

83% match

Loading thumbnail…

d3js clickable, sortable stacked bar chart

This interactive stacked bar chart displays the age distribution of U.S. state populations, with a clickable legend to isolate a single age category and a checkbox to sort bars by value. Built with d3.v3 and SVG, it uses `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to render axes and bars, while animation and a tooltip enhance interactivity. The code reads `state_data.csv` and corrects a pixel-level height calculation error from Mike Bostock’s original example.

KKatiRG

83% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of U.S. states, broken down by seven age groups, with each state’s total population sorted in descending order. The visualization uses a horizontal axis for state abbreviations and a vertical axis for population counts, formatted with SI prefixes (e.g., “10M”). The chart is built with D3 v4, loading data from a CSV via `d3.csv`, computing stacked positions with `d3.stack`, and encoding the categorical age groups with a color scale (`d3.scaleOrdinal`). Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with a legend positioned inside the SVG.

DDinoJay

83% match

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the population distribution across seven age groups for six U.S. states, using a distinct color for each age bracket. The chart is rendered as SVG, with bars grouped per state along the x-axis and population counts on the y-axis, formatted with SI prefixes like "10M." Built with D3 v4, the visualization loads data from a CSV file via `d3.csv`, uses `d3.scaleBand` for the x-positions and `d3.scaleLinear` for the y-axis, and applies an ordinal color scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend is manually constructed with SVG rectangles and text.

JJboulery

82% match