color via clipping

100%

color via clipping

✓ Published0🌍 Public

Last edited Aug 4, 2016

Created on Aug 4, 2016

This line chart shows daily temperature readings from a TSV dataset spanning October 2011 to September 2012. The visualization uses clipping to split the temperature curve at the 55°F threshold, coloring the portion of the line above this value in red and the portion below in black. The code applies `d3.svg.line` with basis interpolation and two `clipPath` rectangles, each assigned to one of two line paths via the `clip-path` attribute. D3’s time and linear scales map dates and temperatures, while SVG axes display the temporal and temperature scales.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Color via Clipping

A line chart displays daily temperatures over several months, with the line split into two colors—red above a 55°F threshold and black below. The D3 v3 SVG implementation uses clipping paths (`clipPath` and `rect`) to divide the drawing area, applying each clip to a separate line path rendered from the TSV data via `d3.svg.line`. The `d3.time.scale` and `d3.svg.axis` handle temporal positioning and axes.

Mmbostock

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

80% match

Loading thumbnail…

Svelte + D3: Line

This visualization displays daily surface temperatures since 1940, with one line per year rendered as an SVG path. The code uses Svelte’s reactivity and D3’s `csv`, `scaleLinear`, `extent`, `line`, `groups`, and `curveCatmullRom` to map day-of-year and temperature values. Recent years (2023–2024) are highlighted with distinct colors and increased opacity, while older years fade into the background. Data comes from Climate Reanalyzer’s world daily temperature record, with a dark gradient backdrop and legend overlay.

MMatthias Stahl

76% match

Loading thumbnail…

TemperatureDay_LineChart

This line chart visualizes temperature readings across ten consecutive days, with each day’s value marked by an orange circle and connected by a steelblue line. The chart includes labeled axes for Day and Temperature (°C), with the y-axis scaled to include padding above and below the data range. Using D3.js v7, the visualization loads data from a CSV file via `d3.csv`, applies linear scales for both axes, and renders the SVG path with the `d3.line()` generator. Axis labels are added as SVG text elements, and the chart is drawn within a configured margin-based layout.

AALIMINETI SPOORTHY REDDY

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

75% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

74% match

Loading thumbnail…

step 2

This example displays temperature data over time as a smooth blue line chart. The visualization uses D3.js v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to map dates and temperature values to screen coordinates, while `d3.line` with `d3.curveBasis` creates the curved data series. The SVG rendering uses a hidden x-axis path and a steelblue stroke, with data formatted from a `%Y%m%d` date string via `d3.timeParse`.

深深度碎片

74% match

Loading thumbnail…

D3 Course Code Along - Temperature Area Chart

This visualization displays temperature readings over a week, with a smooth red area chart showing the daily rise and fall of temperatures. The chart uses an SVG rendering with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data is loaded from a CSV via `d3.csv`, with timestamps parsed into JavaScript Date objects, and population data in a separate CSV remains unused in the code.

Rrenenadorp

74% match