Built with blockbuilder.org
Last active
January 23, 2020 13:56
-
-
Save GitNoise/ec1c0ad8674e5769f39f6c141a60a913 to your computer and use it in GitHub Desktop.
multiline with threshold
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Free sugars intake (% of total energy) in all age groups for all paired years of the NDNS Rolling Programme | (2008/09 - 2009/10) | (2010/11 - 2011/12) | (2012/13 - 2013/14) | (2014/15-2015/16) | |
---|---|---|---|---|---|
Children 1.5-3 years | 12.1 | 13 | 12.8 | 11.3 | |
Children 4-10 years | 14.7 | 15.5 | 14 | 13.5 | |
Children 11-18 years | 15.9 | 15.8 | 15.8 | 14.1 | |
Adults 19-64 years | 11.8 | 11.7 | 12.1 | 11.1 | |
Men 19-64 years | 12 | 12.3 | 12.5 | 11.1 | |
Women 19-64 years | 11.6 | 11.2 | 11.6 | 11.2 | |
Adults 65 years and over | 10.9 | 11.4 | 10.8 | 11.2 | |
Men 65 years and over | 9.7 | 11 | 11.6 | 11.8 | |
Women 65 years and over | 10.1 | 11.3 | 9.5 | 10.4 | |
Adults 65-74 years | 9.9 | 11.2 | 10.5 | 11 | |
Men 65-74 years | 9.7 | 11 | 11.6 | 11.8 | |
Women 65-74 years | 10.1 | 11.3 | 9.5 | 10.4 | |
Adults 75 years and over | 12.2 | 11.8 | 11.3 | 11.3 | |
Men 75 years and over | 11.8 | 12.3 | 11.5 | 12.5 | |
Women 75 years and over | 12.4 | 11.2 | 11.2 | 10.4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style> | |
body { | |
margin:auto; | |
padding: 25px;} | |
.data path { | |
fill: none; | |
} | |
.threshold line { | |
stroke: black; | |
stroke-dasharray: 2%; | |
} | |
.threshold rect { | |
fill: red; | |
fill-opacity: 0.05 | |
} | |
</style> | |
</head> | |
<body> | |
<svg id="chart" width="500" height="410"></svg> | |
<script> | |
d3.csv("2020W3.csv").then(d => chart(d)) | |
const chart = data => { | |
const threshold = 12; | |
const margin = {top: 15, right: 35, bottom: 15, left: 50}; | |
const keys = data.columns.slice(1); | |
const result = data.map( d => ({ | |
id: d[data.columns[0]], | |
values: keys.map(key => ({year: key, value: +d[key]})) | |
})); | |
const extent = { | |
min: +d3.min(result, row => d3.min(row.values, v => v.value)), | |
max: +d3.max(result, row => d3.max(row.values, v => v.value)), | |
} | |
const svg = d3.select("#chart"), | |
width = +svg.attr("width") - margin.left - margin.right, | |
height = +svg.attr("height") - margin.top - margin.bottom; | |
const xScale = d3.scalePoint() | |
.range([margin.left, width - margin.right]) | |
.domain(keys); | |
const yScale = d3.scaleLinear() | |
.range([height - margin.bottom, margin.top]) | |
.domain([0, extent.max]) | |
var line = d3.line() | |
.x(d => xScale(d.year)) | |
.y(d => yScale(d.value)); | |
svg.append("g") | |
.classed("axis", true) | |
.attr("transform", "translate(0," + (height - margin.bottom) + ")") | |
.call(d3.axisBottom(xScale)); | |
svg.append("g") | |
.classed("axis", true) | |
.attr("transform", "translate(" + margin.left + ",0)") | |
.call(d3.axisLeft(yScale)); | |
svg.append('g') | |
.classed("data", true) | |
.selectAll("path") | |
.data(result) | |
.join(enter => | |
enter.append('path') | |
.attr("d", d => line(d.values)) | |
.style('stroke', 'url(#threshold)') | |
) | |
drawThreshold(svg, yScale, xScale, height, threshold); | |
} | |
const drawThreshold = (svg, yScale, xScale, height, threshold) => { | |
const group = svg.append('g').classed('threshold', true); | |
group.append('line') | |
.attr('x1', xScale.range()[0]) | |
.attr('x2', xScale.range()[1]) | |
.attr('y1', yScale(threshold)) | |
.attr('y2', yScale(threshold)) | |
group | |
.append('rect') | |
.attr('width', xScale.range()[1] - xScale.range()[0]) | |
.attr('height', yScale.range()[0] - yScale(threshold)) | |
.attr('x', xScale.range()[0]) | |
.attr('y', yScale(threshold)) | |
svg.append('defs').append("linearGradient") | |
.attr("id", 'threshold') | |
.attr("gradientUnits", "userSpaceOnUse") | |
.attr("x1", 0) | |
.attr("y1", 0) | |
.attr("x2", 0) | |
.attr("y2", height) | |
.selectAll("stop") | |
.data([ | |
{offset: 0, color: "blue"}, | |
{offset: yScale(threshold) / height, color: "blue"}, | |
{offset: yScale(threshold) / height, color: "red"}, | |
{offset: 1, color: "red"} | |
]) | |
.join("stop") | |
.attr("offset", d => d.offset) | |
.attr("stop-color", d => d.color); | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment