GitNoise/.block

## .block
license: mit

## 2020W3.csv

          
            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

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from GitNoise's block: multiline with threshold 
forked from GitNoise's block: multiarea with threshold 

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>

    body {
      margin:auto;
      padding: 25px;
    }

    .data rect {
      stroke: black;
      stroke-width: 1.5px;
      fill-opacity: 0.1;
    }

    .threshold line {
      stroke: red;
      stroke-width: 1.5px;
     	stroke-dasharray: 10px
    }
  </style>
</head>

<body>
  <svg id="chart" width="600" height="300"></svg>

  <script>
    d3.csv("2020W3.csv").then(d => chart(d))

    const chart = data => {

      const threshold = 4;
      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.scaleBand()
      .rangeRound([margin.left, width - margin.right])
      .padding(0.1)
      .domain(data.map(d => d[data.columns[0]]));

      const yScale = d3.scaleLinear()
      .range([height - margin.bottom, margin.top])
      .domain([0, extent.max])


      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));

      const i = 3;
      svg.append('g')
        .classed("data", true)
        .selectAll("rect")
        .data(result)
        .join(enter =>
              enter.append('rect')
              .attr("x", d => xScale(d.id))
              .attr("y", d => yScale.range()[0] - yScale(d.values[i].value))
              .attr("height", d => yScale(d.values[i].value))
              .attr("width", d => xScale.bandwidth())
              .style('fill', '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))

      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>
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
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>

	body {
	margin:auto;
	padding: 25px;
	}

	.data rect {
	stroke: black;
	stroke-width: 1.5px;
	fill-opacity: 0.1;
	}

	.threshold line {
	stroke: red;
	stroke-width: 1.5px;
	stroke-dasharray: 10px
	}
	</style>
	</head>

	<body>
	<svg id="chart" width="600" height="300"></svg>

	<script>
	d3.csv("2020W3.csv").then(d => chart(d))

	const chart = data => {

	const threshold = 4;
	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.scaleBand()
	.rangeRound([margin.left, width - margin.right])
	.padding(0.1)
	.domain(data.map(d => d[data.columns[0]]));

	const yScale = d3.scaleLinear()
	.range([height - margin.bottom, margin.top])
	.domain([0, extent.max])


	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));

	const i = 3;
	svg.append('g')
	.classed("data", true)
	.selectAll("rect")
	.data(result)
	.join(enter =>
	enter.append('rect')
	.attr("x", d => xScale(d.id))
	.attr("y", d => yScale.range()[0] - yScale(d.values[i].value))
	.attr("height", d => yScale(d.values[i].value))
	.attr("width", d => xScale.bandwidth())
	.style('fill', '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))

	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>