Skip to main content
SimilarExport ZIP
100%

Scatter-plot matrix plot

✓ Published0🌍 Public
Hhxu51@usfca.edu
Last edited May 15, 2025
Created on May 15, 2025
Forked from Choropleth map

This scatter-plot matrix compares daily air quality (AQI), temperature, and annual municipal greenhouse gas emissions in San Francisco from 2020 to 2022. Each cell pairs two variables, with points colored by year using `d3.scaleOrdinal` and `d3.schemeCategory10`. The code loads both CSV files via `d3.csv` with `d3.autoType`, then aggregates emissions per fiscal year using `d3.rollup`. Tooltips appear on hover, and linear scales per trait are created with `d3.scaleLinear`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot Matrix graph

This scatter plot matrix shows the relationships between air quality (AQI), temperature, and municipal greenhouse gas emissions in San Francisco across fiscal years 2020–2022. Color-coded points for each year visualize correlations between all variable pairs in a grid of small multiples. Built with D3 v7, the visualization uses `d3.csv` for data loading, `d3.rollup` to aggregate emissions data, and `d3.scaleLinear` for axis scales. The SVG rendering applies a categorical color scale via `d3.scaleOrdinal` and draws circles with SVG paths.

Hhxu51@usfca.edu
94% match
Loading thumbnail…

Scatter Plot Matrix graph

This scatter plot matrix reveals relationships between daily Air Quality Index, temperature, and total municipal greenhouse gas emissions in San Francisco from 2020 to 2022, with points colored by year. It combines data from two CSV files, aggregating emissions by fiscal year to join with daily weather readings. The visualization uses D3 v7's `d3.scaleLinear` for axes, `d3.rollup` for data aggregation, and `d3.schemeCategory10` for color encoding. Each cell displays dots representing individual days, with SVG circles providing interactive tooltips showing exact values.

Hhxu51@usfca.edu
93% match
Loading thumbnail…

HeatMap

This heatmap visualizes San Francisco municipal greenhouse gas emissions by commodity information across fiscal years 2020–2022, using color intensity to represent the total mtCO₂e per category per year. It reads emissions data from a CSV file, aggregates it with `d3.rollups` and `d3.sum`, and renders an SVG via `d3.scaleBand` for axes and `d3.scaleSequential` with an Orange-Red interpolator for the color gradient. Hovering a cell displays a tooltip with commodity, year, and formatted emissions value.

Hhxu51@usfca.edu
78% match
Loading thumbnail…

Scatter Plot

This scatter plot displays hourly temperature readings in San Francisco over several days, with time on the x-axis and temperature on the y-axis. The visualization uses an area chart with a smooth curve to highlight temperature fluctuations, with data loaded from a CSV file via `d3.csv`. The code employs `d3.scaleTime` and `d3.scaleLinear` for axes, rendered as SVG with `d3.axisBottom` and `d3.axisLeft`. A red semi-transparent circle effect is applied using CSS, while the chart includes labeled axes and a title.

Ggregosaure
78% match
Loading thumbnail…

Time-Series Chart

This time-series chart displays San Francisco’s community-wide greenhouse gas emissions from 1990 onward, grouped by sector (such as Buildings, Transportation, and Municipal) with each trend drawn as a separate colored line. Data is aggregated by summing the Emissions_mtCO2e column by sector and year from a CSV file. The visualization uses D3 v7’s `d3.rollups`, `d3.scaleLinear`, and `d3.line` with monotone X interpolation, while color comes from the ColorBrewer Set2 palette via `d3.scaleOrdinal`. An interactive tooltip, built with D3’s selection API, appears on mouse events but is not configured to follow the mouse.

Hhxu51@usfca.edu
77% match
Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with each point representing a single observation. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for the axes, and `d3.axisBottom` and `d3.axisLeft` to generate the gridlines with tick marks. Circles are styled with semi-transparent steelblue fill, and data is loaded from a CSV file containing timestamp and temperature values.

Vvic126
76% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data is loaded via `d3.csv` from a dataset by Data Canvas - Sense Your City. Using D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG with semi-transparent steelblue circles, axis labels, and a title, all styled through an external CSS file.

Nnkohdatavis
76% match
Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

LLex
76% match