Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Scatterplot for peng bird dataset

✓ Published0🌍 Public
Cc_peimann@coloradocollege.edu
Last edited May 10, 2024
Created on May 10, 2024

This interactive world map visualizes global obesity rates, with countries colored on a red sequential scale according to their reported obesity percentage, while nations lacking data remain gray. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries from a GeoJSON world map, then overlays obesity data from an external CSV file. The code employs d3.scaleSequential with d3.interpolateReds to create the color mapping, and d3.json and d3.csv load the respective data sources. Hovering a country turns it orange via CSS, and country labels appear at path centroids. The map is displayed in an SVG container within an HTML page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Responsive Scatter Plot

This responsive scatter plot visualizes obesity trends over time, filtering the dataset to include only records for both sexes. It renders circles on an SVG canvas, with each point representing a year and its corresponding obesity percentage. The chart uses D3 v7’s scaleLinear, axisBottom, and axisLeft to construct the axes, while mouseover and mouseout events highlight individual points in red. The code loads data from a CSV file named `obesity-cleaned.csv` and is built with the d3 library, featuring fixed dimensions and margins.

Cc_peimann@coloradocollege.edu
83% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot maps each country’s birth rate against its calling code, with circle radius scaled by infant mortality, using data from the world-data-2023.csv dataset. The code employs d3.scaleLinear for both axes and d3.axisBottom/axisLeft to render ticks, while d3.csv fetches the remote data. Circles are drawn with SVG via d3.select and .join, and mouseenter events log the underlying data points. The visualization reveals an unorthodox pairing of unrelated numeric attributes, producing a largely arbitrary distribution across the 900×400 pixel SVG canvas.

Cc_peimann@coloradocollege.edu
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Scatterplot for peng bird dataset

This interactive chart displays changes in life expectancy over time for a selected country, alongside the global average trend. A dropdown menu lets users choose a country, triggering a new SVG line chart with axes and a legend. The visualization uses D3.js v6 to load CSV data, compute yearly averages, and render paths via `d3.line` and scales. It is built with React and renders using SVG, with data sourced from a GitHub-hosted CSV.

Cc_peimann@coloradocollege.edu
81% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of country-level data from the World Data 2023 CSV, mapping birth rate against calling code, with circle radius representing infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. SVG circles are generated with d3.selectAll and joined data, filled with a single teal color. The chart includes mouseenter event handlers that log the data point to the console, though no tooltip or interactivity is visible in the rendered output.

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

Fork of Fork of Scatterplot for peng bird dataset

This example visualizes country-level data from the world-data-2023 CSV, plotting birth rate on the x-axis against calling code on the y-axis, with circle radius encoding infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft to render them. Circles are drawn using SVG with d3’s join method, styled in teal, and log data to the console on mouseenter. The chart is built in React with d3.v6, rendering in a fixed 900x400 SVG canvas.

Bbepnye@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatter plot of country-level data from the world-data-2023.csv file, plotting life expectancy on the x-axis and birth rate on the y-axis. The visualization uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to parse the data, map the scales, and render SVG circles with color-coded markers. Despite a title referencing penguin species, the code actually maps each circle’s color based on a species field, while axis labels incorrectly reference flipper length and body mass, reflecting a mismatch between the intended and actual data display.

HHOURPRIMERA@GMAIL.COM
81% match
Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of the world-data-2023 dataset, plotting each country’s birth rate against its calling code, with the radius of each circle representing infant mortality. The visualization uses D3 v4’s `d3.csv` to load the remote data, then builds scales with `d3.scaleLinear` and renders circles and axes using SVG selection methods like `append` and `call`. The data is sourced from a GitHub-hosted CSV file, and the chart is rendered as static SVG with a fixed color fill.

Kkaijavanzante@gmail.com
80% match
Loading thumbnail…

Fork of Fork of Choropleth 5/3

This interactive visualization pairs a choropleth map with a scatter plot to explore global health and economic indicators. The map colors countries by urban rate, while the scatter plot positions countries by life expectancy and GDP per capita, with point size encoding population and color encoding continent. The visualization uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.schemeCategory10. Hovering reveals a tooltip, and the code includes filtering for missing data values.

Cchris.shimotake@gmail.com
80% match