Skip to content

Instantly share code, notes, and snippets.

@vigneshncc
Last active April 9, 2020 09:38
Show Gist options
  • Save vigneshncc/3c6dbe5ccfa322a4420816e12c62dcc0 to your computer and use it in GitHub Desktop.
Save vigneshncc/3c6dbe5ccfa322a4420816e12c62dcc0 to your computer and use it in GitHub Desktop.
Corona Status - March 2020
license: mit
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment