Scatter Plot Matrix graph

100%

Scatter Plot Matrix graph

✓ Published1🌍 Public

Last edited May 6, 2025

Created on Apr 12, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Scatter-plot matrix plot

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`.

Hhxu51@usfca.edu

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

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

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

78% match

Loading thumbnail…

Scatter Plot

This scatter plot displays temperature readings from San Francisco over time, with an overlaid maroon area fill beneath a line connecting the data points. The visualization uses D3 v6 to load CSV data, map timestamps to a time scale, and temperatures to a linear scale with axis ticks and labels. The SVG rendering includes a custom area generator with curveBasis for smoothing, and the chart is styled with labeled axes, a title, and gridlines.

WWayne716

78% match

Loading thumbnail…

Scatter Plot

This scatter plot shows how temperatures in San Francisco vary over time, with each circle representing a temperature reading at a specific timestamp. The visualization uses D3 v6 with SVG rendering, employing `scaleTime` and `scaleLinear` to map the data to the axes, and `axisLeft` and `axisBottom` with gridlines for reference. Data is loaded from a CSV file and parsed with `csv`, while circles are appended to the SVG using D3’s data join. Axis labels and a title are added as text elements.

WWayne716

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

77% match