Skip to main content
SimilarExport ZIP
100%

Steve's Scatter Plot of State Lats and Longs

✓ Published0🌍 Public
Bbootshine2
Last edited Oct 10, 2019
Created on Oct 10, 2019

A scatter plot maps longitude and latitude coordinates for U.S. states, with each state colored categorically via a d3.scaleOrdinal legend. Built with React and D3 v5, the visualization uses scaleLinear axes, SVG circles for marks, and a tooltip formatted with d3.format. The data is loaded as CSV from a GitHub gist, and axes and legends are rendered as reusable React components.

AI-generated description

A scatter plot of Bee colony loss data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes bee colony loss percentages across years, with each circle representing a state and color encoding the state name. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for the color mapping, and React components for rendering SVG axes, marks, and a color legend. Data is loaded as CSV via d3.csv from a GitHub gist, with tooltips showing loss values on hover through SVG title elements.

Bbootshine2
79% match
Loading thumbnail…

Steve's Scatter Plot with Color, Legend, and Dropdown

This interactive scatter plot from a React and D3 v5 codebase visualizes bee colony loss data. The x-axis is selectable via an HTML dropdown, allowing users to compare percent loss, colony count, or beekeeper count per year. Each state is represented by a colored circle using `d3.scaleOrdinal`, with a corresponding legend. The chart uses SVG rendering and incorporates custom axes built with `d3.scaleLinear` for positioning, sourced from a CSV file.

Bbootshine2
77% match
Loading thumbnail…

scatter plot

This scatter plot displays the population of each U.S. state as a circle, with states positioned along the x-axis and population values mapped to the y-axis. It uses D3 v7 to load CSV data from a GitHub gist, converts the population values to numbers, and renders the plot as an SVG with `d3.scaleBand` for the categorical state axis and `d3.scaleLinear` for the population axis.

Ssivaparchuri2000@gmail.com
75% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of U.S. states from 2018 data, with each state represented as a circle positioned along a linear population axis and a categorical state axis. The visualization is rendered as an SVG using D3 v5, where the circle coordinates are computed via the `scaleLinear` and `scalePoint` scales, and axes are drawn with `axisBottom` and `axisLeft`. The chart includes a title and axis label, with population values formatted using D3's `format` function to abbreviate large numbers.

PPerry
75% match
Loading thumbnail…

state testing

This example displays a map of the United States with each state rendered as a tan SVG path with grey borders on a blue ocean background. The visualization loads US Atlas TopoJSON data and converts it to GeoJSON features using `topojson.feature`, then projects the coordinates with `d3.geoAlbersUsa` and `d3.geoPath` within a React component. Hovering a state changes its fill color to dark green. The code references commented-out scales and data joins for potential color mapping, though the active version only renders the base geography.

Hhunsingeruk@gmail.com
74% match
Loading thumbnail…

Population Scatter Plot

This scatter plot displays the population of each U.S. state along the horizontal axis, with state names on the vertical axis. Built with D3 v5, it uses `scaleLinear` for the population scale and `scalePoint` for the categorical state axis, rendering circles via SVG. Data is loaded from a CSV file using D3’s `csv` method, with axes created by `axisBottom` and `axisLeft`. Tick labels are formatted using `format` to abbreviate large numbers with "B" for billions, and the chart includes a title and axis label.

HHarshinireddyy19
73% match
Loading thumbnail…

Fork of scatter plot

This scatter plot visualizes population by U.S. state, with each state represented as a circle positioned along a categorical x-axis and a linear y-axis scaled to population values. The code loads CSV data via d3.csv, converts population strings to numbers, and renders circles using d3.scaleBand and d3.scaleLinear for axes. Circles are appended to an SVG container with fixed coordinates computed from the scales, using a steelblue fill and a 5-pixel radius. The visualization highlights population disparities across states while maintaining a simple, readable layout.

Ssivaparchuri2000@gmail.com
73% match
Loading thumbnail…

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and sepal width on the y-axis, with each point colored by species. The visualization uses React components to render SVG elements, with d3.scaleLinear for positional axes and d3.scaleOrdinal for categorical coloring. A color legend identifies the three species, and hovering over points reveals tooltips. The chart is built with d3.v5 and React, using axes created from reusable React components.

Bbootshine2
73% match