Skip to main content
SimilarExport ZIP
100%

HeatMap

✓ Published0🌍 Public
Hhxu51@usfca.edu
Last edited May 15, 2025
Created on Apr 24, 2025
Forked from Time-Series Chart

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.

AI-generated description
MIT Licensed

Similar vizzes

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
84% 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
82% match
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
80% 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
78% match
Loading thumbnail…

D3 - Time Series HeatMap

This example visualizes methane emissions across countries and years using a D3.js heatmap. Each cell’s color encodes emission values via `d3.scaleSequential` with the Viridis interpolator, while `d3.scaleBand` positions countries on the x-axis and years on the y-axis. The code loads CSV data from a GitHub gist, renders axes with `d3.axisBottom` and `d3.axisLeft`, and includes an interactive tooltip that displays exact CH4 values on mouseover. A horizontal color legend, built with the d3-legend library, accompanies the SVG chart.

CChandana Srinivas
72% match
Loading thumbnail…

Temperature in San Francisco

This visualization shows temperature trends in San Francisco over time, with time on the x-axis and temperature on the y-axis. The data is rendered as an orange area chart using D3 v5’s `area` generator with a `curveBasis` interpolation, plotted in an SVG canvas. The code uses `scaleTime` and `scaleLinear` for axes, `extent` to set domains, and `axisBottom`/`axisLeft` with gridlines. Data is loaded via `d3.csv` from a remote dataset, with timestamps parsed as dates and temperatures as numbers.

TTrey Billing
71% match
Loading thumbnail…

Temperature in San Francisco

This visualization displays a week of temperature readings in San Francisco as an area chart, with time on the x-axis and temperature in degrees Celsius on the y-axis. The data comes from the UCI Machine Learning Repository’s Auto MPG dataset, loaded via `d3.csv`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, an `area` generator with `curveBasis` for the filled path, and `d3.axisLeft` and `d3.axisBottom` with gridlines. The SVG is rendered with a margin-based layout, including rotated axis labels and a title.

AAmol Kulkarni
71% match
Loading thumbnail…

Temperature in SF

This visualization displays temperature measurements in San Francisco over time, using a filled area chart to emphasize the range and variation of values across the timeline. The data, loaded via `d3.csv` from a remote dataset, is mapped with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The area path is generated with `d3.area` and a basis curve, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes with grid lines. The SVG rendering and styling are handled through D3 v5 selections and custom CSS.

Eevapavlinek
71% match