Skip to main content
SimilarExport ZIP
100%

Difference Chart

✓ Published0🌍 Public
Mmbostock
Last edited Oct 27, 2018
Created on Oct 15, 2012

This example shows daily average temperatures in New York and San Francisco over roughly nine months as a bivariate area chart, using clipped SVG areas to color the difference between the two lines: green fills where New York is warmer, and red where San Francisco is warmer. The chart uses D3 v3 with time scale, linear scale, and SVG axes, and two clipped area paths to split the difference region. A black line plots the New York temperature. Data is loaded from a tab-separated file with three columns: date, New York, and San Francisco.

AI-generated description

This variation of a bivariate area chart uses clipping to alternate colors. When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in red. A similar technique was used by William Playfair all the way back in 1786.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Difference Chart

This difference chart compares daily temperatures in New York and San Francisco, using a bivariate area encoding where the area between the two series is filled green when New York is warmer and red when San Francisco is warmer. The visualization is implemented with D3 v4 and rendered as SVG, employing clipping to cleanly alternate the fill colors based on which city’s temperature is higher. Data is loaded from a tab-separated file with date, New York, and San Francisco columns.

AAlainRo
94% match
Loading thumbnail…

Difference Chart

This example shows a difference chart comparing daily temperatures in New York and San Francisco, with the gap between the two lines shaded green when New York is warmer and red when San Francisco is warmer. The visualization uses D3 v4’s `d3.area`, `d3.line`, and `d3.scaleTime` to render the SVG paths, while `clipPath` elements with `area.y0` values clip the colored regions based on which city has the higher temperature. The data is loaded from a TSV file containing date and temperature values for both cities.

SSpace23
94% match
Loading thumbnail…

Difference Chart

This visualization compares daily average temperatures in New York and San Francisco from 2011 to 2012. Using D3 v4, it renders an SVG area chart where the difference between the two city’s temperatures is filled in orange when New York is warmer and green when San Francisco is warmer. The chart uses `d3.area` with `d3.curveBasis` to smooth the lines, and applies `clipPath` elements to alternate the fill colors based on which city’s temperature is higher. Data is loaded from a TSV file via `d3.tsv`.

JJeromeMouly
94% match
Loading thumbnail…

Difference Chart v4

Two lines trace daily average temperatures for New York and San Francisco from October 2011 to June 2012, with the area between them filled in green when New York is warmer and red when San Francisco is warmer. Built with D3 v4, the chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and SVG `clipPath` elements to alternate the fill color based on which city is hotter. The underlying data is loaded from a TSV file.

TThanaporn-sk
92% match
Loading thumbnail…

path

This chart shows a multi-line comparison of daily average temperatures across three U.S. cities—New York, San Francisco, and Austin—over a period spanning late 2011 to early 2012. Each city is represented by a colored line plotted against a shared time axis, with the y-axis denoting temperature in degrees Fahrenheit. The data is loaded from a TSV file, and the visualization uses D3 v4 to render the SVG paths, making it easy to compare seasonal trends and temperature variations among the cities.

EEranM6
81% match
Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over the course of a year, with each city encoded as a colored line. The x-axis represents time using d3.time.scale, while the y-axis uses a linear scale for temperature values. Colors are assigned via d3.scale.category10, and the data is loaded from a TSV file using d3.tsv. The chart applies conventional margins, computes domains with d3.extent, d3.min, and d3.max, and renders axes and lines using d3.svg.axis and d3.svg.line. The visualization compares seasonal temperature patterns across the three cities, highlighting relative warmth and variation throughout the year.

EEleonore9
81% match
Loading thumbnail…

Multi-Series Line Chart

This chart shows the daily average temperatures for New York, San Francisco, and Austin over a year, with each city represented by a colored line and labeled points. The data is loaded from a TSV file using d3.tsv, with dates parsed via d3.timeParse and scales built from d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.schemeCategory10. Lines are drawn using d3.line, and axes are rendered with d3.axisBottom and d3.axisRight, with the y-axis labeled in Fahrenheit.

SSherryFeng123
80% match
Loading thumbnail…

d3

This example shows a multi-series line chart comparing daily average temperatures across three US cities—New York, San Francisco, and Austin—over a three-month period from October 2011 through January 2012. The data is loaded from a tab-separated values file using d3.tsv. Each city is encoded as a separate colored line, with the date on the x-axis and temperature in degrees Fahrenheit on the y-axis. The visualization uses d3 v4 with SVG rendering to draw axes, gridlines, and a legend, making seasonal trends and city-to-city differences readily apparent.

EEranM6
80% match