{"id":1994,"date":"2019-02-13T13:00:31","date_gmt":"2019-02-13T13:00:31","guid":{"rendered":"https:\/\/chewett.co.uk\/blog\/?p=1994"},"modified":"2019-02-12T23:21:06","modified_gmt":"2019-02-12T23:21:06","slug":"d3-js-version-5-prediction-line-chart","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/1994\/d3-js-version-5-prediction-line-chart\/","title":{"rendered":"D3.js version 5 Prediction Line Chart"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n\n\n\n\n

What is a Prediction Line Chart?<\/h2>\n\n\n\n

A Prediction Line Chart is an extension of a basic line chart where the current data is charted alongside a couple predictions for its movement.<\/p>\n\n\n\n

The use of these graphs is typically to show the current data and allow comparison to the current predictions.<\/p>\n\n\n\n

Preparing the Prediction Data<\/h2>\n\n\n\n

First I prepare the data to be used for the Prediction Line chart. There are two parts to the data.<\/p>\n\n\n\n

The first part is the current data that the predictions are made from. This will form the first half of the chart.<\/p>\n\n\n\n

The second part is the set of predictions. These comprise of a value and name of the person who guessed it.<\/p>\n\n\n

\nvar data = [\n    {"date": new Date(2017, 8, 1), "val": 400 },\n    {"date": new Date(2017, 10, 1), "val": 500 },\n    {"date": new Date(2018, 2, 1), "val": 600 },\n    {"date": new Date(2018, 7, 1), "val": 700 },\n    {"date": new Date(2018, 10, 29), "val": 800 }\n];\n\nvar predictionValueStart = 800;\nvar predictionStartDate = new Date(2018, 10, 29);\nvar predictionEndDate = new Date(2018, 12, 24);\nvar predictions = [\n    {"person": "Bob", "val": 90},\n    {"person": "Alice", "val": 999},\n    {"person": "Clarence", "val": 850}\n];\n\nvar predictionDataSeries = [];\npredictions.forEach(function(p) {\n    predictionDataSeries.push([\n        {"date": predictionStartDate, "val": predictionValueStart},\n        {"date": predictionEndDate, "val": p.val}\n    ]);\n});\n<\/pre><\/div>\n\n\n
In addition to storing the current data and predictions, the predication start date, end date, and start value are also saved to variables.<\/p>\n\n\n\n
The final foreach loop in this code snippet transforms the predictions into a more useful format for d3 to process.<\/p>\n\n\n\n
Defining the Charts basic size parameters<\/h2>\n\n\n\n
To make it easy to modify the size of the chart I am adding its basic parameters as variables.<\/p>\n\n\n
\nvar s = d3.select("#mainSvg");\nvar height = 250;\nvar width = 700;\nvar margin = {top: 20, right: 30, bottom: 30, left: 40};\n<\/pre><\/div>\n\n\n
The SVG selector will be used later to add elements to the chart. The margin variable is also used to add some padding around the graph.<\/p>\n\n\n\n
Scaling the data to fit the chart<\/h2>\n\n\n\n
To ensure that all the data appears on the chart two scaling functions are created. These are used to map a value on the chart to a location on the screen.<\/p>\n\n\n
\nvar y = d3.scaleLinear()\n    .domain([d3.min(data, function(d) { return d.val; }), d3.max(predictions, function(d) { return d.val; })]).nice()\n    .range([height - margin.bottom, margin.top]);\n\nvar x = d3.scaleTime()\n    .domain([d3.min(data.map(function(d) { return d.date;})), predictionEndDate])\n    .range([margin.left, width - margin.right])\n;\n<\/pre><\/div>\n\n\n
The first is the linear scale of the y axis which holds the prediction data. The minimum is scaled to the minimum value of the data. The maximum is chosen using the largest value of the predictions.<\/p>\n\n\n\n
The x axis uses a d3 time scale to map our dates onto the chart. Again the minimum is taken from the minimum date from the data. However the maximum is taken from prediction end date as this is fixed.<\/p>\n\n\n\n
The ranges of these functions have been taken from the height and widths of the chart minus the margin regions. This will ensure that our scaling places the chart nicely in the middle of the svg.<\/p>\n\n\n\n
Creating the d3 line function<\/h2>\n\n\n\n
The line function allows easy mapping from the data values to something that produces path information. This allows us to create a path element and use the line function to generate the line.<\/p>\n\n\n
\nvar line = d3.line()\n    .defined(function(d) { return !isNaN(d.val); }) \/\/ Defined lets you decide whether this value is valid\n    .x(function(d) { return x(d.date); })\n    .y(function(d) { return y(d.val); })\n;\n<\/pre><\/div>\n\n\n
Here .defined()<\/code> is used to ignore any data that isnt valid for the line. While the data here is clean it is good practice to use.<\/p>\n\n\n\n
The x<\/code> and y<\/code> functions use the previously created scales to turn the data into the pixel locations on screen. Here I use the values of d.date<\/code> for the x<\/code> values and d.val<\/code> for the y<\/code> values.<\/p>\n\n\n\n
Creating the X and Y axis functions<\/h2>\n\n\n\n
D3 includes a wide range of helper functions including those to help deal with drawing graph axis.<\/p>\n\n\n
\nvar yAxis = function(g) {\n    g.attr("transform", "translate(" + margin.left + " ,0)")\n        .call(d3.axisLeft(y))\n        .call(function(g) { g.select(".domain").remove(); })\n        .call(function(g) {\n            g.select(".tick:last-of-type text").clone()\n                .attr("x", 3)\n                .attr("text-anchor", "start")\n                .attr("font-weight", "bold")\n                .text(data.y)\n        });\n};\n\nvar xAxis = function(d) {\n    d.attr("transform", "translate(0, " + (height - margin.bottom) + ")")\n        .call(d3.axisBottom(x).ticks(width \/ 80).tickSizeOuter(0))\n};\n<\/pre><\/div>\n\n\n
The main helper functions I am using are d3.axisLeft<\/code> and d3.axisBottom<\/code>. Here I use ticks()<\/code> to define the number of ticks across the axis.<\/p>\n\n\n\n
Creating the base data line<\/h2>\n\n\n\n
Once we have set up our helper functions we can draw the graph.<\/p>\n\n\n\n
The first two calls append a grouping element and are drawn using the xAxis<\/code> and yAxis<\/code> functions.<\/p>\n\n\n
\ns.append("g")\n    .call(xAxis);\n\ns.append("g")\n    .call(yAxis);\n\ns.append("path")\n    .datum(data)\n    .attr("fill", "none")\n    .attr("stroke", "steelblue")\n    .attr("stroke-width", 1.5)\n    .attr("stroke-linejoin", "round")\n    .attr("stroke-linecap", "round")\n    .attr("d", line);\n<\/pre><\/div>\n\n\n
Finally the line is created by creating a path with the data in our data<\/code> variable. The line<\/code> function created earlier is used to lay out the data according to our scaling functions.<\/p>\n\n\n\n
Creating the prediction lines<\/h2>\n\n\n\n
Once the main body of the graph is created the prediction lines are created.<\/p>\n\n\n
\nvar colours = d3.schemeCategory10;\n\npredictionDataSeries.forEach(function(p, index) {\n    s.append("path")\n        .datum(p)\n        .attr("fill", "none")\n        .attr("stroke", colours[index])\n        .attr("stroke-width", 1.5)\n        .attr("stroke-linejoin", "round")\n        .attr("stroke-linecap", "round")\n        .attr("d", line);\n})\n<\/pre><\/div>\n\n\n
The d3.schemeCategory10<\/code> variable holds 10 categorical colours that I am going to use to colour the predictions.<\/p>\n\n\n\n
For each of the prediction data sets, a path is appended and styled. Again the d attribute of the line is created based on our line<\/code> function created above.<\/p>\n\n\n\n
Summary<\/h2>\n\n\n\n
Today we have went through the process of creating a prediction line chart to show how different predictions may be made for the data.<\/p>\n\n\n\n
The full code for this is available\u00a0on my website which includes a live example<\/a>.<\/p>\n\n\n\n
All my D3 examples and related blogposts are available by searching the d3.js keyword<\/a> or by viewing all examples graphically on the d3 section of my website<\/a>.<\/p>\n\n\n\n
If you have any questions feel free to comment on the following blog post.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":2000,"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 am writing about a #D3 version 5 Prediction Line #Chart #JavaScript #D3.js including an example and full code information","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-1994","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\/2019\/02\/d3_v5_prediction_line.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-wa","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1038,"url":"https:\/\/chewett.co.uk\/blog\/1038\/new-d3-js-part-website\/","url_meta":{"origin":1994,"position":0},"title":"New D3.js part of my website","author":"Chewett","date":"February 28, 2018","format":false,"excerpt":"This post talks about the new D3.js part of my website and what I plan to do with it. The website! I have added a link on the homepage of my website to the new D3.js section. Here you will be able to view all my D3.js projects and tutorials.\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_on_website.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_on_website.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_on_website.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_on_website.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1483,"url":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","url_meta":{"origin":1994,"position":1},"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 "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_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":1030,"url":"https:\/\/chewett.co.uk\/blog\/1030\/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4\/","url_meta":{"origin":1994,"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":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":1994,"position":3},"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":2294,"url":"https:\/\/chewett.co.uk\/blog\/2294\/implementing-the-perforce-helix-in-d3-js\/","url_meta":{"origin":1994,"position":4},"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":[]},{"id":1700,"url":"https:\/\/chewett.co.uk\/blog\/1700\/colour-scales-in-d3-version-5\/","url_meta":{"origin":1994,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1994","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=1994"}],"version-history":[{"count":6,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1994\/revisions"}],"predecessor-version":[{"id":2006,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1994\/revisions\/2006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/2000"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}