Time-Series Chart

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.

84% match

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.

82% match

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.

80% match

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

77% match

Line Chart of San Fransisco

This line chart visualizes a week of temperature data in San Francisco, showing temperature on the y-axis against time on the x-axis with a smooth green curve. The chart includes labeled axes and a title, using D3 v5 APIs such as `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The rendered SVG also includes a yellow point marker at each data location, though no circles are explicitly appended in the code shown.

Hhimanshigoyal23

Temperature in San Francisco Line Chart

This line chart displays one week of energy consumption data in San Francisco, sourced from Data Canvas - Sense Your City, with temperature values plotted over time. The visualization uses D3 v5 to render an SVG, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` with a `curveBasis` for the smooth path, and `d3.axisLeft` and `d3.axisBottom` for labeled tick marks. Data is loaded via `d3.csv` and parsed into JavaScript Date objects before rendering.

MMichared

Temperature Visualization

This visualization combines a scatter plot and line chart to show temperature in degrees Celsius in San Francisco over one week. Each circle represents an hourly temperature reading, connected by a line to reveal trends over time. The chart uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, with data loaded from a local CSV file. Axes are labeled “Time” and “Temperature,” and the visualization comes from the Data Canvas Sense Your City API.

CCurran Kelleher

Temperature in San Francisco line chart

This visualization depicts a week of temperature readings in San Francisco, using a green area chart to show the trend over time. The chart is rendered as an SVG using D3 v5, with a time-scaled x-axis and a linear, niched y-axis. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` APIs to generate the plot, including custom styling for tick marks, labels, and the title.

NNikki-gea