Skip to main content
SimilarExport ZIP
100%

Scatterplot Visualization

✓ Published5🌍 Public
CChhoden Sherpa
Last edited May 11, 2022
Created on Mar 19, 2022

This scatterplot visualization explores the correlation between the average price of a boba drink and the cost of living index across 35 U.S. cities. Each circle represents a city, positioned by its cost of living index on the x-axis and boba price on the y-axis. The D3.js code reads data from a CSV file, scales axes with `d3.scaleLinear`, and renders the chart as SVG elements. Interactive tooltips display city name, price, and cost index on hover, using D3's event listeners to show and hide the tooltip div.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

A2Q4

This scatterplot shows the correlation between the average price of a boba drink and the cost of living index for 35 U.S. cities. Interactive tooltips display each city’s name, drink price, and cost index when hovering over a point. The visualization is built with D3 v7 using an SVG canvas, and leverages `d3.scaleLinear` for the axes, `d3.axisLeft` and `d3.axisBottom` for the scales, and `d3.csv` to load the data. Axis labels and a title are drawn with SVG text elements.

MmNamratha25
92% match
Loading thumbnail…

Fork of Scatterplot Visualization

This scatterplot shows the relationship between the average price of boba tea and the cost of living index across 34 U.S. cities. Each purple circle represents a city, with hover interactions revealing a yellow tooltip displaying the city name, price, and index. The visualization uses D3.js v7 with SVG rendering and animations triggered through mouse events. The data is loaded from a CSV file, and the chart includes axis labels, a title, and blue-colored axis annotations. The code specifically employs `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.csv` to construct the plot.

MMalempatiSaranya
92% match
Loading thumbnail…

D3.js Bar Chart

This bar chart visualizes the 15 most expensive cities by their mean cost of living index, using data filtered from a CSV file loaded via `d3.csv`. Each bar represents a city, with values aggregated through `d3.nest()` and `d3.mean`, and rendered as an SVG via `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear on mouseover, driven by D3 v4 event handlers. The chart includes rotated x-axis labels and a bold title, with bars colored steelblue by default and highlighted orange on hover.

EElvis Araka
72% match
Loading thumbnail…

D3.js Bar Chart

This bar chart displays the top 15 most expensive cities by their mean cost of living index, sourced from a CSV file. Using D3 v4, the code filters data by rank, nests entries by city, and computes averages with `d3.nest().rollup()`. It renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes, while interactive tooltips appear on mouseover via `d3.select` and style changes.

Kkottenikhil
72% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for various beverages, with each circle representing a beverage. The chart uses D3.js v6 to load a CSV dataset, scale the axes linearly, and render circles positioned by calorie content on the x-axis and price on the y-axis. Axes are generated using d3.axisBottom and d3.axisLeft, while circles are appended as SVG elements with a steelblue fill. The static, responsive layout centers the plot on a white background, with styled text and axes for readability.

Rr79162810@gmail.com
71% match
Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80
71% match
Loading thumbnail…

Fork of D3.js Bar Chart

This example shows a bar chart of the 15 most expensive cities by average cost of living index, with a bold title and hover tooltips revealing each city’s exact value. It loads CSV data from a GitHub gist via `d3.csv`, filters and aggregates it with `d3.nest()` and `d3.mean()`, then renders an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Bars highlight orange on mouseover, with a tooltip appended dynamically to the page.

Kkottenikhil
71% match
Loading thumbnail…

Bubble Chart Visualization

This bubble chart visualizes the number of boba shops across California cities, with each circle’s area encoding the count. Circles start at the center and are arranged by a force simulation using `d3.forceSimulation`, including center, charge, and collide forces to prevent overlap. Users can drag circles, which temporarily fixes their position, and hover to see a tooltip with the city name and count via mouse events. The chart is rendered as SVG using D3 v7, with color from `d3.scaleOrdinal(d3.schemeSet3)`, and loads data from a CSV file.

CChhoden Sherpa
70% match