bar with threshold

100%

bar with threshold

✓ Published0🌍 Public

Last edited Jan 23, 2020

Created on Jan 23, 2020

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.

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>

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

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

81% match

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

80% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44

72% match

Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado

71% match

Loading thumbnail…

animated bar chart with labels

This animated bar chart displays the percentage of school districts meeting a connectivity benchmark for the years 2015 through 2018, with the final year highlighted in orange. Built with D3 v4, the SVG visualization uses `d3.scaleBand` and `d3.scaleLinear` to map years and values, while `d3.axisBottom` renders the x-axis ticks. Bars and their percentage labels grow sequentially via `transition().duration(600).delay()` as the dataset is read from an inline JavaScript array.

FFrissAnalytics

71% match

Loading thumbnail…

A6 Diverging Bar Chart D3

This diverging bar chart visualizes the percentage-point change in smoking rates between 2011 and 2012 across five countries, with positive differences extending rightward in blue and negative differences leftward in red from a central zero axis. The chart uses D3.js v7 to load the CSV dataset, compute the absolute maximum difference for symmetric axis scaling, and render SVG rectangles with horizontal orientation. A d3-scale linear color scale maps negative to positive values through light grey, while the d3-legend plugin adds a horizontal color legend. Hovering highlights bars in orange, and the chart includes labeled axes for both percentage difference and country names.

EEric Yao

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

70% match

Loading thumbnail…

Bar chart

A horizontal bar chart displays population counts across weekly periods from 2019-W31 to 2019-W35. The bars are drawn as green SVG rectangles using D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `axisLeft` and `axisBottom` providing tick labels. Data is loaded from a local CSV file via `d3.csv`, and numeric values are coerced with unary plus. The visualization uses an SVG container with fixed margins, rendering the chart in a clean, minimal style.

GGeolffrey S Mena

69% match