Choropleth Scatterplot Ref

Fork of Cat Data draft 1 Scatterplot

This example combines a choropleth map and an animated scatterplot to explore cat breed data, linking geographic origin to life expectancy and weight. The map colors countries by average maximum lifespan using a linear scale, while the scatterplot plots each breed’s max life expectancy against minimum weight, with point size representing population. Built with React and D3 v6, it uses `d3.geoEqualEarth()` projections, `d3.geoPath`, linear and log scales, and SVG rendering. A tooltip provides additional detail on hover.

Cat Data

This example shows a dual-view visualization of cat breeds, combining a choropleth map of countries by urbanization rate with a scatter plot of life expectancy against GDP per capita, colored by continent and sized by population. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection, while the scatter plot uses `d3.scaleLinear` and `d3.scaleLog`. Hovering over data points triggers a tooltip, and animated transitions update both views. The code loads data from a CSV and renders with SVG, handling missing values gracefully.

Fork of Cat Data draft 1 16:25 5/4

This example combines a choropleth map and a scatter plot to explore cat breed data, linking geographic origins to life expectancy and weight. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render countries, colored by a linear scale based on data counts. The scatter plot plots `max_life_expectancy` against `min_weight`, with point size determined by a custom radius function. Both SVGs render with D3 v6, and a tooltip provides interactive details on hover.

Fork of Choropleth for Scatter Ref

This example combines a choropleth map with a scatter plot to explore country-level data. The map uses a green-to-grey color scale to show urbanization rates, while the scatter plot compares life expectancy against GDP per capita, with point size encoding population and color encoding continent. Built with React and D3 v6, the visualization renders as two separate SVG elements side by side. It uses d3.geoEqualEarth and d3.geoPath for the map, plus d3.scaleLinear and d3.scaleOrdinal for the visual channels, with a mouseover tooltip for interactivity.

Fork of Cat Data draft 1 Scatterplot

This visualization combines a choropleth map and scatterplot to explore cat breed characteristics across countries. The map colors countries by origin, while the scatterplot plots maximum life expectancy against minimum weight for each breed. Built with D3.js v6, the code uses `d3.geoEqualEarth` and `d3.geoPath` for map rendering, `d3.scaleLog` for the y-axis, and SVG elements with tooltips. Data comes from CSV files containing breed attributes and geographic mappings.

85% match

Fork of Fork of Cat Data draft 2 get the map to work

This example combines a choropleth world map with a scatter plot to visualize cat breed data. The map colors countries by the number of cat breeds originating there, while the scatter plot shows each breed’s max life expectancy and min weight. It uses d3.geoEqualEarth, d3.geoPath, d3.scaleThreshold, and d3.scaleOrdinal for rendering. The code loads data from CSV files and renders two SVG elements with animated transitions, using the d3.v6 library within a React framework.

84% match

Fork of Fork of Fork of Cat Data draft 3 fixing map countries

This example combines a choropleth map and a scatter plot to visualize cat breed data from Kaggle, using two side-by-side SVG elements. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by breed count, while the scatter plot plots each breed by min weight against max life expectancy, with point size derived from a custom formula. Hovering over the map reveals a tooltip with the country’s cat breeds. The visualization is built with React, D3 v6, and animated transitions.

84% match

Cat Data draft 4 legend, zoom/pan, popuptooltip

This visualization combines a choropleth map with a scatter plot to explore cat breed data. The map uses a threshold color scale to show the number of breeds per country, while the scatter plot displays maximum life expectancy against weight, with points colored by country of origin. The d3.geoEqualEarth projection renders the map, and d3.scaleThreshold maps data counts to a color palette. Interactive tooltips appear on hover, and the chart supports zoom and pan controls. The d3.v6 library handles SVG rendering and chart animations, with data sourced from a Kaggle cat breeds dataset.