Skip to main content
SimilarExport ZIP
100%

Assignment 6: Scatter Plot

✓ Published0🌍 Public
Aamrubal
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from HTML Starter

A scatter plot visualizes the correlation between property and violent crime rates in California and New York from 1960 to 2019. The chart uses d3.csv to load state_crime.csv, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.legendColor to color-code the two states. Circles are positioned with SVG attributes and a legend is rendered horizontally.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays U.S. metro area violent crime rates across multiple offense types, letting users swap the x- and y-axes via dropdown menus built with React state. The visualization uses D3’s scaleLinear for axes, csv parsing for data loading, and renders all marks and axes as SVG. Interactive color legend hovers fade unselected categories, while circle tooltips show formatted values.

Yyyaaa1
76% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays U.S. metro area crime statistics, with dropdown menus letting users independently select which two attributes (e.g., violent crime, homicide, robbery, year) map to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear`, `extent`, `csv`, and SVG circles to render the marks. A color legend highlights specific values on hover. Data comes from a CSV file loaded via D3’s `csv` function.

Ssophburke
76% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays U.S. Metro Areas violent crime data, letting users select which attribute to plot on each axis via dropdown menus. The visualization uses React for component-based rendering and d3.scaleLinear for axis scales, with SVG circles representing data points. Users can compare metrics including violent crime, homicides, robberies, and total population across metro areas. The chart includes axis labels, formatted tick values using d3.format, and a color legend with hover interactions that fade non-hovered categories. Data is loaded from a CSV file using d3.csv.

Yyyaaa1
76% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the violent crime rates of U.S. metro areas, with the x and y axes each controlled by a dropdown menu. Users can independently select which crime metric to plot on each axis, including violent crime, homicides, rapes, robberies, or year. The visualization uses React for the interactive components, D3.js scales (scaleLinear, extent) and SVG elements for rendering the circles and axes. Data is loaded via D3’s csv function from a remote gist URL.

Yyyaaa1
74% match
Loading thumbnail…

A6 Qualitative Scatter Plot

This scatter plot displays the relationship between burglary and motor crime rates across U.S. states from 2015 to 2019, with each dot representing a state-year observation. The visualization uses color to distinguish years, employing an ordinal color scale with a d3.legendColor legend. Hovering over a dot reveals precise values through SVG title tooltips. The chart is rendered with D3 v7, using d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping, with data sourced from the CORGIS dataset.

NNoah C.
74% 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.
74% match
Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot displays crime data from Costa Rica, showing the relationship between two selectable columns (such as Canton and Victima) using dot size and position, with a third column controlling dot color. Users choose the axes and color attribute from dropdown menus. Built with D3 v5, the visualization uses `scaleOrdinal` for color mapping, `axisLeft` and `axisBottom` for axes, and animates point placement with `transition().duration(2000)` and a delay. The dataset `Crimenes.csv` is loaded via `csv` and includes counts like "Cantidad_Delitos" for crimes by canton, victim type, and offense. A color legend, generated by `colorLegend.js`, appears on the right, using `schemeCategory10` for distinct hues.

Eest85
73% match
Loading thumbnail…

Intersections

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

Aadventuresenglish.info@gmail.com
73% match