Untitled

100%

✓ Published0🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

Animated bubble chart tracks the changing acreage burned by wildfire causes across nine time periods. A slider selects each dataset, triggering a D3 force simulation that transitions circle positions and sizes to reflect the new values. Circles are colored using a chromatic scale and labeled by cause, with hover effects highlighting individual nodes via SVG styling. The visualization relies on d3.forceSimulation for layout and d3-transition animations to smoothly interpolate between states, rendering wildfire statistics as a comparative, interactive time series.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

DataViz All together

An interactive dashboard combines a stacked bar chart with a bubble chart to explore wildfire causes across U.S. states from 2001 to 2015. The bar chart, built with React and D3 v5, uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to show the number of wildfires by fire size class, segmented by cause including debris burning and lightning, with a dropdown menu filtering by state. A separate bubble chart visualizes the total acres burned by cause using a d3.pack layout. Data comes from a CSV file of wildfire statistics.

AAndrey Getmanov

81% match

Loading thumbnail…

Untitled

This interactive map visualizes wildfire data across U.S. states, using size and color to represent fire frequency or intensity. Built with React and D3 v5, it renders a geographic map with state boundaries, reading wildfire records from a CSV file. Users can click a state to zoom in and see more detail, with the map’s projection and path drawing handled by `d3.geo.albersUsa` and `d3.geo.path`. The animation and interaction are driven by React state, while data parsing uses `d3.csv`.

PPavelyev Ivan

80% match

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani

80% match

Loading thumbnail…

Fork of DataViz All together656565

This interactive dashboard visualizes wildfire statistics from a CSV dataset, showing the number of wildfires by fire size class for each year from 2001 to 2015. Users select a year through a dropdown menu or range slider, which updates stacked bar charts rendered with SVG rectangles in React. The visualization uses D3 scales (scaleBand, scaleLinear, scaleOrdinal) and includes a color legend to distinguish fire causes such as debris burning, lightning, and miscellaneous sources. A secondary zoomable bubble chart, built with react-bubble-chart, displays legend data with hover effects.

GGorbonosov Ilya

79% match

Loading thumbnail…

Bubble Chart

This bubble chart displays the locations and burn acreage of wildfires and prescribed fires across the United States from late 2019. The map uses an Albers USA projection via `d3.geoPath` to render state boundaries, while fire incidents are plotted as circles sized with a `d3.scaleSqrt` based on the ACRES field. Wildfires are filled in red, prescribed fires in green, and unknown types in white. The visualization includes a legend showing area scale examples and fire type colors.

Ddonaldminer

78% match

Loading thumbnail…

Fork of DataViz All together

A fork of an earlier NBA data visualization, this web application presents annual wildfire statistics as an interactive bar chart. A dropdown menu allows the user to select a year from 2001 to 2015, and the chart updates to show the number of wildfires by fire size class for that year, with each bar color-coded by a specific cause (e.g., debris burning, lightning). The visualization is built with React and D3, using `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` for the color legend, and `csv` to load data from a remote GitHub repository. The rendered SVG includes a tooltip on each rectangle to reveal the precise count.

GGorbonosov Ilya

76% match

Loading thumbnail…

US Wildfire map

This interactive visualization combines a choropleth map of US wildfire burn areas with a stacked bar chart of fire causes. The map uses d3.geoRobinson projection and d3.geoPath to render state boundaries, with color encoding by total fire size and zoom-on-click functionality. A React-based bar chart displays fire counts by size class for selected states and years, with d3.scaleOrdinal color coding for causes. The Robinson projection and d3-scale-chromatic threshold scales handle the geographic and color mappings.

AAndrey Getmanov

75% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

75% match