100%

Treemap Bar Chart

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Jan 13, 2017

This example visualizes six years of crime statistics across U.S. states, using a treemap bar chart to compare counts for different offense types. The chart shows hierarchical data where each state’s total crime count is divided into rectangular sections representing specific crimes. Built with dex.js and D3.js, the visualization reads from a CSV file and renders as an interactive treemap-based bar composition. The code uses d3.csv to load data and the dex.charts.d3.TreemapBarChart component, with manual sizing and hover effects controlling opacity for emphasis.

AI-generated description

Treemap Bar Chart

This is a reusable dex.js bar chart composed of treemaps based upon Chris Givens example.

References

dex.js The main site

mit Licensed

Similar vizzes

Loading thumbnail…

Treemap

A treemap visualizes crime statistics from the crime2000.csv file, displaying a hierarchy of states, crime types, and specific offenses with rectangle sizes proportional to incident counts. The chart uses dex.js, specifically the `dex.charts.d3.Treemap` class, to render the hierarchical data with auto-sizing text and shaded partitions. It builds on Mike Bostock's treemap example, leveraging the d3.csv parser to load the data and render the visualization within the TreemapParent div.

PPatMartin

86% match

Loading thumbnail…

A6 Diverging Color Bar Chart

This diverging bar chart visualizes changes in violent crime rates across U.S. states between 2000 and 2019, using a red-blue color scale to distinguish increases from decreases. The chart shows both positive and negative changes diverging from a central zero axis, with state labels positioned on the appropriate side of each bar. Built with D3 v7, it uses `d3.scaleDiverging` and `d3.scaleThreshold` for color mapping, while `d3.legendColor` renders the threshold legend. Data comes from the CORGIS dataset, and hovering reveals precise values. The visualization employs an SVG container with a centered y-axis and responsive sizing based on window dimensions.

NNoah C.

76% match

Loading thumbnail…

A7 Multi-Line Chart

This chart visualizes violent crime rates per 100,000 people across U.S. states from 2000 to 2019, using data from the CORGIS dataset. Each state is shown as a multi-line path with colored dots for individual data points, and hovering reveals exact values. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.line` for path generation, and `d3.legendColor` from the d3-legend library for the color legend. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with an ordinal color scale distinguishing states.

NNoah C.

75% match

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes reported crimes across Texas cities from January to September as an interactive 3D bar chart, with each city represented by a cluster of colored bars for each month. The visualization uses D3.js v5 for data loading and scales, while the d3-x3d plugin and the d3-3d library generate the 3D geometry and rendering via X3DOM. The CSV dataset is parsed with d3.csv, and the chart is created with `d3.x3d.chart.barChartMultiSeries()`, displaying crime counts on the axes.

Nnagarajuobbineni

75% match

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes crime statistics across Texas cities from January to September using an interactive 3D bar chart rendered with the d3-x3d library and X3DOM. The multi-series chart displays six crime categories—Murder, Car_Theft, Child_Abuse, Accidents, Cyber_Crimes, and Burglary—as colored bars in a three-dimensional space. Data is loaded from a remote CSV file using d3.csv, parsed into a nested format, and passed to the d3.x3d.chart.barChartMultiSeries() component. The visualization relies on d3.v5 for data handling and the d3-3d plugin to project 2D data into 3D coordinates.

Nnagarajuobbineni

75% match

Loading thumbnail…

EDAV 2022 TTh Project Group 31

This interactive bar chart compares violent crime rates per 100,000 population across 15 U.S. states and the District of Columbia for 2002 and 2014. Clicking the gray year label toggles between the two datasets, animating bar heights and colors via D3 v7 transitions. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, with SVG rectangles rendered through `d3.selectAll` and a custom `update` function. Axis labels and margins are configured manually; data appears hardcoded in arrays rather than loaded from an external file.

NNaishadh Parmar

73% match

Loading thumbnail…

Fork of Heatmap with time series in D3

This heatmap shows the property-related crime rate per 100,000 people for each U.S. state from 2000 to 2019, with states on the y-axis and years on the x-axis. Each cell encodes the crime rate using a sequential blue color scale based on `d3.scaleSequential` and `d3.interpolateBlues`, with a color threshold legend from `d3.legendColor`. The visualization uses D3 v6 to load data from a CORGIS CSV via `d3.csv`, render SVG rectangles, and display a hover tooltip showing the exact offense count.

Fferneyhoughedward@gmail.com

73% match

Loading thumbnail…

Line Chart-project

This visualization shows violent crime rates per 100,000 people across U.S. states from 2000 to 2019, with each state represented as a colored line and dot. The chart uses d3.line and d3.scaleOrdinal to draw paths, while d3.legendColor from d3-legend renders a color legend. Hovering over dots reveals exact crime values and state names via SVG title elements. Data comes from the CORGIS dataset, processed with d3.csv and d3.group, and rendered as an SVG using D3 v7.

AArun

73% match