Skip to main content
SimilarExport ZIP
100%

ICE_6-SCATTER PLOT

✓ Published0🌍 Public
GGorantla Vishnusai
Last edited Apr 2, 2025
Created on Apr 2, 2025

This looping scatter plot animates between two views of U.S. city demographics, alternating between circular and triangular/square markers. The visualization compares population against GDP per capita, with color coding indicating which metric is larger. Built with D3.js v7, the example loads CSV data, computes linear scales, and toggles between two SVG charts using symbol generators. Axes and legends are drawn separately for each view, with the display switching via the `style.display` property.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-Q1-Reusable-Scatter

A reusable scatter plot displays the relationship between population and GDP for cities in 2023, with population on the x-axis and GDP on the y-axis. The chart is rendered as an SVG using D3 v7, leveraging the `d3.scaleLinear` scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data from the `global_cities_extended.csv` file is loaded with `d3.csv` and filtered to the target year, with points drawn as circles with a fixed radius and opacity.

CCharith Kapuluru
82% match
Loading thumbnail…

Fork of Fork of Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This example shows the population of U.S. cities as a horizontal scatter plot, with each city’s position along the x-axis reflecting its population in millions and circle size and color encoding the same value. It renders as an SVG using D3 v7, loading CSV data from a GitHub gist and sorting cities in descending order. The code builds linear and point scales, adds gridlines and axes, and implements hover tooltips via D3 event handlers.

Kkhushburajan2015@gmail.com
81% match
Loading thumbnail…

Activity-6-Scatterplot

This scatterplot visualizes the relationship between population and GDP per capita for U.S. cities using D3.js v6. The SVG-based chart plots each city as a steel-blue circle with a black stroke, positioned along linear scales for both axes. The code loads data from a GitHub-hosted CSV file, converts the population and GDP values to numbers, and renders axes with formatted tick labels. Interactive tooltips appear on mouseover, displaying each city's name, population, and GDP per capita. The visualization employs d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisBottom and d3.axisLeft for coordinate axes.

GGorantla Vishnusai
81% match
Loading thumbnail…

ICE_7-Assignment-7_ scatter plot

This animated scatter plot explores relationships among US housing market variables, cycling through three attribute pairs every two seconds: average price versus number of sales, then number of sales versus average square footage, and so on. A D3 selection updates the x-scale domain and circle positions via the reusable scatterPlot component. The visualization uses d3-scale’s scaleLinear and extent, d3-axis for labeled axes, and d3-selection for SVG circle joins. Data comes from a CSV file loaded with d3.csv, rendered as an SVG filling the viewport. The code embeds a setInterval timer to swap the x-value accessor, demonstrating dynamic axis rescaling.

Ssowmyakancharla01@gmail.com
81% match
Loading thumbnail…

ICE-7 Common Visualization Idioms

This example demonstrates a reusable scatter plot comparing CO₂ emissions against GDP for six countries. The visualization positions circles along a linear scale for each variable, with axes, labels, and a title generated dynamically. It uses d3.csv to load the data from a CSV file, d3.scaleLinear for coordinate mapping, d3.extent to determine domains, and d3.axisBottom and d3.axisLeft for the axes. The plot is rendered as an SVG with circles styled in steelblue with partial opacity, and the code encapsulates the plotting logic into the `scatterPlot` function, allowing it to be reused with different data variables.

Bbadrinath888@gmail.com
80% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes museum visitor data across four exhibits, cycling which museum is plotted on the x-axis every three seconds. Each dot represents a year (2014–2016) colored pink, green, or black, with its position determined by attendance at different Los Angeles museums. The visualization uses a reusable D3 scatterPlot module built with scaleLinear scales, axisBottom, and axisLeft to render axes and circles. Data is loaded via d3.csv from a GitHub-hosted CSV file, with setInterval triggering redraws that swap the x-axis column among AmericaTropical, Firehouse, ChineseAmerican, and AvilaAdobe.

SSravyaAnnadi
80% match
Loading thumbnail…

6-scatterplot

This scatterplot visualizes the relationship between population and average temperature for U.S. cities, with each point labeled by city name. The chart uses d3.csv to load demographic data from a GitHub Gist and d3.scaleLinear to map population (x-axis) and temperature (y-axis) to SVG coordinates. d3.axisBottom and d3.axisLeft render the labeled axes, while circles with d3.selectAll are colored teal and annotated with text elements. The plot combines axis and point rendering to compare city-level climate patterns against population size.

GGorantla Vishnusai
79% match
Loading thumbnail…

Fork of Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

A fork of a fork of an ICE 6 scatter plot, this visualization displays the populations of US cities as dots along a vertical city axis. Each dot’s horizontal position encodes its population in millions, while both its radius and blue color intensity scale with that value. Built with D3 v7, the code loads CSV data, uses `scalePoint`, `scaleSqrt`, and `scaleSequential`, and renders an SVG with gridlines, axes, labels, and interactive tooltips on mouseover.

Kkhushburajan2015@gmail.com
79% match