{"id":1038,"date":"2018-02-28T13:00:00","date_gmt":"2018-02-28T13:00:00","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=1038"},"modified":"2018-02-27T23:29:06","modified_gmt":"2018-02-27T23:29:06","slug":"new-d3-js-part-website","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1038\/new-d3-js-part-website\/","title":{"rendered":"New D3.js part of my website"},"content":{"rendered":"<p>This post talks about the new D3.js part of my website and what I plan to do with it.<\/p>\n<p><!--more--><\/p>\n<h2>The website!<\/h2>\n<p>I have added a link on the <a href=\"https:\/\/chewett.co.uk\/\">homepage of my website<\/a> to the <a href=\"https:\/\/chewett.co.uk\/d3\/\">new D3.js section<\/a>. Here you will be able to view all my D3.js projects and tutorials.<\/p>\n<h2>The plan for the new section<\/h2>\n<p>I am planning to publish more of my D3.js work and creating small D3.js tutorials. Some of the future plans for this section of my website are:<\/p>\n<ul>\n<li>Automatic Gantt charts from data structure<\/li>\n<li>Pokemon Go account progress graphs<\/li>\n<li>Pokemon cluster analysis<\/li>\n<li>Pokemon Go Regional map<\/li>\n<\/ul>\n<p>Currently, the planned ideas for work with D3.js are building tools which would be interesting to me personally.<\/p>\n<p>The Pokemon Go related ideas are all projects I have noted that I would like to try building. Some of them aim to visually display some of the research done by other players and others to improve the tools my group are using.<\/p>\n<p>Apart from the Pokemon Go work, I have a number of projects planned to make a Gannt chart library to show simple project plans.<\/p>\n<p>I will be blogging as I add more content to this part of the site. If you have an idea I could work on or have any suggestions contact me or leave a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post talks about the new D3.js part of my website and what I plan to do with it.<\/p>\n","protected":false},"author":1,"featured_media":1042,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[98],"tags":[229,234,72,230,218],"class_list":["post-1038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-d3-js","tag-gantt-chart","tag-javascript","tag-leaflet","tag-pokemon-go"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_on_website.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-gK","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1483,"url":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","url_meta":{"origin":1038,"position":0},"title":"D3.js version 5 Scatterplot with shapes","author":"Chewett","date":"September 15, 2018","format":false,"excerpt":"Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5. Aim of this tutorial This blog builds on Mike Bostocks\u00a0Scatterplot with shapes example and reworks it for D3.js version 5. This tutorial will focus on the changes needed to convert the original diagram\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":1038,"position":1},"title":"Drawing shapes in D3.js Version 5","author":"Chewett","date":"September 5, 2018","format":false,"excerpt":"This post goes over the various D3.js symbols typically used for scatter plots. D3.js built-in symbols D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are\u00a0for points on scatter plots and similar graphs. It is important to\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1030,"url":"https:\/\/chewett.co.uk\/blog\/1030\/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4\/","url_meta":{"origin":1038,"position":2},"title":"Overlaying geo data with Leaflet Version 1.3 and D3.js Version 4","author":"Chewett","date":"February 24, 2018","format":false,"excerpt":"In this post I describe how you can overlay Geo Data onto a leaflet map with D3.js. Combining Leaflet and D3 and objectives There are a number of tutorials online on how to overlay Geodata with D3.js. However, I couldn't find any of these that worked for the most recent\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2021,"url":"https:\/\/chewett.co.uk\/blog\/2021\/how-to-load-multiple-d3-versions-at-once\/","url_meta":{"origin":1038,"position":3},"title":"How to load multiple D3 versions at once","author":"Chewett","date":"March 2, 2019","format":false,"excerpt":"Today I am writing a short tutorial on how you can load multiple D3.js versions at once. Why you might want to load multiple D3 versions? Most of the time you will be using the same version of D3 for all visualisations on the page. However there may be cases\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1463,"url":"https:\/\/chewett.co.uk\/blog\/1463\/summary-of-mike-bostock-on-d3-selections\/","url_meta":{"origin":1038,"position":4},"title":"Summary of Mike Bostock on D3 selections","author":"Chewett","date":"August 25, 2018","format":false,"excerpt":"Today I talk about and link to Mike Bostock's post on D3 selections, in this he talks about the basic unit of d3, the selection. Who is Mike Bostock? Mike Bostock is one of the key developers of d3.js and worked for a number of years creating visualizations with this\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2294,"url":"https:\/\/chewett.co.uk\/blog\/2294\/implementing-the-perforce-helix-in-d3-js\/","url_meta":{"origin":1038,"position":5},"title":"Implementing the Perforce Helix in D3.js","author":"Chewett","date":"July 27, 2019","format":false,"excerpt":"This blog post talks about the steps I took to implement the Perforce helix in D3.js. What is the Perforce Helix? Perforce is a company that makes a version control system of the same name. One of their main products has been recently renamed Perforce Helix Core. Lately on their\u2026","rel":"","context":"In &quot;Software&quot;","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=1038"}],"version-history":[{"count":3,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1038\/revisions"}],"predecessor-version":[{"id":1043,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1038\/revisions\/1043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1042"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}