Angus chart (worldofdata) test

forked from angusgrant's block: Angus chart (worldofdata) test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html { background-color: #66f; color: white; font-family: sans-serif}
        h1 { font-size:1.2em;}

.x-axis path,
        .x-axis line,
        .y-axis path,
        .y-axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        #chart {
            border: 1px solid black;
            top:12vh;
            left:0;
            right:0;
            bottom:0;
            width:100%;
            height:80vh;
            margin-top: 20px;
            position: absolute;
            background-color: #fff;
            color: #333;
        }

.line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
        }

.legend rect {
            fill:white;
            stroke:black;
            opacity:0.8;}
      
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 100px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
			}
    
    </style>

<title>diet-compositions-by-commodity-categories-fao-2017</title>
</head>
<body>

<h1>Diet Compositions By Commodity Categories - Martin institute</h1>
    <label class="chart-type">Select a chart type:  
        <select id="chart-type">
                <option value="stacked">stacked area chart</option>
                <option value="line">line chart</option>
        </select>
        </label>
    <svg id="chart">
    </svg>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js

https://d3js.org/d3-color.v1.min.js