Temperature line chart with scales

100%

Temperature line chart with scales

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

This example shows daily average temperatures for Austin over a seven-month period as a single green line chart. The visualization uses D3 v4 to parse tab-separated data, apply time and linear scales via `d3.scaleTime` and `d3.scaleLinear`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The line itself is generated with a `d3.line` path, drawn as an SVG element. The chart focuses on a single city’s temperature trend, with the x-axis formatted to display month and year.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Soorin/'>Soorin</a>'s block: <a href='http://bl.ocks.org/Soorin/9d33454a12fce51e46875a2f3c8fd6bf'>Austin temperature bar graph with scales</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart shows daily average temperatures for New York, San Francisco, and Austin over a one-year period. The D3 visualization loads data from a TSV file, parses dates with `d3.time.format`, and encodes time on the x-axis using `d3.time.scale`, temperature on the y-axis via `d3.scale.linear`, and city categories with `d3.scale.category10`. The chart displays axes using `d3.svg.axis` and renders each city’s temperature trend as a smooth line via `d3.svg.line` with basis interpolation. SVG is the rendering target, and city labels are placed at the final data point of each series.

TThanisataS

81% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, sourced from a TSV file. Each city’s temperature trend is drawn as a colored line, with points highlighted by circles and extreme values (below 20° or above 89°) labeled directly on the plot. The visualization uses D3 v4 APIs such as `d3.tsv` for data parsing, `d3.timeParse` for date handling, `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal` and `d3.schemeCategory10` for encoding, and `d3.line` with SVG paths to render the series.

CCatherine-Yu

80% match

Loading thumbnail…

Austin TX Average Temperature (OCT 2011 - SEPT 2012)

A time-series bar chart displays daily average temperatures in Austin, Texas from October 2011 to September 2012. Each thin vertical bar encodes one day’s temperature, with fill color mapping temperature ranges from cool blue to hot red, and the y-axis indicating degrees. The visualization uses D3 v4 with `d3.tsv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders SVG `<rect>` elements. The GitHub-hosted dataset originates from a gist forked from a blockbuilder.org exercise.

MMilliners-Son

80% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city’s trend encoded by color and labeled at the line’s end. The visualization uses D3 v4 to load data from a TSV file, parse dates with `d3.timeParse`, and scale both time and temperature via `d3.scaleTime` and `d3.scaleLinear`. Ordinal colors come from `d3.scaleOrdinal` with `d3.schemeCategory10`, while paths are drawn using `d3.line` with a basis curve, and axes are rendered through `d3.axisBottom` and `d3.axisLeft`.

SShuangjiaoHu

80% match

Loading thumbnail…

Multi-Series Line Chart

This visualization displays the daily average temperature for New York, San Francisco, and Austin over a year, with three colored lines allowing direct comparison of seasonal patterns. The chart uses D3 v3 APIs, including `d3.tsv` for data loading, `d3.time.format` for date parsing, `d3.time.scale` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.scale.category10` for color encoding. It renders with SVG, using `d3.svg.axis`, `d3.svg.line`, and `d3.keys` to structure city series from the TSV data.

CCdcole

80% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, using color to distinguish each city's trend. The visualization encodes dates on the x-axis via `d3.time.scale` and temperatures on the y-axis via `d3.scale.linear`, with `d3.svg.axis` rendering the axes. Data is loaded from a TSV file using `d3.tsv`, and each city’s line is drawn with `d3.svg.line`, colored by `d3.scale.category10`. The chart uses conventional margins and an SVG rendering approach, with city labels placed at the final data point.

CCdcole

80% match

Loading thumbnail…

30. Multi-Series Line Chart

This example shows a multi-series line chart tracking the daily average temperatures of New York, San Francisco, and Austin over one year. Each city is drawn as a separate colored line, with the y-axis labeled in degrees Fahrenheit, and city names labeled at the end of their respective lines. Written with D3 v4, the visualization loads and parses a TSV file using `d3.tsv` and `d3.timeParse`, encodes time on the x-axis with `d3.scaleTime`, temperature on the y-axis with `d3.scaleLinear`, and city categories with `d3.scaleOrdinal` and `d3.schemeCategory10`. Lines are rendered as SVG paths via `d3.line` with a basis curve, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片

80% match

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin across one year, with each city represented by a colored line and labeled at its final data point. The visualization is rendered as an SVG using D3 v4, loading data from a TSV file via `d3.tsv` and parsing dates with `d3.timeParse`. It encodes the time axis with `d3.scaleTime`, the temperature axis with `d3.scaleLinear`, and city colors with `d3.scaleOrdinal` using `d3.schemeCategory10`. Lines are drawn with `d3.line` using basis curve interpolation, while axes are generated through `d3.axisBottom` and `d3.axisLeft`.

SShayRomayo

80% match