Skip to main content
SimilarExport ZIP
100%

Line Chart Using a Qualitative Color Scale with D3

✓ Published1🌍 Public
OOlha
Last edited Apr 18, 2022
Created on Mar 8, 2022

This line chart tracks abortion rates over time across multiple U.S. states, with each state represented by a separate colored line using a qualitative Set1 color scale from ColorBrewer. A legend to the right identifies each state, and hovering over individual data points reveals an interactive tooltip with the year, state, and rate. The visualization is built with D3 v7, using `d3.scaleOrdinal` for color assignment, `d3.line` for path generation, and SVG rendering with animated tooltip transitions.

AI-generated description

Assignment 6 part A+

Line chart with at least 4 separate lines colored using a qualitative color scale with the appropriate legend.

I've generated and used this color schema: https://colorbrewer2.org/?type=qualitative&scheme=Set1&n=8 but later I've got that I can load colors directly fromt the https://colorbrewer2.org/export/colorbrewer.js and use in the code.

Provided example refers to the v3 of D3 and some of the methods mentioned are deprecated, e.g. scale.category10. Also http should be changed to https in order colorbrew to work.

documentation https://github.com/d3/d3/blob/main/API.md

MIT Licensed

Similar vizzes

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
88% match
Loading thumbnail…

Bar Chart with a Sequential Color Scale with D3

This bar chart displays abortion rates for 15–17-year-olds across U.S. states in 2010, using a sequential color scale from light blue to dark blue to encode rate values. Each state’s bar is colored via `d3.scaleSequential` with `d3.extent` domain, and an interactive tooltip appears on mouseover. The visualization uses D3 v7 to render SVG elements, including axes via `d3.axisBottom` and `d3.axisLeft`, plus a color legend from the `d3-legend` library. Data is loaded from a CSV file using `d3.csv`.

OOlha
85% match
Loading thumbnail…

Heatmap with D3

This heatmap visualizes abortion rates per 1,000 women aged 15–17 across U.S. states over multiple years, using a linear color scale from light gray to red to indicate rate intensity. The D3 v7 code loads data from a CSV and renders an SVG with `d3.scaleBand` for the x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleLinear` for color encoding. It appends rectangles for each state-year pair, plus a legend and axis labels.

OOlha
82% match
Loading thumbnail…

Heatmap with p5.js

This heatmap visualizes abortion rates per 1,000 women for eight U.S. states over 16 years, using a green color scale where darker shades represent lower rates and lighter shades indicate higher rates. It is rendered with p5.js through a React-based VizHub setup, loading CSV data from a GitHub gist. The code iterates through table rows, positioning colored squares in a grid while labeling state abbreviations and years along the axes. A supplemental legend explains the rate categories from below 10 to above 40.

OOlha
74% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the count of a phenomenon across U.S. states, grouped by region (South, West, Midwest, Northeast) over five years (2011–2015), with each region represented by a distinct colored line. The visualization uses D3 v5’s `nest()` and `rollup()` to aggregate state-level data from a CSV file, then renders paths with `d3.line()`. It employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10` for axes and color encoding, plus a custom `colorLegend` component for region labels. SVG rendering includes axis labels and a title, with data sourced from the Data Canvas - Sense Your City project.

Sshehryar-hashir
73% match
Loading thumbnail…

ICE-7 Abortion Rates US States : Shreeti Upreti

This visualization displays abortion rates for U.S. states over time, with each state represented by a colored line connecting data points. Hovering over a black dot reveals a tooltip with the exact year, state, and rate. Built with React, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color assignment, and d3.legendColor for the legend. Data is loaded from a CSV file via d3.csv, and the SVG rendering includes animated transitions for the tooltip’s opacity.

SShreeti Upreti
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
72% match
Loading thumbnail…

Line chart with multiple lines

A line chart displays the number of reviews per day for multiple US states, with each state represented by a colored line. A legend allows clicking to highlight or fade individual states. Built with D3 v5, the visualization uses `d3.nest`, `d3.line`, `d3.curveBasis`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10`. Data is loaded via `d3.csv` from a VizHub dataset. SVG rendering includes axes, gridlines, and a title.

RResl411
71% match