vigneshncc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## corona.csv

          
            State
            Confirmed
            Active
            Recovered
            Deceased

            
              MAHARASHTRA
              238
              189
              39
              10

            
              KERALA
              234
              212
              20
              2

            
              DELHI
              97
              89
              6
              2

            
              UTTAR PRADESH
              96
              79
              17
              0

            
              KARNATAKA
              91
              82
              6
              3

            
              RAJASTHAN
              79
              76
              3
              0

            
              TELANGANA
              77
              55
              14
              8

            
              GUJARAT
              70
              61
              3
              6

            
              TAMIL NADU
              67
              62
              4
              1

            
              JAMMU AND KASHMIR
              49
              47
              1
              1

            
              MADHYA PRADESH
              47
              43
              0
              4

            
              PUNJAB
              41
              37
              1
              3

            
              HARYANA
              36
              19
              17
              0

            
              ANDHRA PRADESH
              23
              22
              1
              0

            
              WEST BENGAL
              22
              20
              0
              2

            
              BIHAR
              15
              14
              0
              1

            
              CHANDIGARH
              13
              13
              0
              0

            
              LADAKH
              13
              10
              3
              0

            
              ANDAMAN AND NICOBAR ISLANDS
              10
              10
              0
              0

            
              CHHATTISGARH
              8
              8
              0
              0

            
              UTTARAKHAND
              7
              5
              2
              0

            
              GOA
              5
              5
              0
              0

            
              HIMACHAL PRADESH
              3
              1
              1
              1

            
              ODISHA
              3
              3
              0
              0

            
              MANIPUR
              1
              1
              0
              0

            
              MIZORAM
              1
              1
              0
              0

            
              PUDUCHERRY
              1
              1
              0
              0

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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: 20, bottom: 20, left: 20, right: 20};

    d3.csv('corona.csv', (err, 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);
      })
      //create extent
      let yExtent = d3.extent(data, d=> d.Confirmed);

      let svg = d3.select('svg');

      //Defining x and y scale
      let xScale = d3.scalePoint()
      .domain(xAxis)
      .range([margin.left, width-margin.right]);

      let yScale = d3.scaleLinear()
      .domain(yExtent)
      .range([height-margin.bottom, margin.top]);

      //create the bars
      let rect = svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('width','10')
      .attr('height', d => height-margin.top - yScale(d.Confirmed))
      .attr('x', d=>xScale(d.State))
      .attr('y', d=>yScale(d.Confirmed))
      .attr('fill','green')
      .attr('stroke','white')

      let xAxisScale = d3.axisBottom()
      .scale(xScale);


      let yAxisScale = d3.axisLeft().scale(yScale);

      svg.append('g')
      .attr('transform','translate('+[0, height-margin.top]+')')
      .call(xAxisScale);

      svg.append('g')
      .attr('transform','translate('+[margin.left,0]+')')
      .call(yAxisScale);

      svg
        .selectAll('.tick text')
        .attr('transform','rotate(90)')


    });

  </script>
</body>
State	Confirmed	Active	Recovered	Deceased
MAHARASHTRA	238	189	39	10
KERALA	234	212	20	2
DELHI	97	89	6	2
UTTAR PRADESH	96	79	17	0
KARNATAKA	91	82	6	3
RAJASTHAN	79	76	3	0
TELANGANA	77	55	14	8
GUJARAT	70	61	3	6
TAMIL NADU	67	62	4	1
JAMMU AND KASHMIR	49	47	1	1
MADHYA PRADESH	47	43	0	4
PUNJAB	41	37	1	3
HARYANA	36	19	17	0
ANDHRA PRADESH	23	22	1	0
WEST BENGAL	22	20	0	2
BIHAR	15	14	0	1
CHANDIGARH	13	13	0	0
LADAKH	13	10	3	0
ANDAMAN AND NICOBAR ISLANDS	10	10	0	0
CHHATTISGARH	8	8	0	0
UTTARAKHAND	7	5	2	0
GOA	5	5	0	0
HIMACHAL PRADESH	3	1	1	1
ODISHA	3	3	0	0
MANIPUR	1	1	0	0
MIZORAM	1	1	0	0
PUDUCHERRY	1	1	0	0
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.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: 20, bottom: 20, left: 20, right: 20};

	d3.csv('corona.csv', (err, 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);
	})
	//create extent
	let yExtent = d3.extent(data, d=> d.Confirmed);

	let svg = d3.select('svg');

	//Defining x and y scale
	let xScale = d3.scalePoint()
	.domain(xAxis)
	.range([margin.left, width-margin.right]);

	let yScale = d3.scaleLinear()
	.domain(yExtent)
	.range([height-margin.bottom, margin.top]);

	//create the bars
	let rect = svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.attr('width','10')
	.attr('height', d => height-margin.top - yScale(d.Confirmed))
	.attr('x', d=>xScale(d.State))
	.attr('y', d=>yScale(d.Confirmed))
	.attr('fill','green')
	.attr('stroke','white')

	let xAxisScale = d3.axisBottom()
	.scale(xScale);



	let yAxisScale = d3.axisLeft().scale(yScale);

	svg.append('g')
	.attr('transform','translate('+[0, height-margin.top]+')')
	.call(xAxisScale);

	svg.append('g')
	.attr('transform','translate('+[margin.left,0]+')')
	.call(yAxisScale);

	svg
	.selectAll('.tick text')
	.attr('transform','rotate(90)')


	});

	</script>
	</body>