D3 Examples - Bubbles and penguins

Bubbles and penguins

This Gist is the result of the exercise of Module 2 from the online course Data Visualization and Infographics with D3.

The html includes an svg element with simple geometric shapes drawing the image of a penguin and some bubbles. The script tag within the body consists of code to load in data using D3's csv() function. To verify that everything worked as expected, the parsed data will be logged to the console.

The image of the penguin is based on a graphic by mibo.

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>
​
​
        <style>
            .aqua {
                fill: #59c0ec;
            }
​
            .white {
                fill: #fff;
                stroke: #59c0ec;
                stroke-width: 2;
            }
​
            .frame {
                fill: #fff;
                stroke: #59c0ec;
                stroke-width: 7;
            }
​
            .orange {
                fill: #f89d24;
            }
        </style>
​
        <body>
            <!-- main svg -->
            <svg width="950" height="500">
​
                <defs>
                    <clipPath id="background-circle">
                        <circle cx="450" cy="250" r="225"></circle>
                    </clipPath>
                </defs>
​
                <defs>
                    <clipPath id="penguin-eye">
                        <ellipse cx="100" cy="100" rx="37" ry="40"></ellipse>
                    </clipPath>
                </defs>
​
                <g id="penguin" style="clip-path: url(#background-circle)" transform="translate(40,20)">
                    <circle cx="450" cy="250" r="225" class="frame"></circle>
                    <!-- penguin head -->
                    <polygon points="330,80 550,80 600,300 450,340 280,300"></polygon>
                    <!-- penguin eye left -->
                    <g style="clip-path: url(#penguin-eye);" transform="translate(260, 60) rotate(30 100,100)">
                        <ellipse cx="100" cy="100" rx="37" ry="40" fill="#fff" ></ellipse>
                        <circle cx="85" cy="100" r="31" fill="#000"></circle>
                        <circle cx="75" cy="95" r="5" fill="#fff"></circle>
                    </g>
                    <!-- penguin eye right -->
                    <g style="clip-path: url(#penguin-eye);" transform="translate(420, 60) rotate(-30 100,100)">
                        <ellipse cx="100" cy="100" rx="37" ry="40" fill="#fff" ></ellipse>
                        <circle cx="115" cy="100" r="31" fill="#000"></circle>
                        <circle cx="125" cy="95" r="5" fill="#fff"></circle>
                    </g>
                    <!-- penguin beak-->
                    <polygon points="440,240 530,270 440,360 350,270" class="orange"></polygon>
                    <!-- penguin side left-->
                    <polygon points="310,300 360,300 345,500 295,500" fill="#000"></polygon>
                    <!-- penguin side right-->
                    <polygon points="520,300 570,300 595,500 545,500" fill="#000"></polygon>
                </g> <!-- end #penguin -->
​
                <!-- bubbles -->
                <circle cx="250" cy="60" r="7" class="white"></circle>
                <circle cx="310" cy="70" r="18" class="aqua"></circle>
                <circle cx="150" cy="90" r="25" class="white"></circle>
                <circle cx="250" cy="130" r="22" class="aqua"></circle>
                <circle cx="220" cy="200" r="30" class="aqua"></circle>
                <circle cx="370" cy="30" r="15" class="white"></circle>
                <circle cx="420" cy="30" r="7" class="aqua"></circle>
                <circle cx="470" cy="25" r="5" class="aqua"></circle>
​
                <circle cx="770" cy="120" r="7" class="white"></circle>
                <circle cx="600" cy="40" r="18" class="white"></circle>
                <circle cx="720" cy="150" r="25" class="white"></circle>
                <circle cx="850" cy="130" r="22" class="aqua"></circle>
                <circle cx="770" cy="230" r="30" class="aqua"></circle>
                <circle cx="670" cy="80" r="15" class="aqua"></circle>
                <circle cx="750" cy="60" r="7" class="aqua"></circle>
                <circle cx="690" cy="40" r="10" class="aqua"></circle>
​
            </svg>
​
​
            <script type="text/javascript">
​
​
                //Load in contents of CSV file
                d3.csv("earthquakes_all_day.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>
​
    