I am currently working on developing a chart using D3js v5.12.0.
So far, I have successfully created an area chart with the year variable on the X-axis and the earth_footprint variable on the Y-axis.
You can find the data for this chart at the following link: https://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.json
Now, my goal is to add a line chart on top of the existing area chart. This new line chart should have the year variable on the X-axis and pop_total on the Y-axis.
pop_total is another variable included in the dataset.
Despite looking at tutorials that demonstrate how to draw a line on a bar chart, I've been struggling to adapt these techniques to my code which is based on an area chart.
CSS
#area-chart {
text-align: center;
margin-top: 40px;
}
.selection {
fill: none;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="area-chart"></div>
</body>
</html>
JS
var url = "http://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.json";
d3.json(url)
.then(function(data) {
data = data.filter(dataPoint => dataPoint.country_code == 'BRA');
data = data.filter(element => element.hasOwnProperty("earth_footprint"));
const heightValue =
... more unique content ...