vigneshncc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from vigneshncc's block: Corona Status - March 2020

  
## corona.csv

          
            State
            Confirmed
            Active
            Recovered
            Deceased

            
              MAHARASHTRA
              1297
              1108
              117
              72

            
              TAMIL NADU
              738
              709
              21
              8

            
              DELHI
              669
              639
              21
              9

            
              TELANGANA
              453
              397
              45
              11

            
              RAJASTHAN
              430
              382
              45
              3

            
              UTTAR PRADESH
              361
              326
              31
              4

            
              ANDHRA PRADESH
              348
              339
              6
              3

            
              MADHYA PRADESH
              347
              298
              25
              24

            
              KERALA
              345
              259
              84
              2

            
              GUJARAT
              241
              198
              126
              117

            
              KARNATAKA
              191
              157
              28
              16

            
              HARYANA
              168
              134
              32
              2

            
              JAMMU AND KASHMIR
              158
              149
              6
              3

            
              PUNJAB
              117
              93
              14
              110

            
              WEST BENGAL
              103
              82
              16
              5

            
              BIHAR
              51
              35
              15
              1

            
              ODISHA
              44
              41
              2
              1

            
              UTTARAKHAND
              35
              30
              5
              0

            
              ASSAM
              28
              28
              0
              0

            
              HIMACHAL PRADESH
              28
              24
              2
              2

            
              CHANDIGARH
              18
              11
              7
              0

            
              LADAKH
              14
              4
              10
              0

            
              JHARKHAND
              13
              12
              0
              11

            
              ANDAMAN AND NICOBAR ISLANDS
              11
              11
              0
              0

            
              CHHATTISGARH
              11
              2
              9
              0

            
              GOA
              7
              7
              0
              0

            
              PUDUCHERRY
              5
              4
              1
              0

            
              MANIPUR
              2
              1
              1
              0

            
              ARUNACHAL PRADESH
              1
              1
              0
              0

            
              DADRA AND NAGAR HAVELI
              1
              1
              0
              0

            
              MIZORAM
              1
              1
              0
              0

            
              TRIPURA
              1
              1
              0
              0

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/d3@5.15.1/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@1.5.0/dist/d3-scale-chromatic.min.js"></script>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var width = 900;
    var height = 600;
    var margin = {top: 10, bottom: 20, left: 40, right: 10};

    d3.csv('corona.csv')
  	.then(function(data) {

      //converting String to numbers.
      let xAxis = [];
      let yAxis = [];
      data.forEach(d =>{
      	d.Confirmed = ++d.Confirmed;
        d.Active = ++d.Active;
        d.Recovered = ++d.Recovered;
        d.Deceased = ++d.Deceased;
      });

      data.forEach(d =>{
        xAxis.push(d.State);
        yAxis.push(d.Confirmed);
      })


      let series = d3.stack()
      .keys(data.columns.slice(1))
      (data).map(d=> (
        d.forEach(v => v.key = d.key),d
      ));


      let x = d3.scaleBand()
      .domain(xAxis)
      .range([margin.left, width-margin.right]);

      let y = d3.scaleLinear()
      .domain([0, d3.max(series, d => d3.max(d, d=>d[1]))])
      .rangeRound([height-margin.bottom, margin.top]);

      let color = d3.scaleOrdinal()
      .domain(series.map(d => d.key))
      .range(d3.schemeSpectral[series.length])
      .unknown('#ccc')

      let formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")

      const svg = d3.select('svg')

      svg.append("g")
      .selectAll("g")
      .data(series)
      .join("g")
      .attr("fill", d=> color(d.key))
      .selectAll("rect")
      .data(d => d)
      .join("rect")
      .attr("x", (d, i) => x(d.data.State))
      .attr("y", d => y(d[1]))
      .attr("height", d => y(d[0]) - y(d[1]))
      .attr("width", x.bandwidth())
      .attr("stroke",'white')
      .append("title")
      .text(d => `${d.data.State} ${d.key}
				${formatValue(d.data[d.key])}`);

      let xScale = g => g.attr('transform', `translate(0,${height-margin.bottom})`)
      .call(d3.axisBottom(x).tickSizeOuter(0))
      .call(g => g.selectAll(".domain").remove());

      svg.append("g")
      .attr("transform", "translate(0," + height + ")")
    	.call(xScale)
  		.selectAll("text")
      .attr("y", 0)
      .attr("x", 9)
      .attr("dy", ".35em")
      .attr("transform", "rotate(90)")
      .style("text-anchor", "start")

      let yScale = g =>
        g.attr('transform', `translate(${margin.left},0)`)
        .call(d3.axisLeft(y).ticks(null,"s"))
        .call(g => g.selectAll('.domain').remove())

      svg.append("g").call(yScale);


  })
  .catch(function(error){

  })


  </script>
</body>
State	Confirmed	Active	Recovered	Deceased
MAHARASHTRA	1297	1108	117	72
TAMIL NADU	738	709	21	8
DELHI	669	639	21	9
TELANGANA	453	397	45	11
RAJASTHAN	430	382	45	3
UTTAR PRADESH	361	326	31	4
ANDHRA PRADESH	348	339	6	3
MADHYA PRADESH	347	298	25	24
KERALA	345	259	84	2
GUJARAT	241	198	126	117
KARNATAKA	191	157	28	16
HARYANA	168	134	32	2
JAMMU AND KASHMIR	158	149	6	3
PUNJAB	117	93	14	110
WEST BENGAL	103	82	16	5
BIHAR	51	35	15	1
ODISHA	44	41	2	1
UTTARAKHAND	35	30	5	0
ASSAM	28	28	0	0
HIMACHAL PRADESH	28	24	2	2
CHANDIGARH	18	11	7	0
LADAKH	14	4	10	0
JHARKHAND	13	12	0	11
ANDAMAN AND NICOBAR ISLANDS	11	11	0	0
CHHATTISGARH	11	2	9	0
GOA	7	7	0	0
PUDUCHERRY	5	4	1	0
MANIPUR	2	1	1	0
ARUNACHAL PRADESH	1	1	0	0
DADRA AND NAGAR HAVELI	1	1	0	0
MIZORAM	1	1	0	0
TRIPURA	1	1	0	0
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/d3@5.15.1/dist/d3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@1.5.0/dist/d3-scale-chromatic.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<svg></svg>
	<script>
	var width = 900;
	var height = 600;
	var margin = {top: 10, bottom: 20, left: 40, right: 10};

	d3.csv('corona.csv')
	.then(function(data) {

	//converting String to numbers.
	let xAxis = [];
	let yAxis = [];
	data.forEach(d =>{
	d.Confirmed = ++d.Confirmed;
	d.Active = ++d.Active;
	d.Recovered = ++d.Recovered;
	d.Deceased = ++d.Deceased;
	});

	data.forEach(d =>{
	xAxis.push(d.State);
	yAxis.push(d.Confirmed);
	})


	let series = d3.stack()
	.keys(data.columns.slice(1))
	(data).map(d=> (
	d.forEach(v => v.key = d.key),d
	));


	let x = d3.scaleBand()
	.domain(xAxis)
	.range([margin.left, width-margin.right]);

	let y = d3.scaleLinear()
	.domain([0, d3.max(series, d => d3.max(d, d=>d[1]))])
	.rangeRound([height-margin.bottom, margin.top]);

	let color = d3.scaleOrdinal()
	.domain(series.map(d => d.key))
	.range(d3.schemeSpectral[series.length])
	.unknown('#ccc')

	let formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")

	const svg = d3.select('svg')

	svg.append("g")
	.selectAll("g")
	.data(series)
	.join("g")
	.attr("fill", d=> color(d.key))
	.selectAll("rect")
	.data(d => d)
	.join("rect")
	.attr("x", (d, i) => x(d.data.State))
	.attr("y", d => y(d[1]))
	.attr("height", d => y(d[0]) - y(d[1]))
	.attr("width", x.bandwidth())
	.attr("stroke",'white')
	.append("title")
	.text(d => `${d.data.State} ${d.key}
	${formatValue(d.data[d.key])}`);

	let xScale = g => g.attr('transform', `translate(0,${height-margin.bottom})`)
	.call(d3.axisBottom(x).tickSizeOuter(0))
	.call(g => g.selectAll(".domain").remove());

	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(xScale)
	.selectAll("text")
	.attr("y", 0)
	.attr("x", 9)
	.attr("dy", ".35em")
	.attr("transform", "rotate(90)")
	.style("text-anchor", "start")

	let yScale = g =>
	g.attr('transform', `translate(${margin.left},0)`)
	.call(d3.axisLeft(y).ticks(null,"s"))
	.call(g => g.selectAll('.domain').remove())

	svg.append("g").call(yScale);


	})
	.catch(function(error){

	})


	</script>
	</body>