Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 4, 2024

Created on Apr 4, 2024

This bubble chart visualizes weather conditions across 20 US cities, plotting average temperature on the x-axis, precipitation on the y-axis, and encoding air quality index through bubble size and color. The visualization uses d3.csv to load Weather.csv data, with d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, while a legend displays both air quality index ranges and city color assignments. The SVG rendering includes animated transitions for tooltip visibility and hover effects.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Question4_9

This bubble chart visualizes the correlation between temperature, humidity, and precipitation across 29 US cities, with each bubble’s position encoding temperature and humidity while its size and color represent precipitation and city. The visualization includes an SVG scatterplot with axes, tooltips on hover, and legends for both bubble size and city colors. It uses D3 v7 APIs such as `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft`, with data loaded from a local CSV file. Bubble colors are generated using `d3.interpolateTurbo`, and interactive tooltips support mouseover, mousemove, and mouseleave events.

Llikhitha.sarahah01@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

This fork of the HTML Starter visualizes 156 months of synthetic climate data from 2010 to 2022, combining three variables in a single SVG chart. It shows rainfall as skyblue bars against the left axis, while temperature and CO₂ appear as tomato and green lines against the right axis. The code uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.line to render the axes and paths. Data are generated in-browser with Math.sin, Math.cos, and Math.random.

Ssaiabhishekmunnangi@gmail.com

79% match

Loading thumbnail…

Fork of HTML Starter

This interactive horizon chart visualizes air pollution measurements across multiple monitoring stations, allowing users to explore data by month, pollutant type (PM2.5, PM10, NO2, O3, CO, SO2), color scheme, and the number of bands. Built with D3.js version 7, it uses the `d3.csv` loader for external data and renders SVG output. The implementation uses `d3.timeParse` for date handling, `d3.schemeBlues` and related sequential color schemes, and a custom `HorizonChart` function with configurable curves and margins. Users can dynamically filter categories and adjust band intensity through slider controls.

Eeyxxr1260@gmail.com

79% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes climate trends from 2010 to 2022 with a synthetic dataset of 156 monthly records. It combines sky-blue bars for rainfall on a left axis with tomato-colored temperature and green CO₂ lines on a right axis. The chart uses D3.js version 7, employing `d3.scaleTime` for the time axis, `d3.scaleLinear` for the dual quantitative scales, and `d3.line` for the path generation. `d3.select` appends SVG elements, while `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` render the axes.

Vveginetiumeshchandra@lbrce.ac.in

78% match

Loading thumbnail…

Q4

This bubble chart visualizes the correlation between mean temperature, humidity, and wind speed for 50 US cities. Each city is a circle whose x-position maps to temperature, y-position to humidity, and size to wind speed, with color encoded by city name via the Turbo color scale. Built with D3 v7, the SVG visualization includes axes, a wind-speed legend, and a hover tooltip. Data is loaded from a local CSV file using `d3.csv`.

Jjangalaupender@my.unt.edu

78% match

Loading thumbnail…

HTML starter

This scatter plot visualizes the relationship between cities and datetime, with color intensity encoding humidity levels from the Vancouver dataset. The visualization uses D3 v7 to load CSV data and render an SVG with circular marks positioned by a band scale for city names on the x-axis and datetime on the y-axis. A sequential viridis color scale maps humidity values, and a gradient legend with an axis provides a reference for interpreting the color encoding. The code applies D3’s scaleBand, scaleSequential, and axis components to construct the chart, which displays the original weather data from the external CSV source.

Aanushapodapati99@gmail.com

78% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com

78% match

Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart of average temperatures by city, rendered as an SVG with a steelblue fill for each bar and an orange hover highlight. It loads data from a CSV file and uses D3 v3’s `scaleBand` and `scaleLinear` to position bars, while `axisBottom` and `axisLeft` add labeled axes with a thinned tick list. The chart is built on an 800×500 canvas with margins, a title, and sans-serif styling from a separate CSS file. The code imports the D3 library via a module script and includes a minimal `index.js` that writes a placeholder text.

Jjanisha30gowda@gmail.com

77% match