Skip to content

Instantly share code, notes, and snippets.

@tecoholic

tecoholic/index.html

Last active April 1, 2020 09:06
Show Gist options
  • Save tecoholic/aa5f01cc72b6b2908c707b6101b7e170 to your computer and use it in GitHub Desktop.
Save tecoholic/aa5f01cc72b6b2908c707b6101b7e170 to your computer and use it in GitHub Desktop.
Download ZIP
D3 example with Covid API
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js Example</title>
<style>
.axis text {
font: 8px sans-serif;
}
/* This is the small lines in the axis */
.axis line {
stroke-width: 0.8;
stroke: orange;
}
/* This is the big connecting line */
.domain {
stroke: green;
}
</style>
</head>
<body>
<h3>See https://www.d3-graph-gallery.com/ for more tutorials</h3>
<div id="content">
<svg id="confirmed" width="450" height="225" viewBox="0 0 100% 60" preserveAspectRatio="xMidYMid meet">
</div>
<div id="content">
<svg id="recovered" width="450" height="225" viewBox="0 0 100% 60" preserveAspectRatio="xMidYMid meet">
</div>
<div id="content">
<svg id="deceased" width="450" height="225" viewBox="0 0 100% 60" preserveAspectRatio="xMidYMid meet">
</div>
<!-- Add jQuery and D3.js libraries -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Our Script -->
<script>
function draw_graph(timeseries) {
const width = 100;
const height = 60;
const padding = 10;
const svg = d3.select('#confirmed')
/**
* Create the X scale function which will convert the dates in the data to a value
* between 0 to 100 (widht of our graph).
*
* Domain sets the value we will provide
* Range sets the value `x` will return
**/
const x = d3.scaleTime()
.domain(d3.extent(timeseries, function(d) {
return new Date(d.date + "2020");
}))
.range([padding, width - padding])
/**
* Similarly describe the `y` scale function which will take in the integer value
* in the range of the confirmed cases and return a value between Height and 0
*
* IMPORTANT: since we count from top, we need to set it from height (big value) to
* zero (so that the graph is drawn from the bottom)
*
**/
const y = d3.scaleLinear()
.domain(d3.extent(timeseries, function(d) {
return parseInt(d.dailyconfirmed);
}))
.range([height - padding, padding])
// Add the line
svg.append("path")
.datum(timeseries)
.attr('fill', 'blue') // this has been changed from none to blue
.attr('stroke', 'red') // you can remove this line if you don't want an outline.
.attr('stroke-width', 0) // this has been set to 0
.attr('opacity', 1)
.attr('d', d3.area() // IMPORTANT: Change line to area
.x(function(d) {
/**
* X is used here to convert the date into pixel values
*/
return x(new Date(d.date + "2020"));
})
.y0(y(0)) // For area set y0 and y1
.y1(function(d) {
/**
* Y is used here to convert the confirmed value into Y pixel values
*/
return y(parseInt(d.dailyconfirmed));
}) // use the y we defined before
.curve(d3.curveCardinal)
)
// Make it darker when mouse enters
.on('mouseover', function() {
d3.select(this)
.attr('opacity', 0.8)
})
// Make it lighter when mouse leaves
.on('mouseout', function() {
d3.select(this)
.attr('opacity', 0.8)
})
}
function draw_graph1(timeseries) {
const width = 100;
const height = 60;
const padding = 10;
const svg = d3.select('#recovered')
/**
* Create the X scale function which will convert the dates in the data to a value
* between 0 to 100 (widht of our graph).
*
* Domain sets the value we will provide
* Range sets the value `x` will return
**/
const x = d3.scaleTime()
.domain(d3.extent(timeseries, function(d) {
return new Date(d.date + "2020");
}))
.range([padding, width - padding])
/**
* Similarly describe the `y` scale function which will take in the integer value
* in the range of the confirmed cases and return a value between Height and 0
*
* IMPORTANT: since we count from top, we need to set it from height (big value) to
* zero (so that the graph is drawn from the bottom)
*
**/
const y = d3.scaleLinear()
.domain(d3.extent(timeseries, function(d) {
return parseInt(d.dailyrecovered);
}))
.range([height - padding, padding])
/**
* Adding Y Axis to the graph, Add a "g" object (like div in html)
* - Move the g a little bit to the right so the axis text is visible
*/
svg.append('g')
.attr('class', 'axis') // defining the axis class to adjust the styles, look at the header for styles
.attr('transform', 'translate(25, 0)')
.call(d3.axisLeft(y).ticks(3))
svg.append('g')
.attr('class', 'axis') // defining the axis class to adjust the styles, look at the header for styles
.attr('transform', 'translate(0, ' + height + ')')
.call(d3.axisBottom(x).ticks(3))
// Add the line
svg.append("path")
.datum(timeseries)
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 1)
.attr('opacity', 0.4)
.attr('d', d3.line()
.x(function(d) {
return x(new Date(d.date + "2020"));
}) // Use the x we defined before
.y(function(d) {
return y(parseInt(d.dailyrecovered));
}) // use the y we defined before
.curve(d3.curveCardinal)
)
// Make it darker when mouse enters
.on('mouseover', function() {
d3.select(this)
.attr('opacity', 0.8)
})
// Make it lighter when mouse leaves
.on('mouseout', function() {
d3.select(this)
.attr('opacity', 0.4)
})
}
function draw_graph2(timeseries) {
const width = 100;
const height = 60;
const padding = 10;
const svg = d3.select('#deceased')
/**
* Create the X scale function which will convert the dates in the data to a value
* between 0 to 100 (widht of our graph).
*
* Domain sets the value we will provide
* Range sets the value `x` will return
**/
const x = d3.scaleTime()
.domain(d3.extent(timeseries, function(d) {
return new Date(d.date + "2020");
}))
.range([padding, width - padding])
/**
* Similarly describe the `y` scale function which will take in the integer value
* in the range of the confirmed cases and return a value between Height and 0
*
* IMPORTANT: since we count from top, we need to set it from height (big value) to
* zero (so that the graph is drawn from the bottom)
*
**/
const y = d3.scaleLinear()
.domain(d3.extent(timeseries, function(d) {
return parseInt(d.dailydeceased);
}))
.range([height - padding, padding])
// Add the line
svg.append("path")
.datum(timeseries)
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 1)
.attr('opacity', 0.4)
.attr('d', d3.line()
.x(function(d) {
return x(new Date(d.date + "2020"));
}) // Use the x we defined before
.y(function(d) {
return y(parseInt(d.dailydeceased));
}) // use the y we defined before
.curve(d3.curveCardinal)
)
// Make it darker when mouse enters
.on('mouseover', function() {
d3.select(this)
.attr('opacity', 0.8)
})
// Make it lighter when mouse leaves
.on('mouseout', function() {
d3.select(this)
.attr('opacity', 0.4)
})
}
/**
* Main function triggered as soon as the file is fully loaded
*
**/
$(document).ready(function() {
const url = "https://api.covid19india.org/data.json";
$.get(url).done(function(data) {
draw_graph(data.cases_time_series);
draw_graph1(data.cases_time_series);
draw_graph2(data.cases_time_series);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment