Skip to main content
SimilarExport ZIP
100%

A2Q4

✓ Published0🌍 Public
MmNamratha25
Last edited Jul 20, 2023
Created on Jul 20, 2023

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.

AI-generated description
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…

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

Untitled

This parallel coordinates chart visualizes the cost-of-living index across 74 cities, comparing six dimensions such as consumer price, rent, groceries, and local purchasing power. Grey background paths show all cities, while blue foreground paths highlight those selected via interactive brush filters on each axis. Built with d3.svg, d3.scale.ordinal, and d3.svg.brush, the visualization uses SVG rendering. User interaction toggles the display of foreground lines based on brush extents, providing dynamic focus on subsets of the data.

Mmuzzheng
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
71% 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
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
70% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays the basic cost of living for 15 cities across various US states. Built with React and D3 v5, the visualization renders SVG marks and channels, using a band scale for the categorical y-axis and a linear scale for the numerical x-axis. Data is loaded from a CSV file via d3.csv. The React component manages state and uses useEffect to fetch and slice the data, while d3.scaleBand and d3.scaleLinear map city names and costs to screen coordinates.

Kkarnisrikanth2212
68% match