EDAV 2022 TTh Project Group 31

100%

EDAV 2022 TTh Project Group 31

✓ Published0🌍 Public

Last edited Dec 15, 2022

Created on Dec 15, 2022

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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.

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

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

80% match

Loading thumbnail…

Line Chart

This line chart displays violent crime rates per 100,000 people for each U.S. state from 2000 to 2019, using data from the CORGIS dataset. Each state is represented by a colored line, with a color legend on the right for identification. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color assignment, rendering paths and hover-able circles in SVG. The `d3.legendColor` API adds the threshold legend, and tooltips reveal exact values on hover.

AArun

78% match

Loading thumbnail…

Untitled

This interactive map visualizes violent crime rates across U.S. states from 1999 to 2019, with dropdown menus to select the year and crime type. Circles sized and colored by bivariate linear scales (d3.scaleLinear) are overlaid on a U.S. map projected using d3.geoAlbersUsa with d3.geoPath. The visualization uses d3.json to load state boundaries and coordinates, with hover tooltips showing state names and values.

Aajeuphoria

78% match

Loading thumbnail…

EDAV_interactive

Four animated bar charts display the reported rate of crimes against women in India across successive years, with categories for female/male and yes/no responses to a survey question. The visualization sequentially transitions between five years of data using D3 v7 transitions that update bar heights, positions, and fill colors. Each staged transition delays two seconds before updating the y-scale domain and rendering new values. The charts render as SVG rectangles with axes, drawing from a CSV dataset about crimes against Indian women.

HHelen-Luwei-Zhang

77% match

Loading thumbnail…

EDAV7_1_axes

Animated bar chart compares reported crimes against women in India across four categories—female/no, female/yes, male/no, male/yes—over multiple years. Six sequential stages animate bar heights and colors, using d3.axisBottom for the x-axis and d3.scaleBand and d3.scaleLinear to map categories and values. The transition API with specified durations and delays animates rect attribute changes, while the SVG background highlights the plot area. Data comes from a GitHub-hosted CSV file.

HHelen-Luwei-Zhang

76% match

Loading thumbnail…

Crime_dataset_year vs crime rates

A bar chart displays U.S. violent crime rates per 100,000 people from 1975 to 2015, showing a rise peaking around 1991 followed by a dramatic decline through 2015. The visualization uses the vega-lite-api to encode year as an ordinal field and violent crime rate as a quantitative field, rendered as bars. Data is loaded via d3.csv from a gist-hosted CSV file, with custom axis styling configured to improve readability.

Yyyaaa1

76% match