gaistou/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from romsson's block: Stacked bar chart v4

  
## index.html
<!DOCTYPE html>
<style>

  .axis .domain {
    display: none;
  }
  label {
    margin-right: 1rem;
  }
  fieldset {
    border: none;
  }

</style>
  <body>
    <h1></h1>
    <div class="controls"></div>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
function createChart(data,n,m){


var y = d3.scaleLinear()
		.domain([0, m])
    .rangeRound([height, 0])
		.nice();

var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.1)
    .domain(d3.range(n));

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var layers = d3.stack().keys(d3.range(m))(data);

   function updateChart(svg,data,chartType = 'stack'){

     if (chartType === 'stack')
       {
				svg.selectAll("*").remove();
				data = data[0].map((col, i) => data.map(row => row[i]));
         y = d3.scaleLinear()
         .domain([0, m])
         .rangeRound([height, 0])
         .nice();

         x = d3.scaleBand()
         .rangeRound([0, width])
         .paddingInner(0.05)
         .align(0.1)
         .domain(d3.range(n));
         const bars =
         svg.append("g").selectAll("g")
           .data(layers)
           .enter().append("g")

           .style("fill", function(d) { return z(d.key); })
           .selectAll("rect")
           .data(function(d) { return d; })
           .enter().append("rect")
           .attr("y",height)
           .transition()
           .attr("x", function(d, i) { return x(i); })
           .attr("y", function(d) { return y(d[1]); })
           .attr("height", function(d) { return y(d[0]) - y(d[1]); })
           .attr("width", x.bandwidth());

         var legend = svg.append("g")
         .attr('font-size', 10)
         .attr('text-anchor', 'end')


       }else if (chartType === 'group')
         {
           svg.selectAll("*").remove();
           	data = data[0].map((col, i) => data.map(row => row[i]));
           y = d3.scaleLinear()
           .domain([0, 1])
           .range([height, 0]);

           var x0 = d3.scaleBand()
           .domain(d3.range(n))
           .range([0, width], .2);

           var x1 = d3.scaleBand()
           .domain(d3.range(m))
           .range([0, x0.bandwidth() - 10]);

           svg.append("g").selectAll("g")
             .data(data)
             .enter().append("g")
             .style("fill", function(d, i) { return z(i); })
             .attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; })
             .selectAll("rect")
             .data(function(d) { return d; })
             .enter().append("rect")
           		.attr("y",height)
             .transition()
             .attr("width", x1.bandwidth())
             .attr("height", y)
             .attr("x", function(d, i) { return x0(i); })
             .attr("y", function(d) { return height - y(d); });


           var legend = svg.append("g")
           .attr('font-size', 10)
           .attr('text-anchor', 'end')

         }
   }
  return {
    updateChart
  }
}
  var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  // Source: https://bl.ocks.org/mbostock/3886208
var n = 10, // number of samples (columns)
    m = 5; // number of series (layers)

var data = d3.range(n).map(function() {
  return d3.range(m).map(Math.random);
});
  console.log(data)
  const chart = createChart(data,n,m)
  const fieldset = d3.select('.controls').append('fieldset')
  const types =  ['stack', 'group']
  fieldset.append('legend').text('Graph Layout')

  types.forEach((graphType, index)=>{
    const label = fieldset.append('label')
    label.append('input')
    .attr('type', 'radio')
    .attr('name', 'graphType')
    .attr('value', graphType)
    .attr('checked', function(){
      if (index === 0) return true
      return null
    })
    .on('click', ()=>{
      chart.updateChart(svg,data, graphType)
    })

    label.append('span')
    .text(graphType)

  })

//   render initial chart
  chart.updateChart(svg,data)


</script>
	<!DOCTYPE html>
	<style>

	.axis .domain {
	display: none;
	}
	label {
	margin-right: 1rem;
	}
	fieldset {
	border: none;
	}

	</style>
	<body>
	<h1></h1>
	<div class="controls"></div>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	function createChart(data,n,m){


	var y = d3.scaleLinear()
	.domain([0, m])
	.rangeRound([height, 0])
	.nice();

	var x = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.05)
	.align(0.1)
	.domain(d3.range(n));

	var z = d3.scaleOrdinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	var layers = d3.stack().keys(d3.range(m))(data);

	function updateChart(svg,data,chartType = 'stack'){

	if (chartType === 'stack')
	{
	svg.selectAll("*").remove();
	data = data[0].map((col, i) => data.map(row => row[i]));
	y = d3.scaleLinear()
	.domain([0, m])
	.rangeRound([height, 0])
	.nice();

	x = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.05)
	.align(0.1)
	.domain(d3.range(n));
	const bars =
	svg.append("g").selectAll("g")
	.data(layers)
	.enter().append("g")

	.style("fill", function(d) { return z(d.key); })
	.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("y",height)
	.transition()
	.attr("x", function(d, i) { return x(i); })
	.attr("y", function(d) { return y(d[1]); })
	.attr("height", function(d) { return y(d[0]) - y(d[1]); })
	.attr("width", x.bandwidth());

	var legend = svg.append("g")
	.attr('font-size', 10)
	.attr('text-anchor', 'end')




	}else if (chartType === 'group')
	{
	svg.selectAll("*").remove();
	data = data[0].map((col, i) => data.map(row => row[i]));
	y = d3.scaleLinear()
	.domain([0, 1])
	.range([height, 0]);

	var x0 = d3.scaleBand()
	.domain(d3.range(n))
	.range([0, width], .2);

	var x1 = d3.scaleBand()
	.domain(d3.range(m))
	.range([0, x0.bandwidth() - 10]);

	svg.append("g").selectAll("g")
	.data(data)
	.enter().append("g")
	.style("fill", function(d, i) { return z(i); })
	.attr("transform", function(d, i) { return "translate(" + x1(i) + ",0)"; })
	.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("y",height)
	.transition()
	.attr("width", x1.bandwidth())
	.attr("height", y)
	.attr("x", function(d, i) { return x0(i); })
	.attr("y", function(d) { return height - y(d); });


	var legend = svg.append("g")
	.attr('font-size', 10)
	.attr('text-anchor', 'end')

	}
	}
	return {
	updateChart
	}
	}
	var margin = {top: 20, right: 30, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	// Source: https://bl.ocks.org/mbostock/3886208
	var n = 10, // number of samples (columns)
	m = 5; // number of series (layers)

	var data = d3.range(n).map(function() {
	return d3.range(m).map(Math.random);
	});
	console.log(data)
	const chart = createChart(data,n,m)
	const fieldset = d3.select('.controls').append('fieldset')
	const types = ['stack', 'group']
	fieldset.append('legend').text('Graph Layout')

	types.forEach((graphType, index)=>{
	const label = fieldset.append('label')
	label.append('input')
	.attr('type', 'radio')
	.attr('name', 'graphType')
	.attr('value', graphType)
	.attr('checked', function(){
	if (index === 0) return true
	return null
	})
	.on('click', ()=>{
	chart.updateChart(svg,data, graphType)
	})

	label.append('span')
	.text(graphType)

	})

	// render initial chart
	chart.updateChart(svg,data)



	</script>