multiarea with threshold

100%

multiarea with threshold

✓ Published0🌍 Public

Last edited Jan 23, 2020

Created on Jan 23, 2020

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/ec1c0ad8674e5769f39f6c141a60a913'>multiline with threshold </a>

mit Licensed

Similar vizzes

Loading thumbnail…

multiline with threshold

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.

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

81% match

Loading thumbnail…

area chart

This area chart visualizes the relationship between age and weight, with age on the x-axis and weight on the y-axis, using a steelblue filled path. The D3.js v7 code loads a CSV dataset from a remote GitHub gist, parses it with `d3.csvParse`, and sorts the data by age. It then applies `d3.scaleLinear` for both axes and an `d3.area` generator to create the smooth region, rendering the chart as an SVG with labeled axes and a title.

RRakesh Kumar Chekuri

71% match

Loading thumbnail…

AREA PLOT pca

This area chart visualizes BMI values for individuals, with each point color-coded and interactive. The chart uses D3.js v7 to fetch and parse CSV data from a GitHub gist, then renders an SVG area path and circles representing BMI readings. Users can hover over any data point to see a tooltip with the precise BMI value, which also changes the dot’s color and size. The visualization includes labeled axes for Individuals and BMI, with a light green fill for the area and responsive hover effects.

CChaturyaAkhilaPallem@my.unt.edu

71% match

Loading thumbnail…

area chart

This example shows an area chart of visual acuity data, with a gradient fill transitioning from green through yellow to red based on y-values. The chart encodes data points as white circles positioned along the area’s upper boundary, each with a title tooltip displaying its value. Built with D3 v5, the visualization uses `d3.scaleLinear` for both x/y positioning and color mapping, an `area()` generator with `curveMonotoneX` for the shape, and SVG `linearGradient` definitions to color the fill. A simple SVG rect outlines the plot area.

Nnorangai

70% match

Loading thumbnail…

Area Death's

This area chart displays the average age of diabetic patients over time, using a red filled curve to emphasize the trend. The visualization loads CSV data via `d3.csv` and renders an SVG using D3 v5, with `scaleTime` and `scaleLinear` for axes. It employs `d3.area` with a `curveBasis` smoothing function, styled through external CSS. Axis labels and a title are added using SVG text elements, with tick formatting applied via `d3.format`. The data source is a remote gist, and the chart includes custom margins and gridlines.

SSUSHMA CHIRRA

70% match

Loading thumbnail…

multiple area

This visualization displays mock energy data for two sites across months, using semi-transparent filled areas to compare temporal trends. Built with D3 v5, it employs `d3.area()` for the shaded regions, `d3.line()` for outlines, and `d3.nest()` to group data by site. The SVG rendering includes custom axes with gridlines, a legend, and gradient-filled clip paths created via `d3.scaleOrdinal` for color encoding.

AAegon95

70% match

Loading thumbnail…

Area chart

Three layered area bands show how a value range evolves across an x-axis from 0 to 70, with each band representing a distinct series (e.g., area1, area2, area3) defined by low and high y-values. The chart uses stacked-like transparency via SVG paths filled with teal shades, computed with D3 v4’s `d3.area()` generator and linear scales for x and y. Rendering is done through SVG path elements appended to a 700×400 viewport, with data hardcoded as JavaScript arrays in the gist source.

EEfratVil

69% match