Reusable Chart Example

100%

Reusable Chart Example

✓ Published0🌍 Public

Aapratt2003

Last edited Sep 28, 2017

Created on Sep 28, 2017

This example demonstrates a reusable line chart built with D3 v4, plotting violent crime rates per 100,000 residents across multiple U.S. cities from 1975 to 2015. The SVG visualization uses the CrimesTransformed.csv dataset, encoding years on the x-axis and violent crime rates on the y-axis, with each city represented as a distinct colored line. The chart is designed as a reusable component, allowing the same visualization logic to be applied to different datasets or configurations.

AI-generated description

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/66d926fe73211fd650ec'>Towards Reusable Charts Example</a>

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2227680&f=16777215&b=0" border="0" height="18" width="83"></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/02163a13a40112e0ab6f14bbacc986f8'>Small Multiples with Reusable Charts</a>

mit Licensed

Similar vizzes

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

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

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.

78% match

Loading thumbnail…

Activity6_Question4

This bubble chart compares violent crime rates and aggravated assault rates across U.S. cities, with bubble size encoding population and distinct colors differentiating cities. The visualization uses d3.csv to load the dataset, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeTableau10 for color assignment. Interactive tooltips appear on mouseover, displaying city name, population, and violent crime count. SVG circles are rendered with D3 v7, and a size legend shows population values of 20,000, 50,000, and 80,000.

AAreeba Hassan

75% match

Loading thumbnail…

Crime Rate Pattern

This animated visualization shows changing crime rates across 41 U.S. cities from 1975 to 2015, with each city represented as a labeled point tracing a path over time. The chart uses a small-multiple style grid where the y-axis encodes crime rate per 100,000 residents and the x-axis encodes years. As the animation plays, points move along each city's trajectory, with a highlighted timeline revealing the current year. The design allows viewers to compare both long-term trends and annual fluctuations in crime rates across different municipalities, using SVG rendering and animation via d3.v4.

Aapratt2003

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

75% match

Loading thumbnail…

Line Chart

This line chart displays the daily number of crimes over a 31-day period, with the x-axis mapping days and the y-axis mapping crime counts. The SVG rendering uses D3 v4, specifically `d3.scaleTime` and `d3.scaleLinear` for position encodings, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to both fields. The line is drawn in steelblue with rounded joins and caps, and the y-axis is labeled "Price ($)".

GGoomble

75% match

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays country crime indices as a line chart, using a bar-chart-style categorical X axis for countries and a linear Y axis for crime scores. Built with D3 v7, it loads data from a CSV file using `d3.csv`, applies a `scaleBand` for country positioning and `scaleLinear` for the crime index range, and draws the line with `d3.line()`. The SVG chart includes axes, labels, and a thick steel-blue stroke, rendered within a fixed 960×400 pixel canvas and styled with external CSS.

Bbhanuprasadk19

74% match