A7_StreamGraph

100%

A7_StreamGraph

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 25, 2024

This streamgraph visualizes the monthly average temperatures for New York City, Los Angeles, Chicago, and Houston in 2021. The data is loaded from a CSV file using `d3.csv`, then stacked with the `d3.stack` API. The graphic uses an SVG canvas, with temperature values parsed from strings, and interactive tooltips on mouseover, while distinct colors represent each city.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

A7_Multi-line Chart

This multi-line chart compares average monthly temperatures across four U.S. cities—NYC, LA, Chicago, and Houston—using data from a CSV file. It renders four colored lines (blue, red, green, orange) via `d3.line` and `d3.curveLinear`, with circular dots for each city. Built with d3.v7 and SVG, it includes a hover tooltip that displays the city and temperature in Fahrenheit. The y-axis domain is fixed from 10 to 90 degrees, and the chart uses `d3.scaleBand` for the x-axis (month names) and `d3.scaleLinear` for the y-axis.

DDuc Pham

86% match

Loading thumbnail…

Fork of A7_Multi-line Chart

This multi-line chart displays monthly average temperatures for four U.S. cities—NYC, LA, Chicago, and Houston—with each city represented by a colored line and corresponding data points, parsed from a CSV file that includes degree symbols. The visualization uses D3 v7 with SVG rendering, employing scales for positioning data across the months, drawing paths via the `d3.line` generator, and adding interactive tooltips on hover that display the specific city and temperature for each month.

AAamir Hameed mir

86% match

Loading thumbnail…

A10 - Line Chart White Hat Visualization

This line chart visualizes monthly average temperatures for four US cities—NYC, LA, Chicago, and Houston—using colored lines (blue, red, green, orange) with corresponding data points. The SVG visualization uses D3 v7 scales and line generators, with a custom tooltip that appears on mouseover to display each city’s temperature for a given month. The code parses CSV data containing temperatures in Fahrenheit, then plots them along a band scale for months and a linear scale for temperature values. Interactive hover circles provide precise data readouts for each city.

DDuc Pham

85% match

Loading thumbnail…

Multi-line Chart

This multi-line chart displays monthly average temperatures (in °F) for four U.S. cities—New York, Los Angeles, Chicago, and Houston—using a distinct colored line for each, plus tooltips on hover. The D3 v7 code loads and parses a CSV dataset from a GitHub gist, then renders the lines and interactive circles as SVG within a React-compatible HTML page. The chart uses linear scaling for the y-axis (10–90°F) and a band scale for months, with user interactions handled directly via mouseover events.

AArun

84% match

Loading thumbnail…

-line Chart

This line chart displays monthly average temperatures in degrees Fahrenheit for four US cities—NYC, LA, Chicago, and Houston—with each city drawn as a colored line (blue, red, green, orange). The visualization uses D3 v7 to load CSV data via `d3.text`, parse the temperature values, and render the chart as SVG using `d3.scaleBand` and `d3.line`. Interactive tooltips appear on hover over data points, implemented with mouseover events that display the city and temperature. A fixed y-domain from 10 to 90°F emphasizes relative seasonal patterns across the year.

TTarun Kumar Bosupally

83% match

Loading thumbnail…

A10 - Line Chart Black Hat Visualization

This black hat visualization displays monthly average temperatures for New York City, Los Angeles, Chicago, and Houston, all plotted as identical orange lines and dots with no legend, axis labels, or title. The code utilizes D3.js v7’s `scaleBand`, `scaleLinear`, and `line` APIs to render the SVG paths, while the dataset is fetched from a remote CSV file containing temperature values in Fahrenheit. Despite including commented-out tooltip logic, the final chart provides no interactive feedback, and all series are visually indistinguishable from one another.

DDuc Pham

83% match

Loading thumbnail…

A7_ Small multiples (of lines) chart

This example displays monthly temperature variations for four U.S. cities—NYC, LA, Chicago, and Houston—as small multiples of line charts, with dots marking each data point and a color-coded legend. Hovering over a dot enlarges it and shows the exact temperature value as a tooltip. The code uses D3 v7’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render SVG charts, with data pulled from a GitHub-hosted CSV file. A `d3.legendColor` scale generates the legend, and the visualization is built with React in a single HTML file.

DDuc Pham

82% match

Loading thumbnail…

Untitled

A multi-line chart displays monthly temperature averages for New York, San Francisco, and Austin, with each city’s time series drawn as a smooth basis curve. The SVG rendering uses D3 v7 scales and axes to map dates and temperatures, while the `d3.zoom` API enables pan and zoom interactions on the chart. City labels follow the final data point, and the code includes placeholder hooks for hover and click handlers. Data is loaded from a TSV file via `d3.tsv`, with colors assigned through `d3.scaleOrdinal`.

SSimon Hackbert

81% match