D3 Examples - Apples, bananas, grapes, oranges... What's your favorite?

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>What's Your Favorite Fruit?</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    <body>
​
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
                background-color: #FFFF99;
                padding: 10px;
            }
            
            h1 {
                font-size: 36px;
                font-weight: normal;
                            }
            
            h2 {
                font-size: 24px;
                font-weight: normal;
}
            
            text {
                font-family: verdana;
                        }
​
            svg {
                background-color: dimgray;}
​
        </style>
    </head>
    <body>
        
        <script type="text/javascript">     
​
​
            //Load in contents of CSV file
            d3.csv("fruits-by-race-uploaded-to-gist-FINAL.csv", function(data) {
​
                //Now CSV contents have been transformed into
                //an array of JSON objects.
​
                //Log 'data' to the console, for verification.
                console.log(data);
​
            });
​
​
        </script>
        <h1 align="left"> Apples, bananas, grapes, oranges-- <em>What's your favorite?</em> </h1>
                <div align="center">
        <svg width="600" height="450">
            <circle cx="100" cy="140" r="60" fill="red"  />
            <text x="40" y="60" fill="white" font-size="22" font-weight="bold" font-family="cambria">Apples</text>
            <circle cx="480" cy="178" r="75" fill="orange" stroke-width="6" stroke="purple" />
            <text x="400" y="90" fill="white" font-size="22" font-weight="bold" font-family="cambria">Oranges</text>
            <rect x="180" y="120" width="70" height="250" fill="yellow" stroke-width="10" stroke="blue"/>
            <text x="160" y="100" fill="white" font-size="22" font-weight="bold" font-family="cambria">Bananas</text>
            <text x="280" y="300" fill="white" font-size="22" font-weight="bold" font-family="cambria">Grapes</text>
            <line x1="320" y1="100" x2="360" y2="80">
            </line> stroke="green" stroke-width="15"                                                 />
            <line x1="300" y1="190" x2="380" y2="12" stroke="green" stroke-width="25" />
            
            <circle cx="300" cy="178" r="20" fill="violet" stroke-width="2" stroke="white" />
            <circle cx="330" cy="190" r="20" fill="violet" stroke-width="2" stroke="white" />
            <circle cx="310" cy="100" r="25" fill="violet" stroke-width="2" stroke="white" />
            <circle cx="340" cy="220" r="28" fill="violet" stroke-width="2" stroke="white" />
            <circle cx="340" cy="130" r="29" fill="violet" stroke-width="2" stroke="white" />
            <circle cx="330" cy="245" r="24" fill="violet" stroke-width="2" stroke="white" />
            
            text x="45" y="400" fill="white" font-size="60" font-weight="bold" font-family="Helvetica">imagine</text>                   <text x="300" y="400" fill="red" font-size="72" font-weight="bold">FRUIT</text>       
        </svg></div>        
​
    </body>
</html>
    