Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Cchris.shimotake@gmail.com
Last edited May 6, 2024
Created on May 6, 2024

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.

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…

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
96% match
Loading thumbnail…

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

This visualization combines a choropleth map and a scatter plot to explore cat breed data. The left map displays the geographic origin of breeds, using a color scale based on the count of breeds per country. The right scatter plot compares maximum life expectancy against minimum weight for each breed. The code uses D3.js v6, specifically `d3.geoEqualEarth` for map projection and `d3.geoPath` for rendering geographic paths. Both visualizations are rendered as SVGs, with tooltips providing additional detail on hover.

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

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.

Cchris.shimotake@gmail.com
95% 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
95% match
Loading thumbnail…

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.

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

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.

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

Fork of Fork of Cat Data draft 5 scatter tooltip, changeable axes

This example visualizes cat breed data with two linked views. A zoomable world map on the left uses a choropleth encoding to show the number of cat breeds per country, while a scatterplot on the right plots breeds by selected attributes like life expectancy and weight. The visualization uses `d3.geoEqualEarth` and `d3.geoPath` for the map projection, and allows users to change axes via dropdown controls. It loads the cat breed dataset from Kaggle, rendering with SVG and featuring animated transitions.

Cchris.shimotake@gmail.com
94% 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