{"id":658,"date":"2017-02-06T01:10:39","date_gmt":"2017-02-06T01:10:39","guid":{"rendered":"https:\/\/blogs.scu.edu\/dataviz\/?p=658"},"modified":"2017-02-06T01:20:17","modified_gmt":"2017-02-06T01:20:17","slug":"introducing-my-dashboard","status":"publish","type":"post","link":"https:\/\/blogs.scu.edu\/dataviz\/2017\/02\/06\/introducing-my-dashboard\/","title":{"rendered":"Introducing My Dashboard"},"content":{"rendered":"<p>Hey guys, how is your weekend? For me, I have finished\u00a0<strong><a href=\"https:\/\/dpengdashboard.herokuapp.com\/\">my very first dashboard<\/a><\/strong>.<\/p>\n<p>This is a static single web page written in HTML, SCSS and ReactJS, \u00a0it&#8217;s built with webpack\u00a0and hosted on Heroku. The source code can be seen from\u00a0<strong><a href=\"https:\/\/github.com\/aibreania\/Dashboard\">here<\/a><\/strong>. Also, the images used in the web page\u00a0are stored in AWS S3 buckets. You can clone my git repository to your local server, and start the code the see how it looks. The instruction is in the &#8220;README.md&#8221; file on the git repo.<\/p>\n<p>The idea to use ReactJS instead of plain JavaScriptis that, we can build modules separately, and reuse different modules, which will facilitate web development in large scale. ReactJS also has many other advantages, like virtual DOM, great documentation, relatively stable and so on. Also by using SCSS, we gain benefits from OOCSS, the philosophy to develop responsive websites.<\/p>\n<p>After launching the webpage, you can see that I use the percent circle mentioned <strong><a href=\"https:\/\/blogs.scu.edu\/dataviz\/2017\/01\/30\/pure-css-percentage-circle\/\">last week<\/a><\/strong>. The elements below those percent circles are still images, next thing I will do is to change them into D3 DOM elements. This would take some efforts and I&#8217;ll offer the detailed instruction of the process. Please stay tuned for new improvements and feel free to reach out to me for suggestions, ideas and anything! Thank you! \ud83d\ude00<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey guys, how is your weekend? For me, I have finished\u00a0my very first dashboard. This is a static single web page written in HTML, SCSS and ReactJS, \u00a0it&#8217;s built with webpack\u00a0and hosted on Heroku. The source code can be seen from\u00a0here. Also, the images used in the web page\u00a0are stored in AWS S3 buckets. You &hellip; <a href=\"https:\/\/blogs.scu.edu\/dataviz\/2017\/02\/06\/introducing-my-dashboard\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Introducing My Dashboard<\/span><\/a><\/p>\n","protected":false},"author":1882,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"qubely_global_settings":"","qubely_interactions":"","kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-658","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"gutentor_comment":1,"qubely_featured_image_url":null,"qubely_author":{"display_name":"danningpeng","author_link":"https:\/\/blogs.scu.edu\/dataviz\/author\/danningpeng\/"},"qubely_comment":1,"qubely_category":"<a href=\"https:\/\/blogs.scu.edu\/dataviz\/category\/uncategorized\/\" rel=\"category tag\">Uncategorized<\/a>","qubely_excerpt":"Hey guys, how is your weekend? For me, I have finished\u00a0my very first dashboard. This is a static single web page written in HTML, SCSS and ReactJS, \u00a0it&#8217;s built with webpack\u00a0and hosted on Heroku. The source code can be seen from\u00a0here. Also, the images used in the web page\u00a0are stored in AWS S3 buckets. You&hellip;","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/users\/1882"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/comments?post=658"}],"version-history":[{"count":4,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/658\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/658\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/media?parent=658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/categories?post=658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/tags?post=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}