100%

Difference Chart

✓ Published0🌍 Public

Last edited Oct 10, 2017

Created on Oct 10, 2017

This chart compares daily temperatures in New York and San Francisco over a four-month period using a bivariate area chart. Two overlaid lines show the temperature series for each city, while the area between them is filled in green when New York is warmer and red when San Francisco is warmer, using clipping to alternate colors based on the difference. The visualization is rendered in SVG with D3 v4 and is a modern update to an original block by Mike Bostock. The data is loaded from a TSV file containing date, New York, and San Francisco temperature values.

AI-generated description

Difference Chart

A v4 update to <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3894205'>Difference Chart</a>

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3894205'>Difference Chart</a>

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/67a5211cf2c5cbda74501ce36d85ba4c'>Difference Chart v4</a>

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/a13b672ef688bf238568ca7aa42dde15'>Difference Chart v4</a>

mit 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

97% match

Loading thumbnail…

Difference Chart

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.

Mmbostock

96% match

Loading thumbnail…

Difference Chart v4

This chart compares daily average temperatures in New York and San Francisco over four months. It uses a bivariate area chart with clipping to alternate colors: the area where New York is warmer than San Francisco is filled in green, while the area where San Francisco is warmer is filled in red. The SVG visualization is built with D3 v4, using a clipped area path to switch fill colors based on the sign of the temperature difference, a technique with roots in William Playfair’s 1786 work. The data is loaded from a TSV file with date, New York, and San Francisco temperature columns.

Aalexmacy

96% 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

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 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

93% 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

80% match

Loading thumbnail…

Bivariate Area Chart

This bivariate area chart visualizes daily high and low temperatures in San Francisco over two years, with the shaded region spanning the gap between these values. The data is loaded from a TSV file using `d3.tsv`, with dates parsed via `d3.time.format`. The visualization encodes time on the x-axis using `d3.time.scale` and temperature on the y-axis with `d3.scale.linear`. The area shape is rendered using `d3.svg.area`, while `d3.svg.axis` displays both axes. The chart applies conventional margins and renders as SVG, with the area filled in steelblue.

深深度碎片

80% match