<!doctype html>
<html>
    <head>
        <title>Fork of ICE-5: Loading and Parsing CSV Data with D3.js</title>
        <script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>
  			<style>
        	pre {
        font-size: 5em;
        text-align: center;
        background-color:#e0ffff;
      }
          h1{
          font-size: 3em;
          background-color:#6495ed;
          }
          
        </style>
  	</head>
    <body>
        <h1> We are learning how to load and parse data with d3 today! </h1>
        <pre id = 'message-container'></pre>
    		<img src = "City.svg" alt="My SVG" />
        <script>      
        const csvUrl = 'https://gist.githubusercontent.com/haili0109/ae2da4168fcfe64d536cb8dbecca704d/raw/CssColorHaili.csv'
      // With d3.csv
      d3.csv(csvUrl).then(data => {
        let message = 'The data contains：\n';
        message = message + Math.round(d3.csvFormat(data).length / 1024) + ' kB\n';
        message = message + data.length + ' rows\n';
        message = message + 'and ' + data.columns.length + ' columns';
        document.getElementById('message-container').textContent = message;
      });
      //Body.text takes a response stram and reads it to completion. 


        </script>
    </body>
</html>