Skip to main content
SimilarExport ZIP
100%

Simple Line Chart with Color Gradient

✓ Published0🌍 Public
KKirkHunter
Last edited Apr 14, 2016
Created on Apr 14, 2016

This interactive line chart visualizes daily temperature readings from a Noe Valley sensor, using a color gradient that shifts from steelblue to gray to red to encode temperature values. The chart groups data by day, with buttons allowing users to toggle between different days. Built with D3.js and moment.js, the SVG visualization relies on `d3.time.scale` for the time axis and a linearGradient element for the temperature color encoding. The data originates from the Data Canvas project and is displayed for a slice of the full time series.

AI-generated description

These are the materials for my workshop at Strata San Jose 2015 as well as resources and next steps. Videos of the workshop can be found here.

We will be using the following two tools to works through these exercises:

I would love your feedback on the materials either on the Q&A forum (Google Group) or in the Github issues.

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Throughout this workshop, you will learn how to make this animated and interactive line plot of temperature over time in Noe Valley.

Exercises

  • Part 1: Multiple line chart of Shanghai vs. Bangalore pollution levels created with dimple
  • Part 2: Line chart of Shanghai pollution levels over time created with D3.js
  • Part 3 (you are here 👇): Interactive animated line chart with color gradient of Noe Valley (SF neighborhood) daily temperature series over time.

The Data

The data is from the Data Canvas project, which is sponsored by Gray Area, swissnex San Francisco, and Lift. It contains data from 14 sensors in 7 cities which collect and stream information about their environment (temperature, dust, pollution, humidity, light, etc.).

You an access a bulk download of all the data (100+ MB) here. You can also download samples or access the stream through the API (details on the data page).

There are 4 different granularities of measurement. Files ending in:

  • *-5md.csv: measurements every 5 minutes for a day
  • *-1hd.csv: measurements every 1 hour for a day
  • *-6hw.csv: measurements every 6 hours for a week
  • noevalley.csv (or grapealope.csv): entire history of the sensor near Noe Valley at 10 second resolution

The files are comma separated with headers and 8 fields:

<table><thead> <tr> <th align="center">timestamp</th> <th align="center">city</th> <th align="center">temperature</th> <th align="center">light</th> <th align="center">airquality_raw</th> <th align="center">sound</th> <th align="center">humidity</th> <th align="center">dust</th> </tr> </thead><tbody> <tr> <td align="center">2015-02-16T17:00:00.000Z</td> <td align="center">San Francisco</td> <td align="center">20.8856185354523</td> <td align="center">2231.45801048026</td> <td align="center">28.8458008730416</td> <td align="center">1674.71050009727</td> <td align="center">48.4880466992298</td> <td align="center">882.367404134883</td> </tr> <tr> <td align="center">2015-02-16T18:00:00.000Z</td> <td align="center">San Francisco</td> <td align="center">21.8623045793052</td> <td align="center">2542.46720508251</td> <td align="center">26.5113633058142</td> <td align="center">1652.25960948903</td> <td align="center">43.9341875396295</td> <td align="center">912.0280753969</td> </tr> <tr> <td align="center">2015-02-16T19:00:00.000Z</td> <td align="center">San Francisco</td> <td align="center">23.5113166041101</td> <td align="center">3215.03460441893</td> <td align="center">24.8987852323788</td> <td align="center">1690.5842506536</td> <td align="center">40.5058249680354</td> <td align="center">939.447105875158</td> </tr> <tr> <td align="center">2015-02-16T20:00:00.000Z</td> <td align="center">San Francisco</td> <td align="center">25.6472096479114</td> <td align="center">4558.69142401972</td> <td align="center">26.0867059045864</td> <td align="center">1704.29832357106</td> <td align="center">38.4312464272035</td> <td align="center">999.743066983922</td> </tr> </tbody></table>

Archival event link: Strata + Hadoop World San Jose 2015

<style> @import url(http://fonts.googleapis.com/css?family=Crimson+Text:700italic,400,700,400italic); div.gist-readme { font: "Helvetica Neue",Helvetica,Arial,sans-serif; color: #666; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .gist-readme pre { width: 200%; margin-left: -50%; overflow: hidden; } .gist-readme p.small { color: #bbb; font-size: 14px; line-height: 1.5; display: block; } .gist-readme blockquote { padding-left: 15px; border-left: 4px solid #5694f1; color: #aaa; } .gist-readme span.code { font-family: Menlo, Monaco, Courier; background-color: #EEE; font-size: 14px; } .gist-readme pre { font-family: Menlo, Monaco, Courier; white-space: pre-wrap; padding: 20px; font-size: 14px; } .gist-readme code { padding: .25em .5em; font-size: 85%; color: #bf616a; background-color: #f9f9f9; border-radius: 3px; border: 1px solid #eee; } .gist-readme table { width: 100%; margin: 40px 0; border-collapse: collapse; font-size: 13px; line-height: 1.5em; } .gist-readme th, .gist-readme td { text-align: left; padding-right: 20px; vertical-align: top; } .gist-readme table td, .gist-readme td { border-spacing: none; border-style: solid; padding: 10px 15px; border-width: 1px 0 0 0; } .gist-readme tr > td { border-top: 1px solid #eaeaea; } .gist-readme tr:nth-child(odd) > td { background: #fcfcfc; } .gist-readme thead th, .gist-readme th { text-align: left; padding: 10px 15px; height: 20px; font-size: 13px; font-weight: bold; color: #444; border-bottom: 1px solid #dadadc; cursor: default; white-space: nowrap; } </style>

forked from <a href='http://bl.ocks.org/Jay-Oh-eN/'>Jay-Oh-eN</a>'s block: <a href='http://bl.ocks.org/Jay-Oh-eN/107ffc782c1c96f88198'>Strata Interactive Data Visualization: Exercise 3</a>

forked from <a href='http://bl.ocks.org/Jay-Oh-eN/'>Jay-Oh-eN</a>'s block: <a href='http://bl.ocks.org/Jay-Oh-eN/7c394d3e8737736e3090ca414dd72b85'>Simple Line Chart with Color Gradient</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/8463b9e916b6efa5f24762b53fd46877'>Simple Line Chart with Color Gradient</a>

Similar vizzes

Loading thumbnail…

Gradient Encoding

This line chart shows daily temperature readings over a year, using a linear gradient as a redundant color encoding alongside the y-axis position. The gradient spans from steelblue at cooler temperatures through gray to red at warmer ones, making temperature ranges immediately visible. The code uses d3.svg.line with basis interpolation to draw the path, while d3.svg.axis creates the time and temperature axes. The gradient is defined with `gradientUnits` set to `userSpaceOnUse`, positioning color stops at explicit y-coordinates from the d3.scale.linear output, applied via the stroke attribute referencing the SVG linearGradient element.

Mmbostock
81% match
Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings over time, with a smooth curved line and circular markers at each data point. The visualization uses D3’s `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data from a CSV of San Francisco temperatures is loaded via `csv` and parsed into dates and numbers. The SVG rendering includes gridlines, axis labels, and a title, with the line styled in steelblue.

DdeafMother
80% match
Loading thumbnail…

d3v4 - Gradient Color Line Chart

This example shows a line chart of temperature data over time, where the line’s color shifts through a red-gray-steelblue gradient based on value. The chart uses d3.v4's `d3.line()` with `d3.curveStep` to generate a stepped path, and a `linearGradient` with three `stop` elements, defined in SVG `defs`, applies the color scale via the `stroke` attribute. The data is loaded from a CSV of temperature readings, with x/y axes scaled using `d3.scaleLinear()`.

HHirosaji
79% match
Loading thumbnail…

LineChart

This line chart visualizes daily temperature measurements in San Francisco, with temperature on the y-axis and date on the x-axis, using a smooth curved path to connect the data points. The chart is rendered as an SVG using D3 v5, with scales created via `scaleTime` and `scaleLinear`, axes generated by `axisBottom` and `axisLeft`, and the line drawn using the `line` generator with `curveBasis` smoothing. The code loads temperature data from a CSV file, parses the date and numeric values, and displays gridlines with tick marks, axis labels, and a title.

PPerry
79% match
Loading thumbnail…

Area Gradient fill

This chart shows daily temperature variations over a year with a line and a gradient-filled area beneath it. The area uses a vertical gradient that shifts from steel blue to gray to red, tied to specific temperature thresholds. Built with the D3.js library, it parses dates from a CSV file and uses `d3.svg.area` to generate the path representing the temperature data between the line and the chart’s baseline.

Dd3noob
79% match
Loading thumbnail…

Threshold Encoding

This line chart displays daily temperature readings over a year, changing color from black to red as the value crosses a 50-degree threshold. A linear gradient with two stops at the same offset creates the hard color break. The visualization uses the D3.js v3 API, including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`, with data loaded from a TSV file. The SVG rendering applies the gradient to the line path.

Mmbostock
79% match
Loading thumbnail…

Line Chart

This line chart displays temperature measurements over time, using a smooth basis curve to connect data points. The visualization is built with D3 version 6 and rendered as an SVG, with the temperature data sourced from a CSV file of San Francisco weather records. The chart employs `scaleTime` and `scaleLinear` for the axes, along with `axisBottom`, `axisLeft`, and `line` to generate the plot.

NNoobSaiyan
79% match
Loading thumbnail…

A5_LineChart

This line chart visualizes monthly temperature data for San Francisco, displaying three trends: average temperature in blue, high in red, and low in green. The SVG uses d3.scaleBand for the month axis and d3.line with curveLinear to connect data points. Interactive tooltips appear on mouseover for each colored dot, and a legend is included.

DDuc Pham
79% match