Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Kkhushburajan2015@gmail.com
Last edited Oct 16, 2025
Created on Oct 16, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Fork of D3 Scatter Plot -Rajan

This scatter plot ranks major US cities by population magnitude, with each circle’s position and radius encoding the city’s population in millions, while a blue color gradient adds an extra visual cue. The chart loads a CSV from a GitHub gist and uses `d3.csv` with `d3.autoType` to parse the data. It draws axes, gridlines, and labels using `d3.axisLeft`, `d3.axisBottom`, and SVG text elements, while `d3.scaleLinear`, `d3.scalePoint`, and `d3.scaleSqrt` map population to x-position, city name to y-position, and circle size, respectively. Interactive tooltips appear on hover via `d3.select` and mouse events.

Kkhushburajan2015@gmail.com
85% match
Loading thumbnail…

Fork of Ice 6 bar

This bar chart displays population values for 100 synthetic cities, with each bar’s height representing the population count and hover tooltips revealing exact figures. The visualization uses D3.js v7 to load CSV data via `d3.csv`, scale the values with `scaleBand` and `scaleLinear`, and render the chart as SVG. Horizontal grid lines created with `axisLeft` improve readability, while the x-axis labels are rotated to accommodate the many city names.

HHarshithaDontha@my.unt.edu
84% match
Loading thumbnail…

Fork of Fork of HTML Starter - Rajan Shah

This animated scatterplot visualizes the population growth of U.S. cities by comparing 2020 and 2024 population figures on the x- and y-axes, with point size reflecting the absolute growth rate. Built with D3.js, it uses a custom scatter chart function that joins SVG circles with data, animating their entry, update, and exit via `.transition().duration()` calls. The code loads city data from a CSV file, applies linear scales, and includes an interactive tooltip that displays city specifics on mouseover.

Kkhushburajan2015@gmail.com
82% match
Loading thumbnail…

RajanShah

This scatter plot visualizes the populations of major US cities, with each dot positioned along a vertical categorical axis for city names and a horizontal linear population scale. Dot size, color intensity, and position all encode population magnitude, while horizontal gridlines aid readability. Built with D3 v7, the visualization loads CSV data from a GitHub gist, uses `scalePoint` for the city axis, `scaleLinear` for population, and `scaleSqrt` for dot sizing. Hovering reveals a tooltip with the city name and exact population. The SVG renderer includes axis labels and a legend-free color scale using `interpolateBlues`.

Kkhushburajan2015@gmail.com
82% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This visualization uses D3 to render a reusable scatter plot of COVID-19 data, plotting each country’s population against itself while encoding the dataset’s SkinThickness column through symbol shapes. The chart displays axes for both variables, with points positioned using `scaleLinear` and `extent` for domains. The code relies on `d3.scaleOrdinal` to map symbol types and `d3.symbol` to generate the path data, while `axisLeft` and `axisBottom` add the scales. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG with a custom margin and size configuration.

MM Hema
80% match
Loading thumbnail…

Fork of ICE_6

This example visualizes population estimates for a subset of U.S. states using a horizontal bar chart rendered as SVG via React and D3. It shows the relative population sizes for ten states, with each bar’s length encoded by the population value and the state name labeled along the vertical axis. The code loads CSV data from a remote URL, parses the population column as numbers, and uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis. It also employs `axisLeft` and `axisBottom` indirectly through custom tick rendering, with grid lines and tick labels drawn manually using D3 selections and React’s `map` function.

Cchilukuritagore1427@gmail.com
80% match
Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes Olympic Games data, mapping Thirdposition on the x-axis and Total on the y-axis, with each circle’s fill color indicating the country (India, Pakistan, or Australia highlighted, others black). Using D3 v6, the code loads CSV data, applies linear scales via `scaleLinear`, and renders SVG circles with `selectAll().join()`. The axes are generated with `axisLeft` and `axisBottom`, while custom labels rotate text for clarity.

Cchandanagandla
79% match