Skip to main content
SimilarExport ZIP
100%

Fork of Fork of D3 Scatter Plot -Rajan

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
89% 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
86% 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
85% 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
85% match
Loading thumbnail…

Fork of Scatter Plot with Color

This horizontal bar chart visualizes the population of US cities in millions, with bars sorted in descending order. The chart uses rectangular marks to encode population values through both position along the x-axis and bar length, while color provides a uniform visual style. The visualization is built using React with D3.js v7, specifically leveraging `d3.scaleLinear` for the continuous value axis and `d3.scaleBand` for the categorical city names. Interactive hover effects adjust bar opacity, and data is loaded from an embedded CSV string containing city-population pairs.

Kkhushburajan2015@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Refactored Bar chart with React & D3 -Rajan

The visualization displays US city population trends through two paired charts: a multi-series line chart comparing simulated population values for 2020, 2022, and 2024, and a combined bar-and-line chart showing 2020 bars with an overlaid growth-rate line. Built with React and D3 v7, it renders to a single responsive SVG using a viewBox. Data comes from a CSV file via `d3.csv`, with additional quantitative series generated through a seeded `mulberry32` random number generator. The implementation uses `d3.axisLeft` for grids, `d3.scaleLinear` for scaling, and a linear index-based x-axis.

Kkhushburajan2015@gmail.com
82% match
Loading thumbnail…

Fork of Stylised Bar chart

This horizontal bar chart displays populations for US cities, sorted in descending order with bars extending along a linear population scale. Built with React and D3 v7, it uses `d3.csv` to load data from a Gist-hosted CSV file and `d3.axisBottom` and `d3.axisLeft` for axes. The chart applies `scaleBand` for city categories and `scaleLinear` for population values, rendering bars as SVG `rect` elements with optional value labels via `d3.format`. A custom axis component adds faint vertical gridlines.

Kkhushburajan2015@gmail.com
81% match
Loading thumbnail…

Fork of Stylised Bar chart

This horizontal bar chart displays the populations of major US cities in millions, using rectangles whose length encodes value and whose vertical position encodes city. Built with React and D3 v7, the visualization loads data from a remote CSV, applies a linear scale for the population axis and a band scale for the categorical city axis, and includes gridlines, axis labels, and hover opacity effects for readability.

Kkhushburajan2015@gmail.com
80% match