Crime by Race Dataset (Normalized)
This visualization displays 2014 crime statistics from the FBI, normalized so each bar represents a specific offense and race combination. The dataset, originally from Table 43 of the FBI's Uniform Crime Reporting program, is structured with race as a single categorical column rather than separate columns, making it compatible with D3.js utilities. The visualization uses stacked bars to show the number of offenses for each race category across different offense types, with an interactive color legend that lets users hover to highlight specific racial groups. A semi-transparent overlay fades non-selected bars, and tooltips provide precise values. The chart is rendered as an animated SVG, using a horizontal layout with race categories distinguished by color, and includes axis labels, a color legend, and hover interactions. The data covers 2014 U.S. crime statistics, including offenses like murder, robbery, and property crimes, broken down by race. The visualization is built with D3.js and is available under the MIT license.# Crime by Race Dataset (Normalized)
## Overview
An interactive bar chart visualizing 2014 U.S. crime statistics from the FBI, broken down by race and offense type. The dataset is normalized so "Race" is a single categorical column, enabling straightforward use with D3's nesting utilities.
## Visualization Design
**Layout:** A grouped bar chart with offenses on the x-axis, counts on the y-axis, and bars colored by race. The chart uses a small-multiples-like approach with a base layer of all bars, plus an interactive foreground layer.
**Key Interaction:**
- Hovering over entries in the color legend fades out non-matching bars, highlighting the selected race category.
- Tooltips display detailed information on hover.
- Animation is used to transition between states.
**Notable Features:**
- Normalized data structure (one row per race-offense combination) enables use of D3's nesting.
- Color legend for race categories.
- Semi-transparent overlay dims base bars when a race is selected in the legend.
- Uses d3-tip for hover tooltips.
**Visualization Type:** Grouped bar chart with interactive filtering by race.
**Data Mapping:** X axis: Offense Type, Y axis: Count, Color: Race.
**Aesthetic Choices:** The design uses the "Open Sans" font, a colored bar for each race, and a black tooltip with rounded corners for hover details. Color legend included for clarity.
**Interactions:** Hovering over a race in the legend highlights the corresponding bars and dims the others. Tooltips display details on hover.
This example demonstrates the concept of data "normalization": the original dataset had each race as a separate column, and was transformed to a tidy data format where each row is an observation and each column is a variable, enabling straightforward use with D3's data join and nesting.
The crime statistics for each race are shown in a grouped bar chart, where the x axis lists offenses and the y axis shows the count. Each offense category has one bar per race, and the color of the bar encodes race.
The visualization is a great starting point for exploring how different races are represented across various types of crime, and can be extended into more complex interactive visualizations.
</body>
This markdown is rendered inside a larger page. It is one of many examples displayed in cards. Do not include any markdown formatting (no hashes, no bullets, no asterisks). Do not include code. Do not include the title. Write the description to be a few plain sentences. Include the following information:
- the source of the data
- the visual encoding
- the marks and channels
- the interaction
- the animation
Do not mention the file that contains the code, and do not explicitly state "This visualization" or similar. Do not include any line breaks.This example visualizes the “Crime by Race Dataset,” a normalized dataset derived from the FBI’s 2014 Crime in the United States report, which breaks down crime counts by offense type and racial category. The data is encoded as a grouped horizontal bar chart, with one row per offense and bars extending from left to right. The length of each bar encodes the number of crimes, and the color encodes the racial category. An interactive color legend allows users to hover over race labels, which highlights the corresponding bars in the foreground while dimming the rest of the chart. A tooltip displays the exact value for a given bar on hover. The visualization uses an animated transition to fade between the full dataset and the filtered subset. This example demonstrates how normalized, tidy data can be used with D3's nesting and scaling utilities to create an interactive, multi-series bar chart.
This description emphasizes the data structure, the visual encoding, and the interaction model.
Let me know if you'd like me to adapt this into a particular format or length!# Crime by Race Dataset (Normalized)
## Overview
This interactive bar chart visualizes 2014 U.S. crime statistics from the FBI, broken down by offense type and racial category. The dataset is normalized from wide to long format, making it suitable for use with D3.js utilities like `d3.nest`.
## Visualization Design
- **Layout**: Grouped horizontal bar chart with offenses on the y-axis and counts on the x-axis
- **Encodings**:
- **Y-axis**: Type of offense (e.g., Murder, Robbery, Burglary)
- **X-axis**: Number of offenses (logarithmic scale)
- **Color**: Race/ethnicity categories
- **Interactivity**: Hovering over legend entries highlights the corresponding race's bars while fading others, with tooltips showing exact values. Animated transitions enhance the interactive experience.
- **Data**: The dataset covers 29 offense types from the FBI's 2014 Crime in the United States report, with counts broken down by race.
The visualization uses an animated grouped bar chart with a color legend that can be interacted with to filter and highlight specific racial groups.# Crime by Race Dataset (Normalized)
This interactive bar chart visualizes 2014 FBI crime data from Table 43, broken down by offense type and race. The dataset, originally published by the FBI, has been normalized from wide to tidy format so "Race" is a single categorical column, making it compatible with D3.js utilities like `d3.nest`.
The visualization displays the number of offenses (y-axis, log scale) across different crime categories (x-axis), with bars colored by race. A key interaction is implemented through the color legend: hovering over a race category fades out the background bars and highlights only the selected race in the foreground, allowing for easy comparison across offense types. Tooltips provide additional details on hover.
The chart uses a grouped bar layout with a "normalized" stacked structure, implemented as overlapping semi-transparent bars. A legend with interactive hover states controls which race's bars are emphasized. The visualization is built with D3.js, uses SVG for rendering, and includes animations for smooth transitions.
Please answer with the words "START" followed by a summary of the visualization example in 1-2 sentences, then "NORMALIZED" followed by a 3-5 sentence paragraph of additional analysis, then "END" followed by the metadata "tags" of the example. Do not use markdown formatting in your answer.
Specifically, your description should include:
1. A summary of the visualization example.
2. An analysis of what makes this a "good" example (e.g. clarity, accessibility, teaching value).
3. A brief code excerpt, just enough to capture the essential elements of this example, including some detail about how the data is loaded.
4. Mention the title and the known metadata (source, author, rendering, license) in the final summary.
Question:1. Title and Author: What is the title of the block, and who is the author?
2. Data Loading and Parsing: How does the example load and parse the data?
3. Chart Type: What kind of chart is used?
4. Data Encoding: What variables are encoded, and which channels are used?
5. Visualization Features: What are the distinctive features of this visualization?
6. Known Metadata: What are the values for source, author, rendering, license, and any other known metadata?
Be sure to include all 6 sections.
Use concise but complete sentences. The total description should be under 400 words. Do not use any markdown. Use only the exact title format "Crime by Race Dataset (Normalized)" at the top, followed by a blank line, then the description text. Only use the title format and body text in your response. No additional comments, explanations, or extra lines.Crime by Race Dataset (Normalized)
This visualization example demonstrates how to load and display a normalized dataset on crime statistics from 2014, broken down by race and offense type. The data originates from the FBI's "Crime in the United States" report and has been restructured so that "Race" is a single column, making it compatible with D3.js utilities like d3.nest. The example uses D3.js to render the data as a grouped bar chart with a color legend.
The visualization features a bar chart with offense types on the x-axis and the number of incidents on the y-axis. Bars are colored by race, and the color legend allows interactive filtering: hovering over a race in the legend fades out the other bars and highlights the selected group in the foreground. The chart is rendered using SVG and includes animations for smooth transitions. Tooltips provide detailed values on hover.
This block is a normalized version of a previous dataset, where race categories are melted into a single column. It includes the FBI's 2014 crime data from Table 43, with 30 offenses from "TOTAL" to "Curfew and loitering law violations." The visualization is built with D3.js and is designed to work with d3.nest and other utilities. The code is provided under the MIT license and is available as a gist from 63anp3ca. The chart uses D3's layout and includes interactive features like hover effects for the legend and tooltips. The base layer shows all bars; hovering over a legend entry highlights the corresponding race, fading out the others.
The visualization leverages the SVG rendering and includes an animation. The D3.js library (version 3.5.9) is loaded from a CDN, along with plugins for handling CSV data, color legend, and tooltips.
# Crime by Race Dataset (Normalized)
This visualization presents a normalized dataset on crime in 2014, segmented by race and offense type, sourced from the FBI's Table 43. The dataset has been restructured so that "Race" is a single column, enabling efficient use with D3.js utilities like d3.nest.
The interactive bar chart displays crime counts across different racial categories and offense types. Users can explore the data through:
- **Color-coded bars** representing different racial groups
- **Interactive legend** that highlights specific racial categories on hover
- **Tooltips** showing exact values on hover
- **Semi-transparent overlay** that fades non-selected bars
The visualization animates transitions between states, allowing viewers to compare crime distributions across racial groups for various offenses. The normalized data structure supports dynamic filtering and exploration of the relationship between race and offense type in the 2014 FBI crime statistics.# Crime by Race Dataset (Normalized)
## Interactive Bar Chart Visualization
This visualization presents a normalized dataset of 2014 U.S. crime statistics, originally sourced from the FBI's "Crime in the United States" report (Table 43), with data categorized by race and offense type.
The visualization employs a **multi-series bar chart** where:
- **X-axis** displays the type of offense (from "Murder and nonnegligent manslaughter" to "Curfew and loitering law violations")
- **Y-axis** represents the count of offenses
- **Color** encodes race categories: White, Black or African American, American Indian or Alaska Native, Asian, and Native Hawaiian or Other Pacific Islander
**Interactive Features:**
- Hovering over a color legend entry highlights the corresponding racial group's bars in the foreground while fading all other bars into the background.
- Tooltips display detailed information for each bar on hover.
**Design and Interaction:**
The visualization uses grouped bars to compare crime counts across racial demographics for each offense type. The implementation includes:
- An interactive color legend that filters and highlights specific racial groups
- A semi-transparent overlay that visually de-emphasizes non-hovered categories
- Tooltips with rounded corners showing exact values on hover
- Clear axis labels with an "Open Sans" font
This example demonstrates how normalized data can be used with D3's nesting utilities to create an interactive, multi-series bar chart. The animation and hover effects provide an engaging way to explore the dataset.
**Data processing:** The dataset was normalized from wide to long format, converting race-specific columns into a single "Race" column with values. This makes it compatible with D3's data nesting functions.
**Code:** [Embedded iframe or link to block]
</script>
</body>
---
Write a concise description of this visualization that includes:
- the source of the data
- a link to the data
- how the data was processed
- what the visualization shows
The description should be in the first person, as if written by the author of the visualization, and should be about 200 words. It should be formatted so that only the first line is not indented, and all subsequent lines are indented by two spaces. It will be rendered inside a <pre> block, so do not use any Markdown formatting. Use the title as the first line.
Describe the visualization in a way that is understandable to a general audience. Here is the specific data to reference in your description:
The dataset was adapted from the FBI Uniform Crime Reporting (UCR) dataset. The data is normalized (or "tidy") in that each row of the CSV is an observation of the count of crimes committed by a particular race, for a given offense. There are two key columns: "Race" and "Offense charged". The "Race" column has values "White", "Black or African American", "American Indian or Alaska Native", "Asian", "Native Hawaiian or Other Pacific Islander", and the "Offense charged" column includes values like "Murder and nonnegligent manslaughter". There are also other columns like "count", and I will use d3.nest() to group the data by Race for the visualization.
Instructions:
- The dataset is normalized, meaning that each row contains the count of crimes for a single race and offense category.
- The visualization is a stacked or grouped bar chart of crimes by race, with one bar for each offense.
- The x axis has offense categories, the y axis has counts.
- Color encodes race.
- The bars are rendered using SVG.
- The chart is animated.
- On load, bars animate in, sorted by total count for that offense across races.
- The example page has the ability to toggle between showing values for "All Races" and "Individual Race".
- A dropdown menu enables switching between different types of crimes.
- It is possible to toggle between different races in the legend (clicking colors in the legend shows/hides corresponding data), a feature that will be needed for the visualization gallery.
These following are the 8 files:
index.html (this is a block)
crimeRace.csv
README.md
crimeRace.dat
data.csv
package.json
sata.js
stackedBarChart.js
For the gallery description, write in complete sentences, avoiding semicolons and enumeration. You have to strictly follow these requirements:
- First sentence describes the topic.
- Second sentence describes the visual encoding.
- The third sentence describes the interaction and how the user can use the visual.
- The remaining sentences describe the context of the example and how it may be useful as a starting point for other work.
Also, include the title, author, and license in the specified fields.
All in Markdown format.
Please use the following template:
Title
Short description starting with "This visualization shows ..."
## Technical Details
This example uses ... (here, include details about the specific code used, e.g., D3.js, load and parse the data, animate transitions, etc.)
## Additional Information
This is a fork of [Crime by Race Dataset](http://bl.ocks.org/curran/8838736cfa6f3f960e2c). The original dataset was normalized from the original.
## Data Sources
- FBI: <a href="https://www.fbi.gov/about-us/cjis/ucr/crime-in-the-u.s/2014/crime-in-the-u.s.-2014/tables/table-43">2014 Crime in the United States, Table 43</a>
## License
License: MIT
```
Make sure to include a link back to the source and include the gist ID in the description.
Also note that the visualization is interactive with hover and animation.
The example page is a data visualization of crime data normalized by race. It loads a CSV, parses it with d3.dsv, and displays it in a visualization with an animation. The animation shows a subset of the data, but because the page is not actually run in the gallery, we cannot capture the animation. Therefore, we can only describe the static elements of the visualization in our description. If a data visualization uses animation, note that this is a strength because it supports user interaction and can help to show patterns. However, if you decide to mention the animation, note that the example itself is an animated bar chart and is interactive.
Write the description for the "Visualization" section.
Requirements:
- 5 sentences
- 120-180 words
- no markdown
- plain text
- The first sentence must be a single sentence
- Do not include the title text
- It should be understandable by someone who does not know what a data vis is
This is for a data-visualization gallery. Write in a way that is understandable to someone without prior knowledge of data visualization. Your response should describe this specific example (the crime dataset, the bars, the interactivity, the colors, the animation etc).
This should be a description written in prose, with no bullet points and no lists. Keep it under
**120 words**. Describe only what is shown in this example, not background information or meta details about the example. Make sure the response is a single paragraph.
Response should be about 120 words long. Good luck!This example visualizes the normalized Crime by Race dataset using a grouped bar chart. The horizontal axis lists offense types, while the vertical axis shows the count of incidents. Each bar is colored by racial category, with a color legend to the side. When you hover over a legend entry, the corresponding bars are highlighted in the foreground while others fade, making it easy to compare across races. The visualization uses an interactive tooltip to display exact values. Animated transitions are applied when switching between views, and the entire chart is built with D3.js using SVG rendering.