D3 Examples - Random data on the US, 2010-2014

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    <body>
​
        <p>I based this shadowed roundy square on the <a href="https://www.w3schools.com/svg/svg_rect.asp">w3schools.com</a> examples of things you can create with SVG </p>
​
        <svg height="140" width="140">
          <defs>
            <filter id="f4" rx="0" ry="0" width="200%" height="200%">
              <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
              <feColorMatrix result="matrixOut" in="offOut" type="matrix"
              values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
              <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
              <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
          </defs>
          <rect x='10' y='10' rx='10' ry='10' width="90" height="90" stroke="gray" stroke-width="3"
          fill="cyan" filter="url(#f4)" />
        </svg>  
​
        <script type="text/javascript">     
​
​
            //Load in contents of CSV file
            // two parameters: file to load in, then anonymous function
            // to handle the data.  
            d3.csv("US.csv", function(data) {
​
                //Now CSV contents have been transformed into
                //an array of JSON objects.
                //JSON=JavaScript Object Notation
​
                //Log 'data' to the console, for verification.
                console.log(data);
​
            });
​
​
        </script>
​
    </body>
</html>
    