Ontario Bird Counts with Menus

100%

Ontario Bird Counts with Menus

✓ Published1🌍 Public

Last edited Oct 2, 2019

Created on Oct 2, 2019

Forked from Polished Scatter Plot with Menus

This interactive scatterplot displays Christmas bird counts from the Hamilton, Ontario area, letting users compare yearly trends across three attributes via dropdown menus. The visualization uses React with hooks and D3 v5 scales to map year, count, or hours spent onto the X and Y axes, rendering circles as SVG marks. Bird count data, sourced from the Tidy Tuesday project, is loaded as CSV and filtered through a custom `useData` hook.

AI-generated description

This visualization was originally forked from one of Curran Kelleher's menu examples and modified to include bird count data which originates from R for Data Science's Tidy Tuesday weekly event for June 18, 2019.

It describes the count of birds heard or seen each year around Christmas in the Hamilton area of Ontario.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot of Birds on a tree

A scatter plot shows bird counts at five times of day, with red circles positioned along a point scale for time and a linear scale for count. The code uses D3 v6 to bind the dataset, append SVG circles and value labels, and render axes via `d3.axisBottom` and `d3.axisLeft`. The visualization is fully client-side, using hardcoded sample data and drawing with SVG elements inside an HTML container.

VVenkat-Sumith-Thota

73% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays penguin measurements from a CSV dataset, allowing viewers to change both the x- and y-axes via dropdown menus while the points re-scale dynamically. Built with React and D3 v7 (including `scaleLinear`, `extent`, and `csv` for data loading), it renders as SVG circles with native `<title>` tooltips. Axis tick marks, labels, and a light grid are drawn in separate React components, with dot color fixed to dodger blue. The menus let users explore correlations among attributes like bill length, flipper length, and body mass.

Rrvdv

72% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the penguins dataset, allowing users to choose which attributes appear on the x- and y-axes via dropdown menus. Built with React and the D3.js library, the SVG chart renders circles for each penguin, with axes and tick marks generated by D3's scale functions. The code imports data from a CSV file using D3's `csv` method. Tooltips show the x-axis value for each point, and axis labels dynamically update to reflect the selected attributes. The dropdowns use the `react-dropdown` library, while D3's `scaleLinear`, `extent`, and `format` utilities handle scaling and tick formatting.

Nnghosh319

72% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays Iris flower measurements, allowing users to select which attribute appears on the X and Y axes via dropdown menus. Built with React hooks (useState, useEffect) and D3 v5 scaleLinear and extent utilities, it renders SVG circles with axis components and tooltips, loading data from a CSV URL through D3’s csv function. The visualization updates scales and labels dynamically based on menu selections, with formatted axis ticks using d3.format.

MMarco Malvicini

70% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes and species through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles colored teal, with axes that dynamically update based on selected measurements. The `csv` loader fetches data from a remote URL, while `scaleLinear`, `extent`, and `format` handle scaling and tick labeling. The component-based architecture separates axis rendering, dropdown controls, and mark generation for modular interaction.

Ppnlinyz

70% match

Loading thumbnail…

Scatter Chart with Menus - React & D3

This interactive scatter chart displays the Iris flower dataset, letting users swap the x- and y-axis variables among four numeric measurements and the categorical species attribute via React dropdown menus. The visualization uses D3.js v7 scales (linear and ordinal) to map data to SVG circles, with custom React components for axes and marks. It also demonstrates hybrid state management, where React hooks control the selected attributes while D3 handles the data-driven scales and positioning.

MManon ROMAIN

70% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Jjbruzzo

70% match

Loading thumbnail…

Animated Reusable Scatter Plot with menu

This example presents an interactive scatter plot of the Iris dataset, where users can dynamically select which measurements appear on the X and Y axes via dropdown menus. The visualization renders SVG circles with different symbol shapes representing species, and smoothly animates transitions between axis configurations using D3 transitions. The reusable charts, `scatterPlot` and `menu`, are built with D3 v6 and React, leveraging scales like `scaleLinear` and `scaleOrdinal` along with axis generators. Data is loaded asynchronously from a CSV file, and the plot updates in place when menu selections change.

SShannon Teoh

70% match