Skip to main content
SimilarExport ZIP
100%

Fork of Cat Data draft 4 legend, zoom/pan, popuptooltip

✓ Published2🌍 Public
Gg_ivaska@coloradocollege.edu
Last edited May 9, 2024
Created on May 9, 2024

This visualization combines a choropleth map and scatter plot to explore cat breed data from Kaggle. The map uses a `d3.geoEqualEarth` projection with a threshold color scale to show the number of breeds per country, while the scatter plot displays life expectancy against weight. Interactive features include zoom/pan on the map and a tooltip that appears on hover via D3 event listeners. Both SVG panels are rendered with D3 v6 in a React setup, with data loaded from CSV files. The visualization also includes a legend and animated transitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Cat breeds data set: https://www.kaggle.com/datasets/warcoder/cat-breeds-details/discussion

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Cchris.shimotake@gmail.com
95% match
Loading thumbnail…

Fork of Cat Data draft 2 get the map to work

This visualization combines a choropleth map with a scatter plot to explore cat breed data, showing both geographic distribution and trait comparisons. The map uses a `d3.geoEqualEarth` projection and `d3.geoPath` to render country boundaries, with a `d3.scaleThreshold` color scale encoding breed counts, while the scatter plot displays life expectancy against weight. The implementation uses D3 v6 within a React application, rendering to SVG with interactive tooltips. Data on cat breeds comes from a Kaggle dataset, processed into country-level aggregates for the map.

Gg_ivaska@coloradocollege.edu
94% match
Loading thumbnail…

Fork of Cat Data draft 4.1 popuptooltip experiments

This visualization combines a choropleth map with a scatter plot to explore cat breed data. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by breed count, while the scatter plot shows each breed's max life expectancy against max weight. Hovering over a country or data point reveals a tooltip with breed details. The code uses D3 v6 with SVG rendering and animation, and pulls from a Kaggle cat breeds dataset.

Cchris.shimotake@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Fork of Cat Data draft 3 making legend

This visualization combines a geographic choropleth map with a scatter plot to explore cat breed origins and traits. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render a projection of world data, with a threshold color scale indicating the number of breeds per country. The scatter plot uses `max_life_expectancy` and `max_weight` as axes, with each breed represented by a circle. Animated SVG transitions update the visualizations in response to data changes, and a tooltip provides additional details. The code loads data from a CSV file containing cat breed information from Kaggle.

Cchris.shimotake@gmail.com
93% match
Loading thumbnail…

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

This visualization combines a world choropleth map with a scatter plot to explore cat breed data from Kaggle. The map uses `d3.geoEqualEarth` projection with `d3.geoPath` to render geographic boundaries, colored by the count of breeds per country using a `scaleThreshold` color scale. The scatter plot displays maximum life expectancy against minimum weight, with scatter points sized by a computed attribute. Both SVG panels render in React, with an HTML tooltip for interactivity. The visualization is built with d3.v6 and includes animated transitions between views.

Cchris.shimotake@gmail.com
93% match
Loading thumbnail…

Cat Data draft 1

This visualization combines a choropleth map and a scatter plot to explore cat breed data. The map uses `d3.geoEqualEarth` and `d3.geoPath` to display the geographical distribution of breeds, with each country colored according to the number of breeds originating there. The adjacent scatter plot shows the relationship between a breed's maximum life expectancy and minimum weight, with point color assigned via a categorical scale and size derived from a custom function. Both SVG elements are rendered using d3.v6, and a tooltip appears on hover.

Gg_ivaska@coloradocollege.edu
92% match
Loading thumbnail…

Fork of Cat Data draft 4.6 dropdown experiments, Scat Tool Tip,embedding

This interactive visualization explores the origins and physical traits of cat breeds using a linked map and scatterplot. A zoomable, pannable world map, rendered with `d3.geoEqualEarth` and `d3.geoPath`, color-codes countries by the number of breeds originating there. The adjacent scatterplot, built with D3, plots each breed by its maximum life expectancy and weight, with dropdowns to switch the axes. The code also includes a tooltip implementation for hover details, along with planned jitter to reduce overplotting.

Gg_ivaska@coloradocollege.edu
92% match
Loading thumbnail…

Fork of Fork of Cat Data draft 4 dot boom

A synchronized choropleth map and scatter plot visualize cat breed origins, lifespan, and weight. The map uses a `d3.geoEqualEarth` projection and threshold color scale to show breed counts by country, while the scatter plot displays jittered life expectancy against weight, colored by origin country. Both views, rendered as SVG with animation, share a tooltip. Data comes from the Kaggle Cat Breeds Details dataset, processed via React and D3 v6.

Cchris.shimotake@gmail.com
91% match