Skip to main content
SimilarExport ZIP
100%

A7 Small Multiples Line Chart

✓ Published1🌍 Public
NNoah C.
Last edited Mar 8, 2024
Created on Mar 8, 2024

This small-multiple line chart displays marijuana usage rates per 1000 people for ages 18–25 across US states, using data from the CORGIS dataset. Each state’s trend line is rendered in its own SVG cell, colored via a d3.scaleOrdinal palette, with a d3-legend color threshold legend. The visualization uses d3.group to separate data by state, d3.line to create paths, and d3.axisBottom and d3.axisLeft for axes, with a title overlaid in HTML.

AI-generated description

Visualization of marijuana usage rates of people 18-25 (per 1000 people) by state from the CORGIS dataset made with D3. Color legend and threshold code from Susie Lu. Implementation from D3 Graph Gallery. ChatGPT used for title/legend formatting.

Fullscreen to see legend.

MIT Licensed

Similar vizzes

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…

A5 Bubble Plot (D3)

This bubble plot visualizes alcohol and tobacco usage across U.S. states, with circle size encoding population and color intensity representing alcohol use rates per 1000 people. Built with D3 v7, it uses `d3.scaleLinear` for position, radius, and color mapping, plus SVG circles with `title` elements for hover tooltips. The chart loads CSV data from a GitHub gist and displays axes with custom tick formatting, along with descriptive legends and labels.

NNoah C.
75% match
Loading thumbnail…

Line Chart with D3

This example visualizes abortion rates for 15-17-year-olds across eight U.S. states from 1985 to 2017 as a multi-series line chart, with each state distinguished by a color-coded ordinal scale and a d3-legend. It renders using SVG with animated tooltips on circular data points that display the year, state, and rate on mouseover. The visualization is built with D3 v7, using d3.group for data nesting, d3.line for path generation, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, drawing from CSV data loaded via d3.csv.

OOlha
75% match
Loading thumbnail…

Visualization 2 (Multiline graph)

This chart displays population distributions for six U.S. states, broken down into seven age groups. A grouped bar chart, it uses horizontal positioning for states and color-coded bars for each age bracket, with a legend on the right. The visualization loads CSV data via `d3.csvParse` and renders SVG elements using D3 v5, employing `d3.scaleBand` for the x and subgroup positions, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Pprincit
75% match
Loading thumbnail…

Assignment 2: Bar Graph (Working Version)

This bar graph displays total marijuana new users aged 18–25 for each U.S. state plus Washington, D.C., using horizontal bars scaled by value. The visualization loads data from a CSV file via p5.js’s `loadTable` in `preload`, then draws the chart in `setup` and `draw` with canvas rectangles and lines. State names appear on the left, with corresponding numeric labels at each bar’s end. The code uses p5.js 1.4.0 for rendering, with axes, tick marks, and a title generated programmatically on a 1500×1500 canvas.

Aamrubal
75% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the population distribution across seven age groups for six U.S. states, using a distinct color for each age bracket. The chart is rendered as SVG, with bars grouped per state along the x-axis and population counts on the y-axis, formatted with SI prefixes like "10M." Built with D3 v4, the visualization loads data from a CSV file via `d3.csv`, uses `d3.scaleBand` for the x-positions and `d3.scaleLinear` for the y-axis, and applies an ordinal color scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend is manually constructed with SVG rectangles and text.

JJboulery
74% match
Loading thumbnail…

Assignment 2: Dot Plot (working!)

This dot plot displays the total number of new marijuana users aged 18–25 for each U.S. state and the District of Columbia. Each state is listed vertically with its corresponding value plotted as a point along a horizontal scale. The visualization uses the p5.js library to load a CSV dataset, render the canvas, and draw axes, gridlines, labels, and data points. The data source is a remote CSV file containing state names and user totals.

Aamrubal
74% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the populations of six U.S. states across seven age groups, loaded from a CSV file via d3.csv. The visualization uses d3.scaleBand for the state and age-group positions, d3.scaleLinear for the population axis, and d3.scaleOrdinal with a categorical color range to distinguish age categories. Bars are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft, while d3.format applies SI prefixes (e.g., “10M”) to tick labels. A legend maps colors to age groups.

Mmbostock
74% match