Reusable D3 Scatter Plot

100%

Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 30, 2026

Created on Mar 30, 2026

This reusable D3 scatter plot visualizes Supreme Court cases from 2018–2024, plotting petitioner codes against respondent codes. Each circle represents a case, colored by issue area (e.g., Criminal Procedure, Civil Rights), with a legend mapping colors to 14 issue categories. Built as a configurable `scatterPlot` function, it uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` to render the SVG chart, complete with labeled axes, title, and interactive resizing via `window.innerWidth` and `window.innerHeight`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot visualizes US Supreme Court cases from 2018 to 2024, plotting each case’s term against its majority vote count. The visualization uses a reusable D3 module, `scatterPlot`, which leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes. Data is loaded via `d3.csv` from a remote GitHub Gist. The SVG chart fills the browser window, with semi-transparent steelblue circles representing individual cases.

Mmustafaksyed1@gmail.com

92% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the distribution of Supreme Court cases by issue area, using data from SCOTUS cases decided between 2018 and 2024. The chart displays the six most common issue areas, with each slice labeled by its case count and a legend identifying the corresponding category names. Built with D3 v7, the visualization uses `d3.csv`, `d3.rollups`, `d3.pie`, and `d3.arc` to process data and generate SVG paths, while `d3.scaleOrdinal` with `schemeCategory10` assigns slice colors. Labels are positioned using arc centroid calculations from a secondary `d3.arc` generator.

Mmustafaksyed1@gmail.com

81% match

Loading thumbnail…

Pie Chart

This pie chart shows the distribution of US Supreme Court cases from 2018 to 2024 across six major issue areas, displaying each category’s share with percentage labels on slices larger than 10% and a legend with exact percentages. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute and render the slices, labels, and legend from a CSV dataset fetched via `d3.csv`. The chart groups cases by issue area, counts them with `d3.rollups`, and sorts the results to highlight the most frequent topics.

Mmustafaksyed1@gmail.com

80% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows the number of Supreme Court cases from 2018 to 2024 grouped by issue area, with bars sorted in descending order and labeled with their counts. The chart is rendered as an SVG using D3 version 7, with scales built via `d3.scaleBand` and `d3.scaleLinear`. It loads the data from a remote CSV file using `d3.csv` and aggregates it with `d3.rollups`. The visualization includes hover effects on the bars, gridlines, axis labels, and a rotated x-axis for readability.

SSai Vamshi B

77% match

Loading thumbnail…

Line Chart

This line chart displays the number of Supreme Court cases per term between 2018 and 2024, sourced from a CSV file of SCOTUS cases. Using D3’s `csv`, `rollups`, and `scaleLinear`, the code aggregates case counts, renders a line with `line`, and adds points as `circle.point` elements. Axes are drawn with `axisBottom`, `axisLeft`, `axisTop`, and labels via `@curran/axis-labels`, over a light gray inner rectangle.

Mmustafaksyed1@gmail.com

77% match

Loading thumbnail…

CSCE 5320 Assignment 5

This visualization presents the total number of U.S. Supreme Court cases from 2018–2024, split into liberal and conservative decision directions. The code loads a CSV dataset via `d3.csv`, computes counts with JavaScript array filters, and renders an SVG bar chart. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.max` for domain scaling. Summary statistics appear in styled HTML text above the chart, which is drawn with `rect` and `text` elements styled via CSS classes.

Mmustafaksyed1@gmail.com

75% match

Loading thumbnail…

Area Chart

This area chart shows the number of Supreme Court cases decided per term from 2018 to 2024, with a red filled area beneath a black line and individual data points. The data is loaded from a CSV file and aggregated using D3’s `rollups` function. The visualization uses D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and an area generator (`area`) to render the chart, with labels added via the `@curran/axis-labels` library.

Mmustafaksyed1@gmail.com

74% match

Loading thumbnail…

Number of SCOTUS Cases by Issue Area

This bar chart displays the number of U.S. Supreme Court cases from 2018 to 2024 grouped by issue area, with issue names mapped from numeric codes and bars sorted in descending order. It uses d3.csv to load the data and d3.rollups to aggregate counts per issue. The visualization employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and SVG rectangles for bars with hover effects. Gridlines, value labels, and rotated axis labels are added via d3.axisBottom, d3.axisLeft, and d3.selectAll. The data is sourced from a GitHub gist CSV file.

Mmustafaksyed1@gmail.com

73% match