Difference Chart v4

100%

Difference Chart v4

✓ Published0🌍 Public

Last edited Apr 14, 2017

Created on Apr 14, 2017

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.

AI-generated description

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>

gpl-3.0 Licensed

Similar vizzes

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

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

92% match

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

92% match

Loading thumbnail…

step3

This visualization displays daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. Three separate lines, each representing a city, are drawn over time on a common set of axes, allowing for direct comparison of temperature trends and seasonal variations across the locations. The graphic is rendered as an SVG using the D3.js v4 library, employing `d3.line` and `d3.curveBasis` to create smooth paths. The code loads tab-separated data via `d3.tsv`, parses the date column with `d3.timeParse`, and maps the categorical city names to colors using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette.

深深度碎片

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

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

82% match

Loading thumbnail…

Multi-Series Line Chart-8/29-4

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over the last year, loaded from a TSV file using d3.tsv. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with category10 for color encoding. Multiple d3.svg.line paths represent each city’s temperature trend, with axes rendered via d3.svg.axis. The visualization follows conventional margins and computes domains using d3.extent, d3.min, and d3.max, all rendered as SVG. The code is forked from mbostock’s original block. *Source: gist, author: ShuangjiaoHu, license: GPL-3.0.*

SShuangjiaoHu

82% match