Skip to content

Instantly share code, notes, and snippets.

@vigneshncc

vigneshncc/.block

Last active April 15, 2020 10:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vigneshncc/e19a9bc66467ed822582ba958a61ad16 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vigneshncc/e19a9bc66467ed822582ba958a61ad16 to your computer and use it in GitHub Desktop.
Download ZIP
Corona Status - Stacked Bar
Raw
.block
license: mit
Raw
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
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment