pictogram table | d3v4

100%

pictogram table | d3v4

✓ Published0🌍 Public

Last edited May 30, 2017

Created on May 30, 2017

This pictogram table shows employment, wage, and change data for U.S. states, using icons to represent values. Clicking column headers sorts the rows. The implementation builds an HTML table with d3, using `d3.scaleThreshold` to map values to icon counts or arrow directions, and `d3.format` for text. State icons come from ProPublica’s StateFace font, other icons from Font Awesome. Data is loaded from a local JSON file using queue.

AI-generated description

an es2015 d3v4 iteration on the block Pictogram Table from @armollica

a comment in a recent talk from @elijah_meeks exposed me to the ISOTYPE design system developed by Otto Neurath and colleagues in the 1930s. learning about the origins of the use of pictograms in information graphics sparked my interest in working with d3 examples like this. for more, read on to this nice set of blog posts on ISOTYPE from @eagereyes

special thanks to @yonester who helped me spot just what I needed to get column sorting working again. hooray d3js community!

yonester [10:45 AM] @micahstubbs you just forgot to merge tdEnter and tdUpdate before you update the HTML. I.e., you need tdEnter.merge(tdUpdate).html(d => d.html);

Using pictograms within a table. Click headers to sort.

Notes: Uses technique from this blog post to implement HTML tables with D3 in a nice way. Growth rates are from Q2-2012 to Q2-2015. Data from BLS. State icons from ProPublica's StateFace project. Other icons from Font Awesome.

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/2bcc47b549613454f6441881fdc48b43'>pictogram table | d3v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

first

A US state heatmap visualizes minimum wage values over time. Users select among four wage metrics—effective minimum wage, effective minimum wage in 2020 dollars, federal minimum wage, or state minimum wage—from a dropdown. D3 v7 renders an SVG grid with years on the x-axis and states on the y-axis, where each rectangle's color is mapped via `d3.scaleSequential` with `d3.interpolateTurbo`. Hovering a cell triggers a tooltip showing the state, year, and precise numeric value. Data is loaded remotely from a CSV hosted on GitHub.

Hh.harrycoding@gmail.com

70% match

Loading thumbnail…

State Icons

State Icons displays every U.S. state as a compact 48×48 pixel SVG icon, with each state’s name shown above its clipped silhouette. The visualization uses a single TopoJSON file, pre-processed from USGS data, where each state is projected with its own local coordinate system and simplified via topojson. The code applies `d3.geo.path` with a null projection to render the pre-transformed geometries, and loads the combined data through `d3.json`. This approach preserves recognizable state shapes while fitting them uniformly into the small grid.

Mmbostock

70% 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.

深深度碎片

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

69% match

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

69% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

68% match

Loading thumbnail…

Sortable Table with Bars

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.

TThanaporn-sk

68% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the unemployment rate across US states, displaying the top 10 states with the highest rates. The chart uses D3.js v5 version's `pie` and `arc` functions to generate SVG path segments, with each state represented by a colored slice. A legend on the right lists each state, its corresponding color, and the unemployment rate in US dollars. The data is loaded from a CSV file hosted on GitHub Gist, processed using D3's `csv` and `scaleOrdinal` functions.

AAmruthaVee

68% match