Skip to main content
SimilarExport ZIP
100%

Temperature In SanFrancisco : LineChart

✓ Published0🌍 Public
MMike Wolfgram
Last edited Oct 5, 2019
Created on Sep 27, 2019

This example visualizes earthquake counts across U.S. states from 2010 to 2015, broken down by magnitude category. A dropdown menu lets users switch between categories, updating a heatmap of colored rectangles. The visualization uses d3.csv to load data, d3.scaleBand for axes, d3.scaleQuantize for the color scale, and d3.axisLeft and d3.axisBottom for chart axes. Hovering over a cell reveals its exact count via a tooltip, and a legend shows the color-to-value mapping.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays worldwide earthquake counts from 2002 to 2015, split into four magnitude categories (5-5.9, 6-6.9, 7-7.9, and 8.0+), with each series drawn as a smoothly curved line in a distinct color. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to map the temporal and numeric data to SVG paths. The earthquake dataset is loaded from an external CSV file via `d3.csv`, and the chart renders with axes, gridlines, and a legend that adjusts its appearance after a delay.

Ssiddu7147
92% match
Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays the number of earthquakes in different magnitude ranges from 2002 to 2015, with four colored lines representing categories from 5.0-5.9 up to 8.0+. The visualization uses D3 v5 with a time-scaled x-axis and linear y-axis, rendered as SVG paths generated by the `line()` and `curveBasis` functions. Data is loaded from a CSV file using `d3.csv` and transformed for plotting. The chart emphasizes magnitude distribution trends over time rather than individual data points.

Eelaine-xiao
91% match
Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays worldwide earthquake statistics from 2002 to 2015, plotting yearly counts across four magnitude categories (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+) as separate colored lines. It uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.axisBottom/axisLeft with gridlines. Data loads from a CSV via d3.csv, rendered as SVG with custom styling for legends, titles, and rotated axis labels.

Eelaine-xiao
91% match
Loading thumbnail…

Temperature in SF linechart

This visualization displays earthquake magnitudes and frequency data over time in San Francisco, rendered as a smooth line chart using D3 v5. It plots years on the x-axis against temperature values on the y-axis, with a maroon curve connecting data points. The code uses D3’s scaleTime and scaleLinear for axes, line and curveBasis to generate the smoothed path, and axisBottom and axisLeft with custom tick styling. Data is loaded via d3.csv from a VizHub dataset, with the SVG output driven by index.js and styled through external CSS.

Eedxiao97
90% match
Loading thumbnail…

Temperature in San Francisco Line Chart

The chart displays worldwide earthquake statistics from 2002 to 2015, showing four magnitude categories (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+) as multiple colored line series over time. Using D3 v5 with an SVG rendering approach, the visualization employs `d3.csv` to load data, `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for grid labels. Circles mark individual data points for the 5.0–5.9 magnitude range, while yearly values are parsed as date objects for the time scale.

Eelaine-xiao
90% match
Loading thumbnail…

Temperature in SF linechart

This line chart visualizes the number of earthquakes of magnitude 8.0 or higher recorded per year in San Francisco, with the x-axis representing years and the y-axis showing earthquake counts. The visualization uses D3 v5 functions such as `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path. Data is loaded from a CSV file containing earthquake records. The chart includes labeled axes, a title "A Week in San Francisco," and a maroon line, with gridlines styled via CSS.

Eedxiao97
88% match
Loading thumbnail…

Temperature in San Francisco Linechart

This line chart visualizes one week of temperature in degrees Celsius in San Francisco, using data from Data Canvas - Sense Your City. It shows temperature trends over time, with time on the x-axis and temperature on the y-axis, styled with a maroon line and gridlines. The visualization is built with D3 v5, using APIs such as `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with `curveBasis`. The SVG rendering includes axis labels and a title, with data loaded asynchronously and parsed into date and numeric values.

Ffbudwill
82% match
Loading thumbnail…

Temperature San Fransisco Line Chart

This line chart shows temperature readings across a week in San Francisco, with a smooth area fill rendered in maroon beneath the temperature curve. The visualization uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to generate the SVG path, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with gridlines. Data is loaded as CSV from a remote dataset, and each timestamp is parsed into a JavaScript Date object before rendering.

DDanzeOnn
82% match