A7_ Small multiples (of lines) chart

100%

A7_ Small multiples (of lines) chart

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 25, 2024

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.

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

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

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

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

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

85% match

Loading thumbnail…

A7_StreamGraph

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.

DDuc Pham

82% match

Loading thumbnail…

Untitled

A multi-line chart displays temperature readings for New York, San Francisco, and Austin over several days in October 2011, using D3.js v3 with SVG rendering. The visualization uses `d3.time.scale` for the x-axis, `d3.scale.linear` for temperature, and `d3.svg.line` with basis interpolation to draw smooth curves. It colors each city's line via `d3.scale.category10`, adds a legend, and includes a mouse-over effect with a vertical guide line. Data is parsed from tab-separated text using `d3.tsv.parse`.

LL1EO

82% match

Loading thumbnail…

A11

This example shows monthly temperature trends for New York, San Francisco, and Austin, with each city represented by a colored line on a time-series chart. Users can click city labels to toggle line visibility and hover over them to highlight the corresponding line. Built with D3 v7 in a React environment, it loads TSV data from a GitHub gist and uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, d3.axisBottom, d3.axisLeft, and d3.zoom for interactive panning and scaling. SVG rendering handles paths and text labels.

SShazil Taqi

82% match