100%

Fork of daily surface Temps to Embed

✓ Published0🌍 Public

Last edited Apr 22, 2024

Created on Apr 22, 2024

This visualization plots daily air temperature measurements as lines for each year, highlighting 2024 with a thicker red stroke while fading other years to a low opacity. The chart uses D3.js version 7.9.0 and the `@drbagwell/responsive-viz-axes` library to render a time-scaled x-axis and linear y-axis. Each year’s data is grouped via `flatGroup` and drawn as a path whose color comes from a sequential turbo scale, with the most recent year emphasized for comparison against historical trends.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

MIT Licensed

Similar vizzes

Loading thumbnail…

daily surface Temps

This visualization shows daily surface air temperatures across multiple years, with each year rendered as a colored line and the current year (2024) highlighted in red with greater opacity and stroke width. The chart uses a time-scaled x-axis for day of year and a linear y-axis for temperature, with a sequential turbo color scale encoding the year value. Built with D3, the code employs `scaleTime`, `scaleLinear`, `scaleSequential`, `flatGroup`, `line`, and `extent` to generate the multi-line plot from the daily surface air temperature dataset. A responsive axis library handles the axes and resizing behavior.

DDonald Bagwell

87% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of the line chart displays daily surface air temperature as a series of colored lines, one for each year, with 2024 highlighted in red for emphasis. The visualization uses data from the `@curran/daily-surface-air-temperature` package, mapping day of year and air temperature to positions. It employs `d3.scaleLinear`, `d3.scaleSequential`, and `d3.interpolatePlasma` to color each year's line, while `d3.line` generates the paths. The `@curran/responsive-axes` library draws the axes, and `d3.flatGroup` groups data by year.

HHuxulm

83% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of the Daily Surface Air Temperature chart displays a line chart showing air temperature across days of the year, with one line per year from 1940 to 2024. The 2024 data is highlighted in red with a thicker stroke, while other years use a plasma color scale and partial opacity to reveal density. The visualization uses d3’s `scaleLinear`, `scaleSequential`, `line`, and `flatGroup` APIs, with responsive axes from `@curran/responsive-axes` and data from `@curran/daily-surface-air-temperature`.

AAnkit Kaushal

83% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example shows daily air surface temperatures from 1940 through 2024, with one line per year plotted against day of year. The current year (2024) is highlighted in red with a thicker stroke, while historical years fade into a plasma color scale. The code uses d3.scaleLinear, d3.scaleSequential, d3.flatGroup, and d3.line with a defined accessor. The @curran/responsive-axes library renders the axes, while @curran/daily-surface-air-temperature provides the dataset.

Ppeter.sime@gmail.com

83% match

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes daily surface air temperature data from 1940 onward, colored by year using the d3 interpolatePlasma color scale. The chart plots each year as a separate line, with 2024 highlighted in thick red for emphasis, while a semi-transparent inner rectangle provides background contrast. The code uses d3’s scaleLinear, extent, line, and flatGroup to prepare and render the multiple series, alongside the responsive-axes library for labeled axes and the observeResize utility for container dimensions.

007versiasri@gmail.com

82% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This visualization displays daily surface air temperature data as a line chart, with each year represented by a separate line colored according to a plasma color scale, and 2024 highlighted in red. The graphic uses d3.scaleLinear for X and Y axes, d3.flatGroup to organize data by year, and d3.line to generate paths. Axes are rendered using the @curran/responsive-axes library, and data is loaded from a CSV file via d3.csv with d3.autoType.

AAlly Howell

81% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, showing how temperature varies across the days of the year for multiple years. The chart uses multiple lines, one per year, with a color scale from the plasma interpolator to differentiate between years. The year 2024 is emphasized with a red, thicker line, while other years appear semi-transparent. The code leverages D3’s `scaleLinear`, `scaleSequential`, `flatGroup`, and `line` APIs, along with the `@curran/responsive-axes` library for axes, to render the visualization from the provided dataset.

Rreddysushma994@gmail.com

80% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example visualizes daily surface air temperature data, where each year is represented as a separate line plotted across the days of the year. The lines are colored using a plasma color scale based on the year, with 2024 highlighted in red and a thicker stroke for emphasis. Using D3's `scaleLinear`, `scaleSequential`, and `flatGroup` utilities, the code groups the dataset by year and draws multiple paths. The visualization relies on the `@curran/daily-surface-air-temperature` data package and incorporates responsive axes from the `@curran/responsive-axes` library.

Ssarveshcsc898@gmail.com

80% match