Skip to main content
SimilarExport ZIP
100%

multiline with threshold

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jan 23, 2020
Created on Jan 23, 2020

The chart shows trends in free sugar intake across age groups over four time periods, with a red-shaded region marking values above a 12% threshold and a dashed line at that cutoff. Each line represents a demographic category, encoded as an SVG path using d3.line and d3.scalePoint for the time axis. The threshold overlay is drawn with a linearGradient that transitions from blue to red based on y-position, while the data lines are stroke-filled using that same gradient reference. The source CSV is parsed via d3.csv, and axes are rendered with d3.axisBottom and d3.axisLeft.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

multiarea with threshold

The chart visualizes trends in free sugar intake across adult age groups over four paired survey years, highlighting values relative to a fixed threshold of 11% of total energy. A diverging color gradient (blue below, red above) fills the area under each line, immediately separating groups that stay above or dip below the cutoff. The code uses D3 v5 with an SVG area generator, a linear gradient defined via `svg.append('defs')`, and `d3.scalePoint` for the categorical year axis. Data comes from the NDNS Rolling Programme CSV, filtered to adult rows only, with rendering handled through SVG paths and axes.

PPatrick Wojda
86% match
Loading thumbnail…

bar with threshold

This bar chart displays the percentage of free sugars intake from total energy across different age groups, comparing data from the 2020 NDNS Rolling Programme survey. The visualization highlights a single time period (2014/15-2015/16) by coloring bars based on whether values fall above or below a red dashed threshold line set at 4%. The code uses d3.v5 with SVG rendering, employing d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis. A linearGradient definition fills the bars blue below the threshold and red above it, with the threshold line drawn using SVG line elements.

PPatrick Wojda
80% 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
75% match
Loading thumbnail…

Fork of Line Chart - Project 16

This visualization shows the relationship between glucose levels and BMI across countries, with each line representing a country's trajectory through the dataset. The chart uses a D3 line generator with curve basis to create smooth paths, scales from d3.scaleLinear for both axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is loaded from a CSV file using d3.csv, nested by country with d3.nest, and rendered as SVG. A custom colorLegend component displays the categorical color mapping.

Aav.dj.2000@gmail.com
70% match
Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays health expenditure trends in the US, showing multiple lines for different age groups over time. It uses D3.js v5 with SVG rendering and animated transitions to draw the line chart. A dropdown menu allows users to select different expenditure columns, triggering a smooth 1.5-second transition animation that redraws the lines. The chart includes a color legend for age categories and uses D3's `scaleTime`, `scaleOrdinal`, `nest()`, and `line()` APIs.

KKhatera Alizada
70% match
Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115
69% 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
69% match
Loading thumbnail…

Multing Data for Multiple Lines

This visualization displays population trends over time for various regions, with each line representing a different area and color-coded via a categorical scale. It uses d3.line with curveBasis to generate smooth paths, d3.nest to group data by region, and d3.scaleOrdinal for colors. Population estimates from UN data are melted into a tidy format, with axes formatted using d3.axisBottom and d3.axisLeft. A custom colorLegend component renders the legend alongside the SVG chart.

Mmisferswift
69% match