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

100%

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

✓ Published0🌍 Public

Last edited Oct 30, 2019

Created on Oct 30, 2019

Forked from Steve's Scatter Plot with Color and Legend

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.

AI-generated description

A scatter plot of Bee colony loss data.

Uses html <select> statement for dropdown to choose percent loss, total colonies, or total beekeepers.

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

95% match

Loading thumbnail…

Steve's Interactive Scatter Plot with Color and Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Using React and D3 v5, the SVG-based visualization employs `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for species-based coloring. Hovering over the color legend highlights the corresponding species by fading other points to 30% opacity, while native SVG `<title>` elements provide basic tooltips. The chart includes labeled axes and a species legend, with data loaded asynchronously via D3’s `csv` parser.

Bbootshine2

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst of Bee Colony Statistics in the US

A zoomable sunburst chart displays US bee colony statistics, breaking down each state by year and further by loss, beekeepers, and colony counts. The interactive visualization allows users to click on segments to drill down into the hierarchy, with animated transitions smoothly rescaling the arcs. Built with D3 v5, it uses the `d3.hierarchy` and `d3.partition` layouts, renders via SVG, and animates with `transition.attrTween`. Data comes from a generated `flare.json` file, ported from an Observable notebook, with colors assigned per top-level state category.

Bbootshine2

79% match

Loading thumbnail…

Colm Lang A5 | Bubble Chart

This bubble chart visualizes bee colony loss across four U.S. states from 2019 to 2021, plotting starting colony counts on the y-axis against time quarters on the x-axis. Each bubble’s size encodes the percentage of colonies lost, while its color distinguishes the state, with legends showing both scales. The visualization is built with D3 v7 and the d3-legend extension, using SVG rendering. Data is loaded from a CSV file via `d3.csv`, with axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

CColm Lang

78% match

Loading thumbnail…

Fork of beeswarm

This visualization displays a beeswarm plot of honey bee colony loss percentages across different U.S. states in 2015, with each circle representing a reported cause of loss positioned along a logarithmic x-axis. The chart uses d3.forceSimulation with forceX and forceCollide to arrange the data points, while d3.voronoi polygons provide hover detection and interactive highlighting. The code uses d3.csv to load data_2015.csv and renders the results as an SVG with a logarithmic scale axis.

Rryan-dirajlal

78% 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

78% match

Loading thumbnail…

US States Heatmap of Bee Colony Loss

This interactive map visualizes annual bee colony loss across US states, with a dropdown to switch between percent loss, colony count, and beekeeper count metrics. The choropleth uses a blue sequential color scale applied through `d3.scaleThreshold`, mapping each state’s value to its fill. States are drawn as SVG paths generated by `d3.geoPath` with a `d3.geoAlbersUsa` projection from TopoJSON data, while hover effects and a tooltip (via `d3-tip`) highlight individual states. The data comes from a CSV file loaded with `d3.csv`, and the interface is built using React components.

Bbootshine2

77% match

Loading thumbnail…

Fork of Percent Bee Colony Loss by State and Year

A square for each state-year pair encodes the percentage of bee colony loss using a red color scale, with states sorted by their worst recorded loss. The visualization reveals no clear geographic or temporal trends, suggesting colony losses are randomly distributed across the US. Built with the vega-lite-api, the chart uses `markRect()` for the tiles, `fieldN` for categorization, and a custom tooltip to display state, year, and loss values. Data comes from the Bee Colony Loss3.csv file, with appearance customized via a separate config file.

Sstanemurhula

77% match