Fork of Scatterplot Visualization

100%

Fork of Scatterplot Visualization

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

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.

AI-generated description

https://gist.githubusercontent.com/MalempatiSaranya/6df74a31fd3e51b3ed6ef14d9bc95edf/raw/62cdc4c8f0a18feacbf11c3eef43c174a2e92934/PRICE.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot Visualization

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.

CChhoden Sherpa

92% match

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

87% 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

73% 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

71% match

Loading thumbnail…

Activity6_question4

This bubble chart visualizes the relationship between cost of living, rent price, and population across 20 expensive global cities, with bubble size representing residents and color denoting region. It uses D3 v6 to create an SVG visualization, employing d3.scaleLinear for the x and y axes, d3.scaleSqrt for bubble radii, and d3.scaleOrdinal with the Tableau10 scheme for regional coloring. Interactive tooltips appear on mouseover, revealing city details. The chart includes dual legends for both bubble size and regional color coding, rendered from a CSV data file.

Hharinihari6791@gmail.com

71% 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

70% match

Loading thumbnail…

Scatter Plot using D3.JS

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

Kkottenikhil

70% match