D3 Examples - D3_exercise

xxxxxxxxxx
 
<!doctype html>
<html>
​
<head>
    <meta charset="UTF-8">
    <title>Data Visualization and Infographics with D3 :: Module 2 Exercise</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
        body {
            background-color: azure;
        }
        
        svg {
            background-color: cornsilk;
        }
        
        polygon {
            fill: rgba(0, 255, 0, 0.42);
            stroke: purple;
            stroke-width: 1
        }
        
        text {
            fill: teal;
            font-family: cursive;
            font-size: 200%;
            font-weight: bold;
        }
    </style>
</head>
​
<body>
​
    <!-- inline SVG  -->
    <svg width="500" height="300">
        <circle cx="100" cy="100" r="60" stroke="teal" stroke-width="4" fill="green" />
        <rect x="100" y="50" width="100" height="50" style="fill:rgba(0, 0, 255, 0.35);stroke-width:3;stroke:rgb(0,0,0)" />
        <polygon points="200,10 350,90 160,210" />
        <text x="300" y="200">I love SVG</text>
    </svg>
​
    <h1>Not much to see here; try looking in the console!</h1>
​
    <script>
        d3.csv("websitesEuro18.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>
​
​
​
​
</body>
​
</html>
    