Sortable Table with Bars

100%

Sortable Table with Bars

✓ Published0🌍 Public

Last edited Nov 17, 2017

Created on Nov 17, 2017

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.

AI-generated description

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

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

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

mit Licensed

Similar vizzes

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.

深深度碎片

94% 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

93% 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…

d3js clickable stacked bar chart

This stacked bar chart displays the age distribution of each U.S. state’s population, with segments colored by age group. A clickable legend toggles individual categories on and off, and hovering over a bar segment highlights it and shows a tooltip with the exact value. Built with D3.js v3, it uses ordinal and linear scales with SVG axes, and animates bar transitions via legend-driven class selections. Data comes from the included `state_data.csv` file.

KKatiRG

82% match

Loading thumbnail…

Sorting grouped bars

This example shows how to sort grouped bar charts in two distinct ways: either the bars within each group can be sorted by value, or the groups themselves can be sorted alphabetically. The visualization uses D3.js version 3 to render an SVG with an ordinal x-scale for states and an inner ordinal scale for age categories, with a linear y-scale for population counts. The code loads data from a CSV file containing state population figures across age brackets, and it adjusts the domain of the x0 scale to sort states alphabetically, while the A1–A3 comments enable sorting individual bars within each state by their values.

EEE2dev

82% match

Loading thumbnail…

transition of bar chart

This interactive bar chart compares the proportions of different age brackets across U.S. states, using a dropdown menu to switch between age groups. Built with D3 v4 and rendered as SVG, the visualization animates horizontal bars as the selected age bracket changes, with bars transitioning vertically, resizing horizontally, and labels and value texts updating smoothly. The chart is based on data from a CSV file, normalizing each state's population by age bracket to percentages, and displays the top 10 states for the selected age group. Interactivity includes a dropdown menu and a keyboard modifier (Alt) to control animation speed, with a default auto-advance after 5 seconds.

663anp3ca

82% 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

82% match

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays the percentage distribution of age groups across U.S. states, sorting states by the proportion of their youngest residents. Using D3 v4, it applies `d3.stack` with `stackOffsetExpand` to scale each bar to full height, then renders SVG rectangles with an ordinal color scale for age categories. Axis labels are formatted as percentages, and a custom legend anchored to each bar’s final segment identifies each series. The chart loads population data from `data.csv` and sorts states in descending order of the "Under 5 Years" share.

Mmbostock

81% match