Skip to content

Instantly share code, notes, and snippets.

@fabiovalse

fabiovalse/README.md

Last active October 19, 2017 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fabiovalse/834d52e8510f950ffb9f4dc431d3b768 to your computer and use it in GitHub Desktop.
Save fabiovalse/834d52e8510f950ffb9f4dc431d3b768 to your computer and use it in GitHub Desktop.
Download ZIP
CicloPI stacked bar chart
Raw
README.md

This stacked bar chart shows the bike availability data of one CicloPI station. On the x-axis hour slots are displyed. On the y-axis the values of free bikes (green), empty (gray) and unavailable slots (red) are represented with stacked bars. The values of the three category has been computed as a weighted sum.

Suppose that, in a given slot (e.g., 8AM to 9AM), 12 bikes were free for 20 minutes and then 13 bikes were free for the other 40 minutes, the overall value of free bikes has been calculated as (12*20min + 13*40min) / 60 min = 12.66 bikes.

Moreovere, in order to experiment transitions between two set of data, related to different days, a switch button has been added on the top right.

(Due to rounding problems the second set of data presents two stacked bars that do not reach the top line value of 14)

Raw
data_1.json
[{"hour":0,"bin":[{"doc":{"_key":"614328","_id":"CicloPI_history/614328","_rev":"_VkNzPti---","empty_slots":11,"_start":"2017-09-08T23:30:56.443Z","free_bikes":3,"_end":"2017-09-09T00:06:12.097Z","unavailable_slots":0},"duration":372},{"doc":{"_key":"615001","_id":"CicloPI_history/615001","_rev":"_VkN6_2y---","_start":"2017-09-09T00:06:12.097Z","unavailable_slots":0,"_end":"2017-09-09T00:13:34.616Z","empty_slots":10,"free_bikes":4},"duration":443},{"doc":{"_key":"615981","_id":"CicloPI_history/615981","_rev":"_VkOFA8e---","free_bikes":5,"_end":"2017-09-09T00:25:36.618Z","unavailable_slots":0,"_start":"2017-09-09T00:13:34.616Z","empty_slots":9},"duration":722},{"doc":{"_key":"616024","_id":"CicloPI_history/616024","_rev":"_VkOFfKe---","empty_slots":8,"free_bikes":6,"unavailable_slots":0,"_end":"2017-09-09T00:26:07.577Z","_start":"2017-09-09T00:25:36.618Z"},"duration":31},{"doc":{"_key":"620092","_id":"CicloPI_history/620092","_rev":"_VkOuTqq---","unavailable_slots":0,"_start":"2017-09-09T00:26:07.577Z","empty_slots":7,"_end":"2017-09-09T01:10:42.771Z","free_bikes":7},"duration":2032}]},{"hour":1,"bin":[{"doc":{"_key":"620092","_id":"CicloPI_history/620092","_rev":"_VkOuTqq---","unavailable_slots":0,"_start":"2017-09-09T00:26:07.577Z","empty_slots":7,"_end":"2017-09-09T01:10:42.771Z","free_bikes":7},"duration":643},{"doc":{"_key":"622079","_id":"CicloPI_history/622079","_rev":"_VkPCPmm---","free_bikes":8,"empty_slots":6,"unavailable_slots":0,"_start":"2017-09-09T01:10:42.771Z","_end":"2017-09-09T01:32:29.349Z"},"duration":1306},{"doc":{"_key":"624279","_id":"CicloPI_history/624279","_rev":"_VkPZBEq---","free_bikes":9,"_end":"2017-09-09T01:57:21.776Z","empty_slots":5,"unavailable_slots":0,"_start":"2017-09-09T01:32:29.349Z"},"duration":1493},{"doc":{"_key":"624928","_id":"CicloPI_history/624928","_rev":"_VkPfZ9C---","unavailable_slots":0,"empty_slots":4,"_end":"2017-09-09T02:04:20.465Z","_start":"2017-09-09T01:57:21.776Z","free_bikes":10},"duration":158}]},{"hour":2,"bin":[{"doc":{"_key":"624928","_id":"CicloPI_history/624928","_rev":"_VkPfZ9C---","unavailable_slots":0,"empty_slots":4,"_end":"2017-09-09T02:04:20.465Z","_start":"2017-09-09T01:57:21.776Z","free_bikes":10},"duration":260},{"doc":{"_key":"626058","_id":"CicloPI_history/626058","_rev":"_VkPp5Fe---","empty_slots":3,"unavailable_slots":0,"_start":"2017-09-09T02:04:20.465Z","free_bikes":11,"_end":"2017-09-09T02:15:47.712Z"},"duration":688},{"doc":{"_key":"643055","_id":"CicloPI_history/643055","_rev":"_VkSWABS---","empty_slots":2,"unavailable_slots":0,"free_bikes":12,"_start":"2017-09-09T02:15:47.712Z","_end":"2017-09-09T05:23:47.010Z"},"duration":2652}]},{"hour":3,"bin":[{"doc":{"_key":"643055","_id":"CicloPI_history/643055","_rev":"_VkSWABS---","empty_slots":2,"unavailable_slots":0,"free_bikes":12,"_start":"2017-09-09T02:15:47.712Z","_end":"2017-09-09T05:23:47.010Z"},"duration":3600}]},{"hour":4,"bin":[{"doc":{"_key":"643055","_id":"CicloPI_history/643055","_rev":"_VkSWABS---","empty_slots":2,"unavailable_slots":0,"free_bikes":12,"_start":"2017-09-09T02:15:47.712Z","_end":"2017-09-09T05:23:47.010Z"},"duration":3600}]},{"hour":5,"bin":[{"doc":{"_key":"643055","_id":"CicloPI_history/643055","_rev":"_VkSWABS---","empty_slots":2,"unavailable_slots":0,"free_bikes":12,"_start":"2017-09-09T02:15:47.712Z","_end":"2017-09-09T05:23:47.010Z"},"duration":1427},{"doc":{"_key":"646564","_id":"CicloPI_history/646564","_rev":"_VkS52E6---","_start":"2017-09-09T05:23:47.010Z","unavailable_slots":0,"_end":"2017-09-09T06:02:56.123Z","empty_slots":1,"free_bikes":13},"duration":2173}]},{"hour":6,"bin":[{"doc":{"_key":"646564","_id":"CicloPI_history/646564","_rev":"_VkS52E6---","_start":"2017-09-09T05:23:47.010Z","unavailable_slots":0,"_end":"2017-09-09T06:02:56.123Z","empty_slots":1,"free_bikes":13},"duration":176},{"doc":{"_key":"650297","_id":"CicloPI_history/650297","_rev":"_VkTeVwu---","free_bikes":12,"unavailable_slots":0,"_start":"2017-09-09T06:02:56.123Z","_end":"2017-09-09T06:42:47.861Z","empty_slots":2},"duration":2392},{"doc":{"_key":"653792","_id":"CicloPI_history/653792","_rev":"_VkUCBHu---","empty_slots":3,"_end":"2017-09-09T07:21:46.015Z","unavailable_slots":0,"free_bikes":11,"_start":"2017-09-09T06:42:47.861Z"},"duration":1032}]},{"hour":7,"bin":[{"doc":{"_key":"653792","_id":"CicloPI_history/653792","_rev":"_VkUCBHu---","empty_slots":3,"_end":"2017-09-09T07:21:46.015Z","unavailable_slots":0,"free_bikes":11,"_start":"2017-09-09T06:42:47.861Z"},"duration":1306},{"doc":{"_key":"654443","_id":"CicloPI_history/654443","_rev":"_VkUIL9y---","free_bikes":10,"_end":"2017-09-09T07:28:30.434Z","empty_slots":4,"_start":"2017-09-09T07:21:46.015Z","unavailable_slots":0},"duration":404},{"doc":{"_key":"660836","_id":"CicloPI_history/660836","_rev":"_VkVKHQq---","free_bikes":9,"_end":"2017-09-09T08:40:30.893Z","empty_slots":5,"_start":"2017-09-09T07:28:30.434Z","unavailable_slots":0},"duration":1890}]},{"hour":8,"bin":[{"doc":{"_key":"660836","_id":"CicloPI_history/660836","_rev":"_VkVKHQq---","free_bikes":9,"_end":"2017-09-09T08:40:30.893Z","empty_slots":5,"_start":"2017-09-09T07:28:30.434Z","unavailable_slots":0},"duration":2431},{"doc":{"_key":"662139","_id":"CicloPI_history/662139","_rev":"_VkVW9ra---","unavailable_slots":0,"empty_slots":6,"free_bikes":8,"_start":"2017-09-09T08:40:30.893Z","_end":"2017-09-09T08:54:33.070Z"},"duration":842},{"doc":{"_key":"670443","_id":"CicloPI_history/670443","_rev":"_VkWsAqW---","unavailable_slots":0,"free_bikes":7,"_start":"2017-09-09T08:54:33.070Z","_end":"2017-09-09T10:27:26.650Z","empty_slots":7},"duration":327}]},{"hour":9,"bin":[{"doc":{"_key":"670443","_id":"CicloPI_history/670443","_rev":"_VkWsAqW---","unavailable_slots":0,"free_bikes":7,"_start":"2017-09-09T08:54:33.070Z","_end":"2017-09-09T10:27:26.650Z","empty_slots":7},"duration":3600}]},{"hour":10,"bin":[{"doc":{"_key":"670443","_id":"CicloPI_history/670443","_rev":"_VkWsAqW---","unavailable_slots":0,"free_bikes":7,"_start":"2017-09-09T08:54:33.070Z","_end":"2017-09-09T10:27:26.650Z","empty_slots":7},"duration":1647},{"doc":{"_key":"671075","_id":"CicloPI_history/671075","_rev":"_VkWyOMe---","unavailable_slots":0,"_start":"2017-09-09T10:27:26.650Z","empty_slots":6,"free_bikes":8,"_end":"2017-09-09T10:34:13.712Z"},"duration":407},{"doc":{"_key":"671541","_id":"CicloPI_history/671541","_rev":"_VkW2CMm---","_start":"2017-09-09T10:34:13.712Z","unavailable_slots":0,"_end":"2017-09-09T10:38:23.625Z","free_bikes":9,"empty_slots":5},"duration":250},{"doc":{"_key":"671659","_id":"CicloPI_history/671659","_rev":"_VkW3ddW---","_end":"2017-09-09T10:39:57.142Z","empty_slots":3,"_start":"2017-09-09T10:38:23.625Z","free_bikes":11,"unavailable_slots":0},"duration":93},{"doc":{"_key":"673460","_id":"CicloPI_history/673460","_rev":"_VkXIkoa---","free_bikes":10,"_end":"2017-09-09T10:58:38.482Z","unavailable_slots":0,"_start":"2017-09-09T10:39:57.142Z","empty_slots":4},"duration":1121},{"doc":{"_key":"673743","_id":"CicloPI_history/673743","_rev":"_VkXMX0O---","empty_slots":2,"_end":"2017-09-09T11:02:47.540Z","_start":"2017-09-09T10:58:38.482Z","unavailable_slots":0,"free_bikes":12},"duration":82}]},{"hour":11,"bin":[{"doc":{"_key":"673743","_id":"CicloPI_history/673743","_rev":"_VkXMX0O---","empty_slots":2,"_end":"2017-09-09T11:02:47.540Z","_start":"2017-09-09T10:58:38.482Z","unavailable_slots":0,"free_bikes":12},"duration":168},{"doc":{"_key":"674803","_id":"CicloPI_history/674803","_rev":"_VkXV4VC---","free_bikes":13,"unavailable_slots":0,"_start":"2017-09-09T11:02:47.540Z","empty_slots":1,"_end":"2017-09-09T11:13:10.650Z"},"duration":623},{"doc":{"_key":"675086","_id":"CicloPI_history/675086","_rev":"_VkXZrUy---","_start":"2017-09-09T11:13:10.650Z","free_bikes":12,"empty_slots":2,"_end":"2017-09-09T11:17:19.479Z","unavailable_slots":0},"duration":248},{"doc":{"_key":"676146","_id":"CicloPI_history/676146","_rev":"_VkXjK6W---","empty_slots":3,"_start":"2017-09-09T11:17:19.479Z","_end":"2017-09-09T11:27:41.652Z","unavailable_slots":0,"free_bikes":11},"duration":623},{"doc":{"_key":"676330","_id":"CicloPI_history/676330","_rev":"_VkXljym---","free_bikes":12,"_end":"2017-09-09T11:30:18.276Z","unavailable_slots":0,"_start":"2017-09-09T11:27:41.652Z","empty_slots":2},"duration":156},{"doc":{"_key":"677598","_id":"CicloPI_history/677598","_rev":"_VkXx64S---","empty_slots":3,"_end":"2017-09-09T11:43:48.274Z","_start":"2017-09-09T11:30:18.276Z","free_bikes":11,"unavailable_slots":0},"duration":810},{"doc":{"_key":"679265","_id":"CicloPI_history/679265","_rev":"_VkYEAcO---","_end":"2017-09-09T12:03:33.619Z","free_bikes":9,"_start":"2017-09-09T11:43:48.274Z","unavailable_slots":0,"empty_slots":5},"duration":972}]},{"hour":12,"bin":[{"doc":{"_key":"679265","_id":"CicloPI_history/679265","_rev":"_VkYEAcO---","_end":"2017-09-09T12:03:33.619Z","free_bikes":9,"_start":"2017-09-09T11:43:48.274Z","unavailable_slots":0,"empty_slots":5},"duration":214},{"doc":{"_key":"679617","_id":"CicloPI_history/679617","_rev":"_VkYGMMe---","_start":"2017-09-09T12:03:33.619Z","free_bikes":8,"_end":"2017-09-09T12:05:56.715Z","unavailable_slots":0,"empty_slots":6},"duration":143},{"doc":{"_key":"681170","_id":"CicloPI_history/681170","_rev":"_VkYXFmG---","free_bikes":7,"empty_slots":7,"unavailable_slots":0,"_end":"2017-09-09T12:24:24.054Z","_start":"2017-09-09T12:05:56.715Z"},"duration":1107},{"doc":{"_key":"683151","_id":"CicloPI_history/683151","_rev":"_VkYqkYm---","empty_slots":8,"free_bikes":6,"unavailable_slots":0,"_end":"2017-09-09T12:45:40.791Z","_start":"2017-09-09T12:24:24.054Z"},"duration":1277},{"doc":{"_key":"684324","_id":"CicloPI_history/684324","_rev":"_VkY1i_K---","empty_slots":9,"unavailable_slots":0,"free_bikes":5,"_end":"2017-09-09T12:57:39.227Z","_start":"2017-09-09T12:45:40.791Z"},"duration":718},{"doc":{"_key":"687951","_id":"CicloPI_history/687951","_rev":"_VkZbHgm---","empty_slots":8,"free_bikes":6,"unavailable_slots":0,"_end":"2017-09-09T13:38:42.481Z","_start":"2017-09-09T12:57:39.227Z"},"duration":141}]},{"hour":13,"bin":[{"doc":{"_key":"687951","_id":"CicloPI_history/687951","_rev":"_VkZbHgm---","empty_slots":8,"free_bikes":6,"unavailable_slots":0,"_end":"2017-09-09T13:38:42.481Z","_start":"2017-09-09T12:57:39.227Z"},"duration":2322},{"doc":{"_key":"690000","_id":"CicloPI_history/690000","_rev":"_VkZvpha---","unavailable_slots":0,"empty_slots":9,"free_bikes":5,"_start":"2017-09-09T13:38:42.481Z","_end":"2017-09-09T14:01:08.038Z"},"duration":1278}]},{"hour":14,"bin":[{"doc":{"_key":"690000","_id":"CicloPI_history/690000","_rev":"_VkZvpha---","unavailable_slots":0,"empty_slots":9,"free_bikes":5,"_start":"2017-09-09T13:38:42.481Z","_end":"2017-09-09T14:01:08.038Z"},"duration":68},{"doc":{"_key":"698571","_id":"CicloPI_history/698571","_rev":"_VkbF4mi---","_start":"2017-09-09T14:01:08.038Z","free_bikes":6,"empty_slots":8,"_end":"2017-09-09T15:35:19.570Z","unavailable_slots":0},"duration":3532}]},{"hour":15,"bin":[{"doc":{"_key":"698571","_id":"CicloPI_history/698571","_rev":"_VkbF4mi---","_start":"2017-09-09T14:01:08.038Z","free_bikes":6,"empty_slots":8,"_end":"2017-09-09T15:35:19.570Z","unavailable_slots":0},"duration":2120},{"doc":{"_key":"700103","_id":"CicloPI_history/700103","_rev":"_VkbWCOu---","_start":"2017-09-09T15:35:19.570Z","_end":"2017-09-09T15:52:58.006Z","free_bikes":7,"unavailable_slots":0,"empty_slots":7},"duration":1058},{"doc":{"_key":"701968","_id":"CicloPI_history/701968","_rev":"_VkboZrW---","unavailable_slots":0,"_start":"2017-09-09T15:52:58.006Z","empty_slots":6,"_end":"2017-09-09T16:13:01.679Z","free_bikes":8},"duration":422}]},{"hour":16,"bin":[{"doc":{"_key":"701968","_id":"CicloPI_history/701968","_rev":"_VkboZrW---","unavailable_slots":0,"_start":"2017-09-09T15:52:58.006Z","empty_slots":6,"_end":"2017-09-09T16:13:01.679Z","free_bikes":8},"duration":782},{"doc":{"_key":"702349","_id":"CicloPI_history/702349","_rev":"_Vkbtkw2---","free_bikes":7,"unavailable_slots":0,"_end":"2017-09-09T16:18:40.696Z","empty_slots":7,"_start":"2017-09-09T16:13:01.679Z"},"duration":339},{"doc":{"_key":"703481","_id":"CicloPI_history/703481","_rev":"_Vkb4CMy---","free_bikes":8,"_start":"2017-09-09T16:18:40.696Z","_end":"2017-09-09T16:30:06.203Z","empty_slots":6,"unavailable_slots":0},"duration":685},{"doc":{"_key":"705610","_id":"CicloPI_history/705610","_rev":"_VkcN2oy---","unavailable_slots":0,"empty_slots":5,"_start":"2017-09-09T16:30:06.203Z","free_bikes":9,"_end":"2017-09-09T16:53:56.161Z"},"duration":1430},{"doc":{"_key":"706779","_id":"CicloPI_history/706779","_rev":"_VkcYyGi---","unavailable_slots":0,"free_bikes":8,"_end":"2017-09-09T17:05:52.406Z","_start":"2017-09-09T16:53:56.161Z","empty_slots":6},"duration":364}]},{"hour":17,"bin":[{"doc":{"_key":"706779","_id":"CicloPI_history/706779","_rev":"_VkcYyGi---","unavailable_slots":0,"free_bikes":8,"_end":"2017-09-09T17:05:52.406Z","_start":"2017-09-09T16:53:56.161Z","empty_slots":6},"duration":352},{"doc":{"_key":"708787","_id":"CicloPI_history/708787","_rev":"_Vkcswv6---","_start":"2017-09-09T17:05:52.406Z","empty_slots":7,"unavailable_slots":0,"_end":"2017-09-09T17:27:41.734Z","free_bikes":7},"duration":1310},{"doc":{"_key":"709268","_id":"CicloPI_history/709268","_rev":"_VkczZ2G---","free_bikes":8,"empty_slots":6,"_end":"2017-09-09T17:34:56.959Z","_start":"2017-09-09T17:27:41.734Z","unavailable_slots":0},"duration":435},{"doc":{"_key":"709495","_id":"CicloPI_history/709495","_rev":"_Vkcz4Ni---","_end":"2017-09-09T17:35:28.130Z","_start":"2017-09-09T17:34:56.959Z","empty_slots":7,"unavailable_slots":0,"free_bikes":7},"duration":31},{"doc":{"_key":"710447","_id":"CicloPI_history/710447","_rev":"_Vkd-VDa---","empty_slots":8,"_end":"2017-09-09T17:46:53.027Z","_start":"2017-09-09T17:35:28.130Z","free_bikes":6,"unavailable_slots":0},"duration":685},{"doc":{"_key":"710655","_id":"CicloPI_history/710655","_rev":"_VkdBLbK---","empty_slots":7,"free_bikes":7,"_end":"2017-09-09T17:49:59.770Z","unavailable_slots":0,"_start":"2017-09-09T17:46:53.027Z"},"duration":187},{"doc":{"_key":"711269","_id":"CicloPI_history/711269","_rev":"_VkdG4ve---","empty_slots":6,"_start":"2017-09-09T17:49:59.770Z","_end":"2017-09-09T17:56:13.957Z","free_bikes":8,"unavailable_slots":0},"duration":374},{"doc":{"_key":"711801","_id":"CicloPI_history/711801","_rev":"_VkdLoxW---","_end":"2017-09-09T18:01:25.066Z","empty_slots":7,"free_bikes":7,"unavailable_slots":0,"_start":"2017-09-09T17:56:13.957Z"},"duration":226}]},{"hour":18,"bin":[{"doc":{"_key":"711801","_id":"CicloPI_history/711801","_rev":"_VkdLoxW---","_end":"2017-09-09T18:01:25.066Z","empty_slots":7,"free_bikes":7,"unavailable_slots":0,"_start":"2017-09-09T17:56:13.957Z"},"duration":85},{"doc":{"_key":"711886","_id":"CicloPI_history/711886","_rev":"_VkdMv02---","unavailable_slots":0,"_start":"2017-09-09T18:01:25.066Z","empty_slots":8,"_end":"2017-09-09T18:02:37.944Z","free_bikes":6},"duration":73},{"doc":{"_key":"712313","_id":"CicloPI_history/712313","_rev":"_VkdQBqC---","free_bikes":7,"unavailable_slots":0,"empty_slots":7,"_start":"2017-09-09T18:02:37.944Z","_end":"2017-09-09T18:06:12.812Z"},"duration":215},{"doc":{"_key":"713145","_id":"CicloPI_history/713145","_rev":"_VkdZB4e---","_end":"2017-09-09T18:16:02.871Z","empty_slots":8,"free_bikes":6,"_start":"2017-09-09T18:06:12.812Z","unavailable_slots":0},"duration":590},{"doc":{"_key":"713296","_id":"CicloPI_history/713296","_rev":"_Vkdb_dK---","_start":"2017-09-09T18:16:02.871Z","_end":"2017-09-09T18:18:11.434Z","unavailable_slots":0,"free_bikes":5,"empty_slots":9},"duration":128},{"doc":{"_key":"715082","_id":"CicloPI_history/715082","_rev":"_VkdsKiu---","_start":"2017-09-09T18:18:11.434Z","free_bikes":6,"_end":"2017-09-09T18:36:56.928Z","empty_slots":8,"unavailable_slots":0},"duration":1126},{"doc":{"_key":"715125","_id":"CicloPI_history/715125","_rev":"_VkdspM6---","empty_slots":9,"_end":"2017-09-09T18:37:28.315Z","_start":"2017-09-09T18:36:56.928Z","unavailable_slots":0,"free_bikes":5},"duration":31},{"doc":{"_key":"715771","_id":"CicloPI_history/715771","_rev":"_Vkdy0H----","free_bikes":4,"empty_slots":10,"_end":"2017-09-09T18:44:12.726Z","_start":"2017-09-09T18:37:28.315Z","unavailable_slots":0},"duration":405},{"doc":{"_key":"717072","_id":"CicloPI_history/717072","_rev":"_Vke_o86---","empty_slots":11,"_end":"2017-09-09T18:58:13.244Z","free_bikes":3,"unavailable_slots":0,"_start":"2017-09-09T18:44:12.726Z"},"duration":840},{"doc":{"_key":"717454","_id":"CicloPI_history/717454","_rev":"_VkeE2nq---","_start":"2017-09-09T18:58:13.244Z","free_bikes":4,"empty_slots":10,"unavailable_slots":0,"_end":"2017-09-09T19:03:54.922Z"},"duration":107}]},{"hour":19,"bin":[{"doc":{"_key":"717454","_id":"CicloPI_history/717454","_rev":"_VkeE2nq---","_start":"2017-09-09T18:58:13.244Z","free_bikes":4,"empty_slots":10,"unavailable_slots":0,"_end":"2017-09-09T19:03:54.922Z"},"duration":235},{"doc":{"_key":"737138","_id":"CicloPI_history/737138","_rev":"_VkhMY-S---","_start":"2017-09-09T19:03:54.922Z","_end":"2017-09-09T22:41:50.733Z","unavailable_slots":1,"free_bikes":3,"empty_slots":10},"duration":3365}]},{"hour":20,"bin":[{"doc":{"_key":"737138","_id":"CicloPI_history/737138","_rev":"_VkhMY-S---","_start":"2017-09-09T19:03:54.922Z","_end":"2017-09-09T22:41:50.733Z","unavailable_slots":1,"free_bikes":3,"empty_slots":10},"duration":3600}]},{"hour":21,"bin":[{"doc":{"_key":"737138","_id":"CicloPI_history/737138","_rev":"_VkhMY-S---","_start":"2017-09-09T19:03:54.922Z","_end":"2017-09-09T22:41:50.733Z","unavailable_slots":1,"free_bikes":3,"empty_slots":10},"duration":3600}]},{"hour":22,"bin":[{"doc":{"_key":"737138","_id":"CicloPI_history/737138","_rev":"_VkhMY-S---","_start":"2017-09-09T19:03:54.922Z","_end":"2017-09-09T22:41:50.733Z","unavailable_slots":1,"free_bikes":3,"empty_slots":10},"duration":2511},{"doc":{"_key":"738333","_id":"CicloPI_history/738333","_rev":"_VkhXwyq---","free_bikes":4,"_end":"2017-09-09T22:54:17.045Z","unavailable_slots":1,"_start":"2017-09-09T22:41:50.733Z","empty_slots":9},"duration":746},{"doc":{"_key":"742220","_id":"CicloPI_history/742220","_rev":"_Vki-Ocy---","free_bikes":3,"_end":"2017-09-09T23:36:17.783Z","_start":"2017-09-09T22:54:17.045Z","unavailable_slots":1,"empty_slots":10},"duration":343}]},{"hour":23,"bin":[{"doc":{"_key":"742220","_id":"CicloPI_history/742220","_rev":"_Vki-Ocy---","free_bikes":3,"_end":"2017-09-09T23:36:17.783Z","_start":"2017-09-09T22:54:17.045Z","unavailable_slots":1,"empty_slots":10},"duration":2178},{"doc":{"_key":"743164","_id":"CicloPI_history/743164","_rev":"_VkiItgC---","_start":"2017-09-09T23:36:17.783Z","empty_slots":9,"free_bikes":4,"unavailable_slots":1,"_end":"2017-09-09T23:47:44.943Z"},"duration":687},{"doc":{"_key":"749266","_id":"CicloPI_history/749266","_rev":"_VkjGgTe---","empty_slots":10,"unavailable_slots":1,"free_bikes":3,"_end":"2017-09-10T00:55:14.651Z","_start":"2017-09-09T23:47:44.943Z"},"duration":735}]}]
Raw
data_2.json
[{"hour":0,"bin":[{"doc":{"_key":"749266","_id":"CicloPI_history/749266","_rev":"_VkjGgTe---","empty_slots":10,"unavailable_slots":1,"free_bikes":3,"_end":"2017-09-10T00:55:14.651Z","_start":"2017-09-09T23:47:44.943Z"},"duration":3315},{"doc":{"_key":"752777","_id":"CicloPI_history/752777","_rev":"_VkjqHie---","_start":"2017-09-10T00:55:14.651Z","unavailable_slots":1,"free_bikes":4,"_end":"2017-09-10T01:34:08.592Z","empty_slots":9},"duration":285}]},{"hour":1,"bin":[{"doc":{"_key":"752777","_id":"CicloPI_history/752777","_rev":"_VkjqHie---","_start":"2017-09-10T00:55:14.651Z","unavailable_slots":1,"free_bikes":4,"_end":"2017-09-10T01:34:08.592Z","empty_slots":9},"duration":2049},{"doc":{"_key":"757998","_id":"CicloPI_history/757998","_rev":"_VkkeCzu---","empty_slots":10,"_start":"2017-09-10T01:34:08.592Z","unavailable_slots":0,"free_bikes":4,"_end":"2017-09-10T02:30:51.625Z"},"duration":1551}]},{"hour":2,"bin":[{"doc":{"_key":"757998","_id":"CicloPI_history/757998","_rev":"_VkkeCzu---","empty_slots":10,"_start":"2017-09-10T01:34:08.592Z","unavailable_slots":0,"free_bikes":4,"_end":"2017-09-10T02:30:51.625Z"},"duration":1852},{"doc":{"_key":"771531","_id":"CicloPI_history/771531","_rev":"_VkmnDYy---","empty_slots":9,"_end":"2017-09-10T05:00:30.626Z","_start":"2017-09-10T02:30:51.625Z","unavailable_slots":0,"free_bikes":5},"duration":1748}]},{"hour":3,"bin":[{"doc":{"_key":"771531","_id":"CicloPI_history/771531","_rev":"_VkmnDYy---","empty_slots":9,"_end":"2017-09-10T05:00:30.626Z","_start":"2017-09-10T02:30:51.625Z","unavailable_slots":0,"free_bikes":5},"duration":3600}]},{"hour":4,"bin":[{"doc":{"_key":"771531","_id":"CicloPI_history/771531","_rev":"_VkmnDYy---","empty_slots":9,"_end":"2017-09-10T05:00:30.626Z","_start":"2017-09-10T02:30:51.625Z","unavailable_slots":0,"free_bikes":5},"duration":3600}]},{"hour":5,"bin":[{"doc":{"_key":"771531","_id":"CicloPI_history/771531","_rev":"_VkmnDYy---","empty_slots":9,"_end":"2017-09-10T05:00:30.626Z","_start":"2017-09-10T02:30:51.625Z","unavailable_slots":0,"free_bikes":5},"duration":31},{"doc":{"_key":"791016","_id":"CicloPI_history/791016","_rev":"_VkpsXBa---","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T08:36:01.344Z","_start":"2017-09-10T05:00:30.626Z","unavailable_slots":0},"duration":3569}]},{"hour":6,"bin":[{"doc":{"_key":"791016","_id":"CicloPI_history/791016","_rev":"_VkpsXBa---","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T08:36:01.344Z","_start":"2017-09-10T05:00:30.626Z","unavailable_slots":0},"duration":3600}]},{"hour":7,"bin":[{"doc":{"_key":"791016","_id":"CicloPI_history/791016","_rev":"_VkpsXBa---","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T08:36:01.344Z","_start":"2017-09-10T05:00:30.626Z","unavailable_slots":0},"duration":3600}]},{"hour":8,"bin":[{"doc":{"_key":"791016","_id":"CicloPI_history/791016","_rev":"_VkpsXBa---","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T08:36:01.344Z","_start":"2017-09-10T05:00:30.626Z","unavailable_slots":0},"duration":2161},{"doc":{"_key":"791059","_id":"CicloPI_history/791059","_rev":"_Vkps1gW---","_start":"2017-09-10T08:36:01.344Z","unavailable_slots":0,"_end":"2017-09-10T08:36:32.556Z","empty_slots":0,"free_bikes":0},"duration":32},{"doc":{"_key":"792110","_id":"CicloPI_history/792110","_rev":"_Vkp4tbe---","_start":"2017-09-10T08:36:32.556Z","_end":"2017-09-10T08:49:30.737Z","free_bikes":4,"unavailable_slots":0,"empty_slots":10},"duration":778},{"doc":{"_key":"795365","_id":"CicloPI_history/795365","_rev":"_VkqZAf6---","empty_slots":9,"_end":"2017-09-10T09:24:47.391Z","unavailable_slots":0,"free_bikes":5,"_start":"2017-09-10T08:49:30.737Z"},"duration":629}]},{"hour":9,"bin":[{"doc":{"_key":"795365","_id":"CicloPI_history/795365","_rev":"_VkqZAf6---","empty_slots":9,"_end":"2017-09-10T09:24:47.391Z","unavailable_slots":0,"free_bikes":5,"_start":"2017-09-10T08:49:30.737Z"},"duration":1487},{"doc":{"_key":"797994","_id":"CicloPI_history/797994","_rev":"_VkqzKyG---","_start":"2017-09-10T09:24:47.391Z","empty_slots":10,"_end":"2017-09-10T09:53:21.836Z","unavailable_slots":0,"free_bikes":4},"duration":1715},{"doc":{"_key":"798566","_id":"CicloPI_history/798566","_rev":"_Vkq4YyW---","empty_slots":9,"_start":"2017-09-10T09:53:21.836Z","free_bikes":5,"_end":"2017-09-10T09:59:03.880Z","unavailable_slots":0},"duration":342},{"doc":{"_key":"798609","_id":"CicloPI_history/798609","_rev":"_Vkq43j6---","_start":"2017-09-10T09:59:03.880Z","_end":"2017-09-10T09:59:35.409Z","free_bikes":0,"empty_slots":0,"unavailable_slots":0},"duration":31},{"doc":{"_key":"800152","_id":"CicloPI_history/800152","_rev":"_VkrJdfe---","free_bikes":5,"_start":"2017-09-10T09:59:35.409Z","unavailable_slots":0,"_end":"2017-09-10T10:17:42.723Z","empty_slots":9},"duration":25}]},{"hour":10,"bin":[{"doc":{"_key":"800152","_id":"CicloPI_history/800152","_rev":"_VkrJdfe---","free_bikes":5,"_start":"2017-09-10T09:59:35.409Z","unavailable_slots":0,"_end":"2017-09-10T10:17:42.723Z","empty_slots":9},"duration":1063},{"doc":{"_key":"801612","_id":"CicloPI_history/801612","_rev":"_VkrYtgy---","_end":"2017-09-10T10:34:22.360Z","_start":"2017-09-10T10:17:42.723Z","unavailable_slots":0,"empty_slots":8,"free_bikes":6},"duration":999},{"doc":{"_key":"801881","_id":"CicloPI_history/801881","_rev":"_VkrZqIC---","_end":"2017-09-10T10:35:24.428Z","unavailable_slots":0,"_start":"2017-09-10T10:34:22.360Z","empty_slots":7,"free_bikes":7},"duration":62},{"doc":{"_key":"801924","_id":"CicloPI_history/801924","_rev":"_VkraIjC---","free_bikes":6,"unavailable_slots":0,"_end":"2017-09-10T10:35:55.473Z","empty_slots":8,"_start":"2017-09-10T10:35:24.428Z"},"duration":31},{"doc":{"_key":"803531","_id":"CicloPI_history/803531","_rev":"_VkrrOnW---","unavailable_slots":0,"_end":"2017-09-10T10:54:35.805Z","_start":"2017-09-10T10:35:55.473Z","free_bikes":7,"empty_slots":7},"duration":1121},{"doc":{"_key":"806063","_id":"CicloPI_history/806063","_rev":"_VksD8DO---","_start":"2017-09-10T10:54:35.805Z","empty_slots":8,"unavailable_slots":0,"free_bikes":6,"_end":"2017-09-10T11:21:34.977Z"},"duration":324}]},{"hour":11,"bin":[{"doc":{"_key":"806063","_id":"CicloPI_history/806063","_rev":"_VksD8DO---","_start":"2017-09-10T10:54:35.805Z","empty_slots":8,"unavailable_slots":0,"free_bikes":6,"_end":"2017-09-10T11:21:34.977Z"},"duration":1295},{"doc":{"_key":"808974","_id":"CicloPI_history/808974","_rev":"_Vksh3XW---","unavailable_slots":0,"free_bikes":5,"_start":"2017-09-10T11:21:34.977Z","empty_slots":9,"_end":"2017-09-10T11:54:16.436Z"},"duration":1961},{"doc":{"_key":"810126","_id":"CicloPI_history/810126","_rev":"_VksszXa---","empty_slots":8,"_start":"2017-09-10T11:54:16.436Z","_end":"2017-09-10T12:06:13.296Z","unavailable_slots":0,"free_bikes":6},"duration":344}]},{"hour":12,"bin":[{"doc":{"_key":"810126","_id":"CicloPI_history/810126","_rev":"_VksszXa---","empty_slots":8,"_start":"2017-09-10T11:54:16.436Z","_end":"2017-09-10T12:06:13.296Z","unavailable_slots":0,"free_bikes":6},"duration":373},{"doc":{"_key":"810178","_id":"CicloPI_history/810178","_rev":"_VkstaJ2---","_start":"2017-09-10T12:06:13.296Z","_end":"2017-09-10T12:06:52.947Z","empty_slots":7,"unavailable_slots":0,"free_bikes":7},"duration":40},{"doc":{"_key":"811568","_id":"CicloPI_history/811568","_rev":"_Vks7wde---","free_bikes":6,"unavailable_slots":0,"empty_slots":8,"_end":"2017-09-10T12:22:33.344Z","_start":"2017-09-10T12:06:52.947Z"},"duration":940},{"doc":{"_key":"811719","_id":"CicloPI_history/811719","_rev":"_Vks9qPS---","unavailable_slots":0,"free_bikes":5,"_end":"2017-09-10T12:24:38.051Z","_start":"2017-09-10T12:22:33.344Z","empty_slots":9},"duration":125},{"doc":{"_key":"812125","_id":"CicloPI_history/812125","_rev":"_VktAgs2---","free_bikes":6,"unavailable_slots":0,"_start":"2017-09-10T12:24:38.051Z","_end":"2017-09-10T12:27:44.875Z","empty_slots":8},"duration":187},{"doc":{"_key":"812201","_id":"CicloPI_history/812201","_rev":"_VktBdP6---","free_bikes":7,"unavailable_slots":0,"_start":"2017-09-10T12:27:44.875Z","_end":"2017-09-10T12:28:46.892Z","empty_slots":7},"duration":62},{"doc":{"_key":"813139","_id":"CicloPI_history/813139","_rev":"_VktL7Zq---","_start":"2017-09-10T12:28:46.892Z","unavailable_slots":0,"free_bikes":6,"empty_slots":8,"_end":"2017-09-10T12:40:13.051Z"},"duration":686},{"doc":{"_key":"814554","_id":"CicloPI_history/814554","_rev":"_VktaL8W---","unavailable_slots":0,"_end":"2017-09-10T12:55:47.565Z","empty_slots":9,"free_bikes":5,"_start":"2017-09-10T12:40:13.051Z"},"duration":935},{"doc":{"_key":"816343","_id":"CicloPI_history/816343","_rev":"_VktrTHq---","_start":"2017-09-10T12:55:47.565Z","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T13:14:29.030Z","unavailable_slots":0},"duration":252}]},{"hour":13,"bin":[{"doc":{"_key":"816343","_id":"CicloPI_history/816343","_rev":"_VktrTHq---","_start":"2017-09-10T12:55:47.565Z","free_bikes":4,"empty_slots":10,"_end":"2017-09-10T13:14:29.030Z","unavailable_slots":0},"duration":869},{"doc":{"_key":"824773","_id":"CicloPI_history/824773","_rev":"_VkvC_B6---","empty_slots":11,"free_bikes":3,"unavailable_slots":0,"_start":"2017-09-10T13:14:29.030Z","_end":"2017-09-10T14:49:10.015Z"},"duration":2731}]},{"hour":14,"bin":[{"doc":{"_key":"824773","_id":"CicloPI_history/824773","_rev":"_VkvC_B6---","empty_slots":11,"free_bikes":3,"unavailable_slots":0,"_start":"2017-09-10T13:14:29.030Z","_end":"2017-09-10T14:49:10.015Z"},"duration":2950},{"doc":{"_key":"824816","_id":"CicloPI_history/824816","_rev":"_VkvCdu----","empty_slots":12,"_start":"2017-09-10T14:49:10.015Z","unavailable_slots":0,"free_bikes":2,"_end":"2017-09-10T14:49:41.506Z"},"duration":32},{"doc":{"_key":"825042","_id":"CicloPI_history/825042","_rev":"_VkvC8_i---","_start":"2017-09-10T14:49:41.506Z","empty_slots":11,"free_bikes":3,"unavailable_slots":0,"_end":"2017-09-10T14:50:12.539Z"},"duration":31},{"doc":{"_key":"842406","_id":"CicloPI_history/842406","_rev":"_Vkx0n2G---","_end":"2017-09-10T18:04:17.295Z","empty_slots":12,"_start":"2017-09-10T14:50:12.539Z","unavailable_slots":0,"free_bikes":2},"duration":587}]},{"hour":15,"bin":[{"doc":{"_key":"842406","_id":"CicloPI_history/842406","_rev":"_Vkx0n2G---","_end":"2017-09-10T18:04:17.295Z","empty_slots":12,"_start":"2017-09-10T14:50:12.539Z","unavailable_slots":0,"free_bikes":2},"duration":3600}]},{"hour":16,"bin":[{"doc":{"_key":"842406","_id":"CicloPI_history/842406","_rev":"_Vkx0n2G---","_end":"2017-09-10T18:04:17.295Z","empty_slots":12,"_start":"2017-09-10T14:50:12.539Z","unavailable_slots":0,"free_bikes":2},"duration":3600}]},{"hour":17,"bin":[{"doc":{"_key":"842406","_id":"CicloPI_history/842406","_rev":"_Vkx0n2G---","_end":"2017-09-10T18:04:17.295Z","empty_slots":12,"_start":"2017-09-10T14:50:12.539Z","unavailable_slots":0,"free_bikes":2},"duration":3600}]},{"hour":18,"bin":[{"doc":{"_key":"842406","_id":"CicloPI_history/842406","_rev":"_Vkx0n2G---","_end":"2017-09-10T18:04:17.295Z","empty_slots":12,"_start":"2017-09-10T14:50:12.539Z","unavailable_slots":0,"free_bikes":2},"duration":257},{"doc":{"_key":"844117","_id":"CicloPI_history/844117","_rev":"_VkyFDp6---","empty_slots":11,"_start":"2017-09-10T18:04:17.295Z","free_bikes":3,"_end":"2017-09-10T18:22:14.303Z","unavailable_slots":0},"duration":1077},{"doc":{"_key":"849019","_id":"CicloPI_history/849019","_rev":"_Vky3-aK---","empty_slots":10,"_end":"2017-09-10T19:16:45.762Z","free_bikes":4,"unavailable_slots":0,"_start":"2017-09-10T18:22:14.303Z"},"duration":2266}]},{"hour":19,"bin":[{"doc":{"_key":"849019","_id":"CicloPI_history/849019","_rev":"_Vky3-aK---","empty_slots":10,"_end":"2017-09-10T19:16:45.762Z","free_bikes":4,"unavailable_slots":0,"_start":"2017-09-10T18:22:14.303Z"},"duration":1006},{"doc":{"_key":"849584","_id":"CicloPI_history/849584","_rev":"_Vky8L2q---","empty_slots":11,"unavailable_slots":0,"free_bikes":3,"_start":"2017-09-10T19:16:45.762Z","_end":"2017-09-10T19:22:27.219Z"},"duration":341},{"doc":{"_key":"849807","_id":"CicloPI_history/849807","_rev":"_Vkz_CpK---","_end":"2017-09-10T19:25:34.397Z","free_bikes":4,"empty_slots":10,"unavailable_slots":0,"_start":"2017-09-10T19:22:27.219Z"},"duration":187},{"doc":{"_key":"863931","_id":"CicloPI_history/863931","_rev":"_Vk1N14S---","_start":"2017-09-10T19:25:34.397Z","unavailable_slots":0,"free_bikes":3,"_end":"2017-09-10T22:01:32.965Z","empty_slots":11},"duration":2066}]},{"hour":20,"bin":[{"doc":{"_key":"863931","_id":"CicloPI_history/863931","_rev":"_Vk1N14S---","_start":"2017-09-10T19:25:34.397Z","unavailable_slots":0,"free_bikes":3,"_end":"2017-09-10T22:01:32.965Z","empty_slots":11},"duration":3600}]},{"hour":21,"bin":[{"doc":{"_key":"863931","_id":"CicloPI_history/863931","_rev":"_Vk1N14S---","_start":"2017-09-10T19:25:34.397Z","unavailable_slots":0,"free_bikes":3,"_end":"2017-09-10T22:01:32.965Z","empty_slots":11},"duration":3600}]},{"hour":22,"bin":[{"doc":{"_key":"863931","_id":"CicloPI_history/863931","_rev":"_Vk1N14S---","_start":"2017-09-10T19:25:34.397Z","unavailable_slots":0,"free_bikes":3,"_end":"2017-09-10T22:01:32.965Z","empty_slots":11},"duration":93},{"doc":{"_key":"865909","_id":"CicloPI_history/865909","_rev":"_Vk1h3zi---","unavailable_slots":0,"empty_slots":10,"free_bikes":4,"_start":"2017-09-10T22:01:32.965Z","_end":"2017-09-10T22:23:25.668Z"},"duration":1313},{"doc":{"_key":"873884","_id":"CicloPI_history/873884","_rev":"_Vk2x1v6---","empty_slots":11,"_start":"2017-09-10T22:23:25.668Z","_end":"2017-09-10T23:50:46.443Z","free_bikes":3,"unavailable_slots":0},"duration":2194}]},{"hour":23,"bin":[{"doc":{"_key":"873884","_id":"CicloPI_history/873884","_rev":"_Vk2x1v6---","empty_slots":11,"_start":"2017-09-10T22:23:25.668Z","_end":"2017-09-10T23:50:46.443Z","free_bikes":3,"unavailable_slots":0},"duration":3046},{"doc":{"_key":"884725","_id":"CicloPI_history/884725","_rev":"_Vk4fwwG---","_end":"2017-09-11T01:50:50.305Z","unavailable_slots":0,"empty_slots":12,"_start":"2017-09-10T23:50:46.443Z","free_bikes":2},"duration":554}]}]
Raw
index.coffee
# layout setting
width = document.body.getBoundingClientRect().width
height = document.body.getBoundingClientRect().height
margin = 30
W = width-margin*3
H = height-margin*3
svg = d3.select 'svg'
vis = svg.append 'g'
.attrs
width: width-margin
height: height-margin
transform: "translate(#{margin}, #{margin})"
# button switch
flag = true
d3.select '.switch'
.on 'click', () ->
if flag
draw 'data_2.json'
else
draw 'data_1.json'
flag = !flag
# scales
x = d3.scaleLinear()
.domain [0, 24]
.range [0, W]
y = d3.scaleLinear()
.rangeRound [H, 0]
# x-axis
vis.append 'g'
.attrs
transform: "translate(0, #{H})"
.call(d3.axisBottom(x).ticks(24))
.append 'text'
.attrs
fill: '#000'
transform: "translate(#{W}, 30)"
'text-anchor': 'middle'
.text "Hours"
# y-axis
y_axis = vis.append 'g'
y_axis.append 'text'
.attrs
fill: '#000'
x: 10
y: -5
dy: '0.71em'
'text-anchor': 'start'
.text "Bike Slots status"
# stack layout
stack = d3.stack()
.keys ["free_bikes", "empty_slots", "unavailable_slots"]
# legend
legend = vis.append 'g'
.attrs
class: 'legend'
transform: "translate(0, #{height-60})"
items = legend.selectAll '.item'
.data [{"label": "free bikes", "color": "#ccebc5"}, {"label": "empty slots", "color": "#f2f2f2"}, {"label": "unavailable slots", "color": "#fbb4ae"}]
enter_items = items.enter().append 'g'
.attrs
class: 'item'
all_items = enter_items.merge(items)
all_items.append 'rect'
.attrs
x: (d,i) -> i*100
width: 10
height: 20
fill: (d) -> d.color
all_items.append 'text'
.attrs
x: (d,i) -> 15 + i*100
y: 10
dy: '0.35em'
.text (d) -> d.label
items.exit().remove()
# MAIN visualization function
draw = (filename) ->
# data loading
d3.json filename, (data) ->
### data transformation
###
t_data = data.map (datum) ->
free_bikes = datum.bin
.map (doc) -> doc.doc.free_bikes * doc.duration
.reduce (acc, cur) -> acc + cur
empty_slots = datum.bin
.map (doc) -> doc.doc.empty_slots * doc.duration
.reduce (acc, cur) -> acc + cur
unavailable_slots = datum.bin
.map (doc) -> doc.doc.unavailable_slots * doc.duration
.reduce (acc, cur) -> acc + cur
return {
hour: datum.hour
free_bikes: free_bikes / 3600
empty_slots: empty_slots / 3600
unavailable_slots: unavailable_slots / 3600
}
### y-axis setting
###
# update y scale domain according to data
y.domain [0, d3.max(t_data, (d) -> d.free_bikes+d.empty_slots+d.unavailable_slots)+1]
y_axis.call(d3.axisLeft(y).ticks(y.domain()[1]))
### stacked bar chart
###
stacked = stack(t_data)
# groups
groups = vis.selectAll '.group'
.data stacked
enter_groups = groups.enter().append 'g'
.attrs
class: (d) -> "group #{d.key}"
all_groups = enter_groups.merge(groups)
groups.exit().remove()
# bars
bars = all_groups.selectAll '.bar'
.data (d) -> d
bars
.transition()
.duration 750
.attrs
x: (d) -> x(d.data.hour) + W/24/20
y: (d) -> y(d[1])
width: W/24 - W/24/10
height: (d) -> H - y(d[1]-d[0])
enter_bars = bars.enter().append 'rect'
.attrs
class: 'bar'
x: (d) -> x(d.data.hour) + W/24/20
y: (d) -> y(d[1])
width: W/24 - W/24/10
height: (d) -> H - y(d[1]-d[0])
all_bars = enter_bars.merge(bars)
bars.exit().remove()
draw 'data_1.json'
Raw
index.css
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
svg {
width: 100%;
height: 100%;
}
.free_bikes .bar {
fill: #ccebc5
}
.empty_slots .bar {
fill: #f2f2f2
}
.unavailable_slots .bar {
fill: #fbb4ae
}
.bar {
}
.switch {
position: absolute;
top: 5px;
right: 5px;
width: 80px;
height: 30px;
background-color: #F2F2F2;
}
.legend {
font-size: 12px;
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CicloPI stacked bar chart</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button class="switch">SWITCH</button>
<svg></svg>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 2.0.0
(function() {
// layout setting
var H, W, all_items, draw, enter_items, flag, height, items, legend, margin, stack, svg, vis, width, x, y, y_axis;
width = document.body.getBoundingClientRect().width;
height = document.body.getBoundingClientRect().height;
margin = 30;
W = width - margin * 3;
H = height - margin * 3;
svg = d3.select('svg');
vis = svg.append('g').attrs({
width: width - margin,
height: height - margin,
transform: `translate(${margin}, ${margin})`
});
// button switch
flag = true;
d3.select('.switch').on('click', function() {
if (flag) {
draw('data_2.json');
} else {
draw('data_1.json');
}
return flag = !flag;
});
// scales
x = d3.scaleLinear().domain([0, 24]).range([0, W]);
y = d3.scaleLinear().rangeRound([H, 0]);
// x-axis
vis.append('g').attrs({
transform: `translate(0, ${H})`
}).call(d3.axisBottom(x).ticks(24)).append('text').attrs({
fill: '#000',
transform: `translate(${W}, 30)`,
'text-anchor': 'middle'
}).text("Hours");
// y-axis
y_axis = vis.append('g');
y_axis.append('text').attrs({
fill: '#000',
x: 10,
y: -5,
dy: '0.71em',
'text-anchor': 'start'
}).text("Bike Slots status");
// stack layout
stack = d3.stack().keys(["free_bikes", "empty_slots", "unavailable_slots"]);
// legend
legend = vis.append('g').attrs({
class: 'legend',
transform: `translate(0, ${height - 60})`
});
items = legend.selectAll('.item').data([
{
"label": "free bikes",
"color": "#ccebc5"
},
{
"label": "empty slots",
"color": "#f2f2f2"
},
{
"label": "unavailable slots",
"color": "#fbb4ae"
}
]);
enter_items = items.enter().append('g').attrs({
class: 'item'
});
all_items = enter_items.merge(items);
all_items.append('rect').attrs({
x: function(d, i) {
return i * 100;
},
width: 10,
height: 20,
fill: function(d) {
return d.color;
}
});
all_items.append('text').attrs({
x: function(d, i) {
return 15 + i * 100;
},
y: 10,
dy: '0.35em'
}).text(function(d) {
return d.label;
});
items.exit().remove();
// MAIN visualization function
draw = function(filename) {
// data loading
return d3.json(filename, function(data) {
var all_bars, all_groups, bars, enter_bars, enter_groups, groups, stacked, t_data;
/* data transformation
*/
t_data = data.map(function(datum) {
var empty_slots, free_bikes, unavailable_slots;
free_bikes = datum.bin.map(function(doc) {
return doc.doc.free_bikes * doc.duration;
}).reduce(function(acc, cur) {
return acc + cur;
});
empty_slots = datum.bin.map(function(doc) {
return doc.doc.empty_slots * doc.duration;
}).reduce(function(acc, cur) {
return acc + cur;
});
unavailable_slots = datum.bin.map(function(doc) {
return doc.doc.unavailable_slots * doc.duration;
}).reduce(function(acc, cur) {
return acc + cur;
});
return {
hour: datum.hour,
free_bikes: free_bikes / 3600,
empty_slots: empty_slots / 3600,
unavailable_slots: unavailable_slots / 3600
};
});
/* y-axis setting
*/
// update y scale domain according to data
y.domain([
0,
d3.max(t_data,
function(d) {
return d.free_bikes + d.empty_slots + d.unavailable_slots;
}) + 1
]);
y_axis.call(d3.axisLeft(y).ticks(y.domain()[1]));
/* stacked bar chart
*/
stacked = stack(t_data);
// groups
groups = vis.selectAll('.group').data(stacked);
enter_groups = groups.enter().append('g').attrs({
class: function(d) {
return `group ${d.key}`;
}
});
all_groups = enter_groups.merge(groups);
groups.exit().remove();
// bars
bars = all_groups.selectAll('.bar').data(function(d) {
return d;
});
bars.transition().duration(750).attrs({
x: function(d) {
return x(d.data.hour) + W / 24 / 20;
},
y: function(d) {
return y(d[1]);
},
width: W / 24 - W / 24 / 10,
height: function(d) {
return H - y(d[1] - d[0]);
}
});
enter_bars = bars.enter().append('rect').attrs({
class: 'bar',
x: function(d) {
return x(d.data.hour) + W / 24 / 20;
},
y: function(d) {
return y(d[1]);
},
width: W / 24 - W / 24 / 10,
height: function(d) {
return H - y(d[1] - d[0]);
}
});
all_bars = enter_bars.merge(bars);
return bars.exit().remove();
});
};
draw('data_1.json');
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment