Andrey Getmanov

@andreygetmanov·11 public vizzes

Fork of Pollution in US with counties by React and d3

This choropleth map of US counties visualizes PM2.5 concentration per year from 2000 to 2018, allowing users to select a specific year or trigger a play animation that cycles through the data. The map colors each county using a sequential YlGnBu color scale via `d3.scaleSequential` and `d3.interpolateYlGnBu`, with grey indicating missing data. The map is rendered with `d3.geoPath` and a `geoIdentity` projection, while a slider and play button control the temporal dimension. Data comes from a CSV file of county-level PM2.5 values, and county boundaries from the US Atlas TopoJSON.

May 31, 2022

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.

May 31, 2022

Loading thumbnail…

Fork of React Starter

A choropleth map of U.S. county unemployment rates colors each county with a blue sequential scale, using a quantize scale with nine bins from 1% to 10%. The visualization loads unemployment data from a CSV file and county and state boundaries from a TopoJSON file. The React app renders an SVG via D3’s `geoPath` projection, with state borders stroked in white and hover tooltips showing county names, state names, and exact rates.

May 31, 2022

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.

May 30, 2022

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

A choropleth map of the United States shows the relative number of COVID-19 cases, with state colors mapped to the log of the 7-day average positive test count using `d3.scaleThreshold` and `schemeOrRd`. Hovering a state turns it green, and a tooltip reveals additional 7-day averages for deaths, tests, positivity rate, and per-capita positives. The map is rendered with `d3.geoPath` and `geoAlbersUsa` from TopoJSON data, while a `VoronoiOverlay` using `d3.Delaunay` enables mouse interactions. React manages the overlay component, and a custom color legend displays the threshold scale.

May 30, 2022

Loading thumbnail…

React App

This React example demonstrates a bubble chart visualization using the `@weknow/react-bubble-chart-d3` library, which wraps D3’s force simulation for layout. The chart displays nine category labels—such as CRM, API, and Mobile—sized by numeric values, with a legend and custom click handlers for both bubbles and legend items. The rendering is encapsulated in an ErrorBoundary component that provides fallback error messages. The chart uses configurable graph properties for zoom and offset, while CSS handles label styling and hover behaviors for medium and small bubbles.

May 30, 2022

Loading thumbnail…

Untitled

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.

May 30, 2022

Loading thumbnail…

Untitled

An interactive choropleth of US states allows users to click a state to zoom in and highlight its boundaries, with the map rendered via d3.geo.path and TopoJSON. Wildfire data is loaded from a CSV, though the visualization primarily shows state selection and zoom animation using React state management. The albersUsa projection scales and translates to focus on selected regions, with transitions animating the zoom effect.

May 29, 2022

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This bar chart visualizes wildfire counts by fire size class across different years, using data from a public GitHub dataset. Each bar represents a fire size category, with stacked segments showing the number of fires attributed to different causes, including arson, lightning, and equipment use. Users can select a year from a dropdown menu to update the chart. The visualization is built with React and D3 v5, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for the color legend, all rendered as SVG elements.

May 27, 2022

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption, broken down by account number, with each bar segment colored to represent a different account. Built with D3.js version 7 and the d3-scale-chromatic library, the visualization uses `d3.stack()` to transform the data into stacked series, then renders rectangles scaled by `scaleLinear` and positioned with `scaleBand`. The chart displays SVG output and includes interactive hover effects that change bar opacity and reveal tooltips showing segment values in kilowatt-hours.

May 24, 2022

Loading thumbnail…

ICE - 7 Pie Chart Maanas Katta

This visualization displays a pie chart ranking the top 10 countries by deaths from air pollution in 2020. Each slice is labeled with the country name and value, rendered as SVG text. The chart uses D3 v5, specifically the `d3.pie` and `d3.arc` generators, with the HTML page loading `bundle.js` to draw the chart. Styling is handled through embedded CSS, and the data source is not specified in the visible code.

May 19, 2022