Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Responsive Scatter Plot

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

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.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

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.

Cc_peimann@coloradocollege.edu
83% match
Loading thumbnail…

Fork of Goals Scatter Plot with Hover

This scatter plot visualizes heart health data from a CSV source, plotting BMI against age categories with circles colored by sex. Built using D3.js, the visualization fetches data via d3-fetch's `csv` function and renders responsive axes with the `@curran/responsive-axes` library. Each circle includes a tooltip via `append('title')` that displays BMI and age values on hover, while mouseover transitions enlarge the circle radius using `select(this).transition().attr('r')`. The plot uses a linear scale for both axes and a gray background rectangle to highlight the data area.

Sshreyasribearelly@gmail.com
82% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes the relationship between height and weight for individuals in a demographic dataset, with points colored by gender (blue for male, pink for female). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders circles on an SVG canvas. D3's `scaleLinear` and `extent` functions map the raw measurements to pixel coordinates, while `axisLeft` and `axisBottom` create labeled axes for weight and height. The chart fills the browser window and includes custom axis label styling.

Ssahithya.voleti@gmail.com
79% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes a weight-and-height dataset for males and females, with each circle colored by gender. An animation cycles the x-axis between the Weight and Height columns every five seconds using `setInterval`. The plot is generated in SVG using D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module, which leverages `join` for efficient element updates.

Ssaijahnaviappineni
79% match
Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

JJoshua chirchir
79% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

Ssravya7136@gmail.com
78% match
Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes the relationship between total fat content and calories for various food items, with each data point represented as a circle. The chart uses D3.js v7 (d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to load nutritional data from a GitHub gist and render an SVG with interactive hover effects that enlarge dots. Axes include gridlines, while labeled axes and a title clarify the comparison.

Mmanthenasirisha06@gmail.com
78% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This example visualizes diabetes-related health metrics in a responsive scatter plot, mapping pregnancies on the x-axis, glucose levels on the y-axis, and varying symbol shapes based on skin thickness. It uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, d3.symbols, and d3.symbol to generate SVG marks. The reusable chart function supports custom accessors, margins, and symbol size, drawing data from a CSV of diabetes records. The plot fills the browser window with hidden scrollbars and large axis tick text.

MM Hema
78% match