Skip to content

Instantly share code, notes, and snippets.

@mcgovemc

mcgovemc/README.md

Last active February 24, 2016 02:41
Show Gist options
  • Save mcgovemc/f4d33e5a7e5419b8cada to your computer and use it in GitHub Desktop.
Save mcgovemc/f4d33e5a7e5419b8cada to your computer and use it in GitHub Desktop.
Download ZIP
Bubbles and penguins
Raw
README.md

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.

forked from nadeschda's block: Bubbles and penguins

Raw
earthquakes_all_day.csv
time latitude longitude depth mag magType gap rms id updated place type
2015-03-20T21:40:51.400Z 33.607 -1.168.251.667 7.78 0.42 ml 109 0.26 ci37344496 2015-03-20T21:44:47.401Z 15km WNW of Anza, California earthquake
2015-03-20T21:34:24.370Z 355.330.009 -12.087.117 2.58 1.19 md 104 0.06 nc72414690 2015-03-20T21:36:00.800Z 10km N of Cayucos, California earthquake
2015-03-20T21:27:41.370Z 387.836.685 -1.227.429.962 1.61 0.37 md 118 0.02 nc72414680 2015-03-20T21:45:06.696Z 1km ENE of The Geysers, California earthquake
2015-03-20T21:07:14.790Z 33.652 -1.166.923.333 19.92 0.79 ml 59 0.25 ci37344448 2015-03-20T21:11:25.621Z 10km SSE of Idyllwild, California earthquake
2015-03-20T21:03:30.250Z 335.416.667 -1.167.785 12.82 0.63 ml 44 0.28 ci37344440 2015-03-20T21:07:36.371Z 10km W of Anza, California earthquake
2015-03-20T20:53:10.560Z 38.786.335 -1.227.229.996 3.38 0.88 md 112 0.01 nc72414665 2015-03-20T21:20:05.626Z 3km S of Cobb, California earthquake
2015-03-20T20:46:55.580Z 387.775.002 -1.227.283.325 1.49 0.46 md 134 0.01 nc72414660 2015-03-20T21:03:06.595Z 2km E of The Geysers, California earthquake
2015-03-20T19:17:31.250Z 374.898.333 -1.188.546.667 7.26 0.49 md 121 0.08 nc72414620 2015-03-20T21:09:07.607Z 20km SSE of Mammoth Lakes, California earthquake
2015-03-20T19:16:30.850Z 469.805 -1.222.006.667 0.01 1 md 160 0.1 uw60986836 2015-03-20T19:26:38.230Z 10km SE of Graham, Washington explosion
2015-03-20T19:07:14.130Z 33.938 -116.02 1.89 0.79 ml 157 0.13 ci37344304 2015-03-20T19:11:21.253Z 23km SSE of Twentynine Palms, California earthquake
2015-03-20T17:56:49.120Z 365.836.678 -1.214.179.993 2.24 1.62 md 107 0.11 nc72414580 2015-03-20T18:34:05.189Z 8km NNE of Gonzales, California earthquake
2015-03-20T17:17:14.320Z 332.573.333 -1.160.201.667 6.74 1.55 ml 35 0.33 ci37344176 2015-03-20T17:28:26.210Z 8km SW of Salton City, California earthquake
2015-03-20T16:29:10.960Z 487.143.333 -1.242.986.667 43.21 1.82 md 93 0.18 uw60986776 2015-03-20T17:48:21.370Z 21km SW of Lake Cowichan, Canada earthquake
2015-03-20T16:28:47.380Z 388.375.015 -1.228.003.311 2.48 0.51 md 114 0.01 nc72414550 2015-03-20T17:12:04.994Z 6km WNW of Cobb, California earthquake
2015-03-20T16:27:10.600Z 388.271.675 -122.810.997 9.46 0.56 md 111 0.07 nc72414545 2015-03-20T17:02:06.985Z 7km W of Cobb, California earthquake
2015-03-20T16:01:47.920Z 468.828.333 -1.237.611.667 36.2 1.64 md 168 0.2 uw60986756 2015-03-20T17:43:42.570Z 8km S of Cosmopolis, Washington earthquake
2015-03-20T15:30:49.800Z 173.659 -639.146 22 4 Md 334.8 0.38 pr15079019 2015-03-20T18:40:35.552Z 76km WSW of The Bottom, Bonaire, Saint Eustatius and Saba earthquake
2015-03-20T15:30:39.690Z 388.101.654 -1.227.418.365 3.19 0.64 md 93 0.01 nc72414510 2015-03-20T15:53:04.857Z 2km SW of Cobb, California earthquake
2015-03-20T14:45:38.030Z 387.895.012 -1.227.578.354 3.46 0.52 md 87 0.03 nc72414490 2015-03-20T15:09:06.746Z 1km N of The Geysers, California earthquake
2015-03-20T14:11:17.200Z 388.413.315 -1.227.713.318 2.13 0.63 md 128 0.03 nc72414480 2015-03-20T16:31:09.944Z 4km WNW of Cobb, California earthquake
2015-03-20T13:39:46.710Z 447.235 -1.105.423.333 4.91 1.77 ml 170 0.13 uu60105022 2015-03-20T16:17:40.110Z 37km NE of Old Faithful Geyser, Wyoming earthquake
2015-03-20T13:33:36.260Z 388.326.683 -1.228.058.319 2.51 0.92 md 48 0.02 nc72414455 2015-03-20T13:48:04.582Z 7km W of Cobb, California earthquake
2015-03-20T13:09:55.187Z 368.705 -117.754 0 0.91 ml 161.98 1.867 nn00487506 2015-03-20T13:36:36.126Z 40km NE of Lone Pine, California earthquake
2015-03-20T13:09:11.900Z 336.705 -1.167.513.333 17.47 0.2 ml 70 0.09 ci37343912 2015-03-20T21:41:30.470Z 8km SSW of Idyllwild, California earthquake
2015-03-20T13:07:48.980Z 356.815 -1.202.141.667 1.36 0.97 md 50 0.05 nc72414445 2015-03-20T17:58:05.092Z 14km ENE of Shandon, California earthquake
2015-03-20T13:01:25.420Z 33.322 -1.163.886.667 5.82 0.83 ml 63 0.1 ci37343896 2015-03-20T21:36:23.029Z 8km N of Borrego Springs, California earthquake
2015-03-20T12:53:57.240Z 407.596.667 -1.116.156.667 10.43 0.95 ml 52 0.12 uu60105017 2015-03-20T16:11:28.340Z 1km NNW of Summit Park, Utah earthquake
2015-03-20T12:51:14.820Z 388.380.013 -122.802.002 2.72 0.19 md 64 0.01 nc72414440 2015-03-20T15:21:16.769Z 7km WNW of Cobb, California earthquake
2015-03-20T12:35:03.440Z 336.003.333 -1.168.156.667 9.64 0.51 ml 49 0.12 ci37343864 2015-03-20T21:30:00.245Z 14km WNW of Anza, California earthquake
2015-03-20T12:26:20.210Z 328.826.667 -1.161.886.667 10.26 1.43 ml 81 0.2 ci37343856 2015-03-20T21:22:25.190Z 25km NW of Ocotillo, California earthquake
2015-03-20T12:13:55.570Z 388.355 -1.228.028.333 2.99 1.32 md 31 0.03 nc72414420 2015-03-20T21:44:03.740Z 7km WNW of Cobb, California earthquake
2015-03-20T11:57:17.090Z 388.083.344 -1.228.259.964 3.47 0.56 md 150 0.02 nc72414410 2015-03-20T12:12:05.404Z 6km WNW of The Geysers, California earthquake
2015-03-20T11:56:45.270Z 339.113.333 -1.168.905 16.95 0.75 ml 83 0.16 ci37343824 2015-03-20T21:16:13.941Z 2km SW of Banning, California earthquake
2015-03-20T11:47:32.740Z 36.055 -1.175.985 1.33 0.64 ml 106 0.15 ci37343816 2015-03-20T21:08:36.221Z 31km ENE of Little Lake, California earthquake
2015-03-20T11:40:10.630Z 388.311.667 -1.227.708.333 2.55 0.93 md 55 0.04 nc72414405 2015-03-20T20:29:04.503Z 4km WNW of Cobb, California earthquake
2015-03-20T11:27:42.920Z 388.128.319 -1.228.184.967 3.34 0.87 md 91 0.02 nc72414395 2015-03-20T14:06:05.613Z 6km NW of The Geysers, California earthquake
2015-03-20T11:27:08.110Z 37.614 -1.188.101.667 4.83 0.58 md 216 0.04 nc72414400 2015-03-20T17:15:41.680Z 14km ESE of Mammoth Lakes, California earthquake
2015-03-20T10:58:48.560Z 367.976.667 -1.215.166.667 4.78 1.68 md 32 0.09 nc72414385 2015-03-20T17:44:06.060Z 5km SSE of San Juan Bautista, California earthquake
2015-03-20T10:44:33.930Z 360.161.667 -1.178.873.333 3.16 1.41 ml 82 0.15 ci37343800 2015-03-20T20:40:19.060Z 6km ESE of Coso Junction, California earthquake
2015-03-20T10:33:17.350Z 389.165 -1.236.293.333 2.89 1.37 md 240 0.17 nc72414380 2015-03-20T21:44:04.696Z 5km E of Point Arena, California earthquake
2015-03-20T10:20:35.890Z 388.221.664 -1.227.649.994 2.48 0.92 md 52 0.04 nc72414375 2015-03-20T12:46:06.468Z 3km W of Cobb, California earthquake
2015-03-20T10:18:12.940Z 332.086.667 -1.166.915 9.29 0.63 ml 49 0.16 ci37343784 2015-03-20T20:33:49.327Z 8km ESE of Lake Henshaw, California earthquake
2015-03-20T10:08:13.700Z 37.453 -1.186.215 7.22 0.87 md 140 0.01 nc72414370 2015-03-20T17:48:06.063Z 17km NW of West Bishop, California earthquake
2015-03-20T10:05:57.282Z 418.899 -1.196.341 8.094 1.73 ml 129.17 1.557 nn00487498 2015-03-20T18:26:55.920Z 69km SE of Lakeview, Oregon earthquake
2015-03-20T09:51:56.170Z 360.153.333 -1.178.895 3.25 0.84 ml 83 0.15 ci37343776 2015-03-20T20:28:27.401Z 6km ESE of Coso Junction, California earthquake
2015-03-20T09:49:24.750Z 33.886 -1.165.513.333 13.51 0.84 ml 59 0.15 ci37343768 2015-03-20T20:23:36.812Z 2km SSW of Garnet, California earthquake
2015-03-20T09:47:10.870Z 387.943.344 -1.227.728.348 4.97 0.28 md 90 0.02 nc72414360 2015-03-20T12:21:06.423Z 2km NW of The Geysers, California earthquake
2015-03-20T09:38:01.490Z 337.123.333 -1.167.606.667 18.24 0.56 ml 101 0.13 ci37129116 2015-03-20T20:18:48.471Z 5km SW of Idyllwild, California earthquake
2015-03-20T09:37:54.110Z 33.382 -1.163.893.333 14.63 0.59 ml 157 0.19 ci37343760 2015-03-20T19:05:56.832Z 14km N of Borrego Springs, California earthquake
2015-03-20T09:34:14.420Z 33.592 -1.168.196.667 9.79 0.16 ml 174 0.12 ci37343752 2015-03-20T18:52:28.816Z 14km WNW of Anza, California earthquake
2015-03-20T09:31:47.710Z 333.815 -1.163.938.333 14.82 0.86 ml 155 0.19 ci37343744 2015-03-20T18:48:28.530Z 14km N of Borrego Springs, California earthquake
2015-03-20T09:29:51.010Z 388.253.333 -122.799 3.61 1.34 md 34 0.04 nc72414355 2015-03-20T21:54:36.160Z 6km W of Cobb, California earthquake
2015-03-20T09:07:17.330Z 334.706.667 -1.165.705 9.16 1.15 ml 66 0.13 ci37343736 2015-03-20T18:44:22.450Z 13km SE of Anza, California earthquake
2015-03-20T09:01:05.960Z 387.565.002 -1.227.163.315 2.13 0.94 md 99 0.04 nc72414350 2015-03-20T09:24:04.115Z 4km ESE of The Geysers, California earthquake
2015-03-20T08:59:51.830Z 335.945 -1.168.203.333 9.58 0.16 ml 162 0.1 ci37343728 2015-03-20T18:33:22.868Z 14km WNW of Anza, California earthquake
2015-03-20T08:48:18.720Z 388.243.332 -1.227.813.339 1.76 0.79 md 54 0.02 nc72414340 2015-03-20T11:30:06.342Z 5km W of Cobb, California earthquake
2015-03-20T08:39:15.500Z 340.143.333 -1.175.808.333 8.69 0.88 ml 73 0.17 ci37343720 2015-03-20T18:30:18.224Z 6km SE of Ontario, California earthquake
2015-03-20T08:32:08.130Z 335.095 -1.165.625 15 0.63 ml 77 0.12 ci37343712 2015-03-20T18:19:38.390Z 12km ESE of Anza, California earthquake
2015-03-20T08:22:36.790Z 330.338.333 -1.164.518.333 9.74 0.66 ml 79 0.15 ci37343704 2015-03-20T18:15:47.994Z 15km ESE of Julian, California earthquake
2015-03-20T07:52:24.480Z 388.176.667 -1.228.166.667 2.92 0.34 md 75 0.04 nc72414300 2015-03-20T17:23:05.026Z 6km NW of The Geysers, California earthquake
2015-03-20T07:44:23.500Z 336.753.333 -116.709 17.59 0.97 ml 56 0.13 ci37343696 2015-03-20T18:05:52.970Z 7km S of Idyllwild, California earthquake
2015-03-20T07:41:52.893Z 400.855 -1.196.634 141.154 1.13 ml 127.62 1.581 nn00487493 2015-03-20T09:26:45.777Z 48km N of Spanish Springs, Nevada earthquake
2015-03-20T07:33:03.150Z 376.083.333 -1.190.198.333 10.33 0.46 md 113 0.03 nc72414290 2015-03-20T16:46:32.070Z 6km SW of Mammoth Lakes, California earthquake
2015-03-20T07:32:37.790Z 388.381.653 -122.783.165 2.25 0.37 md 109 0.01 nc72414285 2015-03-20T10:14:04.200Z 5km WNW of Cobb, California earthquake
2015-03-20T06:36:09.070Z 335.046.667 -1.164.923.333 15.99 0.52 ml 99 0.11 ci37343672 2015-03-20T17:37:44.826Z 18km ESE of Anza, California earthquake
2015-03-20T06:09:21.250Z 334.555 -1.165.983.333 9.78 0.46 ml 121 0.13 ci37343656 2015-03-20T17:25:03.775Z 13km SSE of Anza, California earthquake
2015-03-20T05:38:53.390Z 334.738.333 -116.567 8.89 0.37 ml 106 0.1 ci37343648 2015-03-20T16:58:23.984Z 13km SE of Anza, California earthquake
2015-03-20T05:05:24.720Z 333.811.667 -1.163.921.667 14.76 1.23 ml 89 0.16 ci37343640 2015-03-20T16:29:00.580Z 14km N of Borrego Springs, California earthquake
2015-03-20T04:47:29.730Z 360.093.346 -1.205.748.367 3.64 1.53 md 105 0.04 nc72414225 2015-03-20T07:56:04.956Z 24km SW of Coalinga, California earthquake
2015-03-20T04:45:17.690Z 388.101.654 -122.814.003 2.62 0.55 md 97 0.02 nc72414220 2015-03-20T07:29:04.922Z 6km NW of The Geysers, California earthquake
2015-03-20T04:31:03.160Z 388.323.326 -1.228.098.297 1.44 0.43 md 93 0.02 nc72414200 2015-03-20T07:04:04.876Z 7km W of Cobb, California earthquake
2015-03-20T04:26:13.560Z 36.035 -117.777 2.22 1.14 ml 66 0.14 ci37343624 2015-03-20T16:12:39.424Z 15km E of Coso Junction, California earthquake
2015-03-20T04:10:22.500Z 19.24 -155.116 40.5 2 Md 226.8 0.1 hv60876181 2015-03-20T21:08:47.226Z 24km SSE of Volcano, Hawaii earthquake
2015-03-20T03:43:53.340Z 388.419.991 -1.228.771.667 2.84 1.33 md 90 0.03 nc72414175 2015-03-20T06:38:05.836Z 12km ENE of Cloverdale, California earthquake
2015-03-20T03:28:02.760Z 365.473.328 -121.100.502 8.92 1.55 md 94 0.03 nc72414165 2015-03-20T06:13:05.800Z 24km NE of Soledad, California earthquake
2015-03-20T03:18:27.910Z 335.255 -1.167.376.667 4.71 0.47 ml 93 0.11 ci37343592 2015-03-20T16:05:16.345Z 7km WSW of Anza, California earthquake
2015-03-20T02:25:51.060Z -201.243 1.680.489 10 5 mb 67 0.77 us10001p24 2015-03-20T10:28:35.467Z 119km NE of We, New Caledonia earthquake
2015-03-20T02:21:19.310Z 388.371.658 -1.227.911.682 2.54 0.54 md 84 0.04 nc72414150 2015-03-20T02:36:05.345Z 6km WNW of Cobb, California earthquake
2015-03-20T01:20:11.800Z 371.065 -1.198.216.667 3.13 1.78 md 140 0.12 nc72414145 2015-03-20T20:24:04.472Z 10km SSW of Yosemite Lakes, California earthquake
2015-03-20T01:04:08.210Z 337.233.333 -1.167.746.667 18.64 0.65 ml 112 0.13 ci37343504 2015-03-20T15:39:11.239Z 6km WSW of Idyllwild, California earthquake
2015-03-20T00:42:30.200Z 387.963.333 -12.273.983 2.35 0.37 md 89 0.01 nc72414140 2015-03-20T01:21:07.177Z 2km NE of The Geysers, California earthquake
2015-03-20T00:32:27.880Z 333.895 -1.169.705 7 0.88 ml 48 0.19 ci37343488 2015-03-20T15:31:33.232Z 10km ENE of Pala, California earthquake
2015-03-20T00:16:49.680Z 388.071.671 -1.228.225.021 2.51 0.76 md 117 0.03 nc72414130 2015-03-20T01:07:05.003Z 6km WNW of The Geysers, California earthquake
2015-03-20T00:14:22.183Z 382.308 -1.183.833 6.848 1.22 ml 182.3 1.267 nn00487447 2015-03-20T19:16:49.170Z 38km SSE of Hawthorne, Nevada earthquake
2015-03-19T23:55:31.755Z 419.162 -1.195.547 4.335 2.21 ml 124.2 2.063 nn00487442 2015-03-20T19:51:21.610Z 73km ESE of Lakeview, Oregon earthquake
2015-03-19T23:45:14.640Z 35.753 -1.179.858.333 3.18 0.84 ml 48 0.14 ci37343472 2015-03-19T23:57:44.385Z 20km NW of Inyokern, California earthquake
2015-03-19T23:30:25.520Z 46.852 -1.217.568.333 4.56 0.33 md 120 0.06 uw60986516 2015-03-20T19:37:26.240Z 28km NNW of Packwood, Washington earthquake
2015-03-19T23:09:36.230Z 401.541.667 -1.227.525 13.38 1.72 md 51 0.19 nc72414120 2015-03-20T18:13:04.127Z 33km WNW of Rancho Tehama Reserve, California earthquake
2015-03-19T23:01:21.130Z 416.213.333 -1.123.928.333 5.59 0.9 md 113 0.13 uu60104997 2015-03-20T16:03:14.450Z 21km WSW of Tremonton, Utah earthquake
2015-03-19T22:35:50.090Z 366.133.333 -1.211.381.667 7.48 1.26 md 64 0.1 nc72414070 2015-03-20T09:49:05.154Z 26km NE of Soledad, California earthquake
2015-03-19T22:31:47.530Z 32.63 -1.169.546.667 0.01 1.34 ml 198 0.18 ci37343400 2015-03-19T22:46:05.417Z 8km ESE of Bonita, California quarry blast
2015-03-19T22:09:38.390Z 446.088.333 -1.106.506.667 2.97 1.39 ml 110 0.18 uu60104987 2015-03-20T15:57:29.570Z 21km NE of Old Faithful Geyser, Wyoming earthquake
2015-03-19T22:09:19.140Z 388.048.325 -1.227.710.037 2.84 0.52 md 112 0.05 nc72414055 2015-03-19T22:29:04.805Z 3km NNW of The Geysers, California earthquake
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment