{"id":1483,"date":"2018-09-15T13:00:36","date_gmt":"2018-09-15T12:00:36","guid":{"rendered":"http:\/\/chewett.co.uk\/blog\/?p=1483"},"modified":"2018-09-10T21:36:10","modified_gmt":"2018-09-10T20:36:10","slug":"d3-js-version-5-scatterplot-with-shapes","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","title":{"rendered":"D3.js version 5 Scatterplot with shapes"},"content":{"rendered":"

\"\"<\/p>\n

Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5.<\/p>\n

<\/p>\n

Aim of this tutorial<\/h2>\n

This blog builds on Mike Bostocks\u00a0Scatterplot with shapes example<\/a> and reworks it for D3.js version 5. This tutorial will focus on the changes needed to convert the original diagram to one that D3.js version 5 supports.<\/p>\n

Preparing some styles for the graph<\/h2>\n

Before drawing the SVG we need to prepare some styles for the graphs. The following styles are the same as Mike’s original styles for D3 version 3.<\/p>\n

<style>\r\n    body {\r\n        font: 10px sans-serif;\r\n    }\r\n\r\n    .axis path,\r\n    .axis line {\r\n        fill: none;\r\n        stroke: #000;\r\n        shape-rendering: crispEdges;\r\n    }\r\n\r\n    .point {\r\n        fill: steelblue;\r\n        stroke: #000;\r\n    }\r\n<\/style><\/pre>\n
Drawing the Scatter Plot<\/h2>\n
To start with Mike created a number of variables to hold the margin information,\u00a0width, and height of the graph.<\/p>\n
var margin = {top: 20, right: 20, bottom: 30, left: 40},\r\n    width = 960 - margin.left - margin.right,\r\n    height = 500 - margin.top - margin.bottom;<\/pre>\n
Then the x<\/code>\u00a0and\u00a0y<\/code> scales are created and their range is set based on the width and height of the graph. This will determine how the domain values given\u00a0to the axis are mapped to the size of the graph.<\/p>\n
This is one of the changes needed for D3.js version 5, previously scale linear was accessed using\u00a0d3.scale.linear()<\/span><\/code>\u00a0instead of d3.scaleLinear()<\/code>\u00a0.<\/p>\n
var x = d3.scaleLinear()\r\n    .range([0, width]);\r\nvar y = d3.scaleLinear()\r\n    .range([height, 0]);<\/pre>\n
Then the SVG is added to the body of the page and sized as appropriate. Once we have the SVG the main grouping element g<\/code> is created and transformed into the middle of the SVG.<\/p>\n
var svg = d3.select("body").append("svg")\r\n    .attr("width", width + margin.left + margin.right)\r\n    .attr("height", height + margin.top + margin.bottom)\r\n    .append("g")\r\n    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");<\/pre>\n
Another change needed for d3 version 5 was the csv()<\/code> function. This now uses a promise structure to return the data using .then()<\/code> after calling csv.<\/p>\n
d3.csv("data.csv")\r\n    .then(function(data) {\r\n    \/\/ Coerce the strings to numbers.\r\n    data.forEach(function(d) {\r\n        d.x = +d.x;\r\n        d.y = +d.y;\r\n    });\r\n\r\n    \/\/ Compute the scales\u2019 domains.\r\n    x.domain(d3.extent(data, function(d) { return d.x; })).nice();\r\n    y.domain(d3.extent(data, function(d) { return d.y; })).nice();\r\n\r\n    \/\/ Add the x-axis.\r\n    svg.append("g")\r\n        .attr("class", "x axis")\r\n        .attr("transform", "translate(0," + height + ")")\r\n        .call(d3.axisBottom(x));\r\n\r\n    \/\/ Add the y-axis.\r\n    svg.append("g")\r\n        .attr("class", "y axis")\r\n        .call(d3.axisLeft(y));\r\n\r\n    \/\/ Add the points!\r\n    svg.selectAll(".point")\r\n        .data(data)\r\n        .enter().append("path")\r\n        .attr("class", "point")\r\n        .attr("d", d3.symbol().type(d3.symbolTriangle))\r\n        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });\r\n});<\/pre>\n
Inside the csv\u00a0promise first we convert the x y points to integers, this is because they are strings when they are loaded from the csv function.<\/p>\n
Once this is completed we calculate the domains of both of the axis and use nice()<\/code> to\u00a0ensure they start and end at nice values. Once the domains are calculated we create both the y and x axis and add it to the SVG.<\/p>\n
Again we have to modify this slightly from D3.js version 3 so\u00a0d3.svg.axis().scale(x).orient(\"bottom\"<\/span>)<\/span><\/code>\u00a0becomes d3.axisBottom(x)<\/code>, and\u00a0d3.svg.axis().scale(y).orient(\"left\"<\/span>)<\/span><\/code>\u00a0becomes d3.axisLeft(y)<\/code>.<\/p>\n
The final section of code creates each of the points and sets the d<\/code> attribute to the triangle symbol. This has changed from\u00a0d3.svg.symbol().type(\"triangle-up\"<\/span>)<\/span><\/code>\u00a0in D3.js version 3 to d3.symbol().type(d3.symbolTriangle)<\/code>.<\/p>\n
Summary<\/h2>\n
Today I went through the code to create a scatter plot with D3.js version 5 by updating Mike Bostocks\u00a0version 3 graph. This includes showing how to have custom shapes with your scatter plot and the version 5 changes.<\/p>\n
The full code for this is available\u00a0on my website which includes a live example<\/a>.<\/p>\n
If you have any questions feel free to comment on the following blog post.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5.<\/p>\n","protected":false},"author":1,"featured_media":1501,"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":"Today I have updated Mike Bostocks #D3js version 3 Scatterplot with shapes to D3.js version 5 and discussed the non backwards compatible code","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,291,219,72],"class_list":["post-1483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-d3-js","tag-d3-js-version-5","tag-data-visualisation","tag-javascript"],"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\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-nV","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":1483,"position":0},"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 "Software"","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":1994,"url":"https:\/\/chewett.co.uk\/blog\/1994\/d3-js-version-5-prediction-line-chart\/","url_meta":{"origin":1483,"position":1},"title":"D3.js version 5 Prediction Line Chart","author":"Chewett","date":"February 13, 2019","format":false,"excerpt":"Today I am writing about the Prediction Line Chart I have created in D3.js version 5. Here I provide the full code how to create it yourself and how it works. What is a Prediction Line Chart? A Prediction Line Chart is an extension of a basic line chart where\u2026","rel":"","context":"In "Software"","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\/d3_v5_prediction_line.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\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/d3_v5_prediction_line.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":1483,"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 "Software"","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":1483,"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 "Software"","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":1700,"url":"https:\/\/chewett.co.uk\/blog\/1700\/colour-scales-in-d3-version-5\/","url_meta":{"origin":1483,"position":4},"title":"Colour scales in D3 Version 5","author":"Chewett","date":"November 3, 2018","format":false,"excerpt":"Over the past versions in D3.js there have been a number of changes to how you can get a colour scale to use with your charting. This blog post explores what is available and how to use it. This blog post applies to D3.js version 5. Colour scales in D3.js\u2026","rel":"","context":"In "Software"","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\/11\/d3_colour_scales-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\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.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":1483,"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 "Software"","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\/1483","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=1483"}],"version-history":[{"count":7,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1483\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1483\/revisions\/1530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/1501"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}