Such information is very useful to businesses across various industries like transportation, agriculture, and, in my friend’s case, laundry shops.<\/p>\n\n\n\n
Also, the weather data from this API can be easily integrated into your project or any program you are working with. The best part \u2013 the free version of the API is extremely powerful on its own, so that’s what we’ll use today.<\/p>\n\n\n\n
In this article, we’ll use the Tomorrow.io weather API and D3.js<\/a> to forecast and visualize the precipitation probability of a particular location on a line chart. A service like this would allow my friend to tell on which days of the week it is likely to rain.<\/p>\n\n\n\n What do you need to continue in this tutorial? Basic knowledge of JavaScript and D3.js is required.<\/p>\n\n\n\n I suggest reading a beginner’s guide to D3.js<\/a> if you want to refresh your memory before going further.<\/p>\n\n\n\n First, create an HTML file, and add the latest library of At some point, our visualizations will need some space (margins). It is a convention in For this, you need to define the margins for the four sides, create an Now, let’s set the width and viewBox of our SVG element. This will help make it responsive.<\/p>\n\n\n\n The d3.scale function takes in data as input and returns a visual value in pixels. d3.scale needs to be set with a domain<\/strong> and a range.<\/strong> The domain sets a LIMIT for the data we are trying to represent visually.<\/p>\n\n\n\n As seen above, we need to set the range of the scales. We’ll set the Next, we need to add a title and labels to our visualizations. This is useful for explaining our graph to our users.<\/p>\n\n\n\n Edit your With the above-added title and labels, the preview looks like this:<\/p>\n\n\n\n Here, the first thing we’ll need to do is to generate the path<\/a> for our chart. D3.js provides a Now that we have defined our line generator, let’s go ahead and fetch our data.<\/p>\n\n\n\n D3 provides us with a Before you can fetch data using the Tomorrow.io weather API, you’ll need a secret access token. To get this token, all you need to do is create an account with Tomorrow.io<\/a>. Yes, it’s that easy.<\/p>\n\n\n\nProject Requirements<\/h2>\n\n\n\n
Getting Started<\/h2>\n\n\n\n
d3.js<\/code> to the HTML file. Also, create an empty svg<\/code> element, like so:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Tomorrow.io Rainfall probability<\/title>\n <script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\n <\/head>\n <body>\n <svg><\/svg>\n <\/body>\n <script src=\"index.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\nHow to Set Up the Margins<\/h2>\n\n\n\n
d3.js<\/code> to set up the margin convention<\/strong>.<\/p>\n\n\n\nindex.js<\/code> file, and add the following:<\/p>\n\n\n\nconst margin = { left: 120, right: 30, top: 60, bottom: 30 }<\/code><\/p>\n\n\n\nconst width = document.querySelector(\"body\").clientWidth,\n height = 500;\n\nconst svg = d3.select(\"svg\").attr(\"viewBox\", [0, 0, width, height]);<\/code><\/pre>\n\n\n\nHow to Define the Scales<\/h2>\n\n\n\n
domain<\/code> once we fetch our data:<\/p>\n\n\n\nconst x_scale = d3.scaleTime().range([margin.left, width - margin.right]);\nconst y_scale = d3.scaleLinear().range([height - margin.bottom - margin.top, margin.top]);<\/code><\/pre>\n\n\n\nHow to Add a Title and Labels<\/h2>\n\n\n\n
script.js<\/code> and add the following code:<\/p>\n\n\n\n\/\/ labels\nconst x_label = \"Time\";\nconst y_label = \"Rainfall Probability\";\nconst location_name = \"Lagos Nigeria\";\n\n\/\/ add title\nsvg\n .append(\"text\")\n .attr(\"class\", \"svg_title\")\n .attr(\"x\", (width - margin.right + margin.left) \/ 2)\n .attr(\"y\", margin.top \/ 2)\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"22px\")\n .text(`${y_label} of ${location_name}`);\n\/\/ add y label\nsvg\n .append(\"text\")\n .attr(\"text-ancho\", \"middle\")\n .attr(\n \"transform\",\n `translate(${margin.left - 70}, ${\n (height - margin.top - margin.bottom + 180) \/ 2\n }) rotate(-90)`\n )\n .style(\"font-size\", \"26px\")\n .text(y_label);\n\/\/ add x label\nsvg\n .append(\"text\")\n .attr(\"class\", \"svg_title\")\n .attr(\"x\", (width - margin.right + margin.left) \/ 2)\n .attr(\"y\", height - margin.bottom - margin.top + 60)\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"26px\")\n .text(x_label);<\/code><\/pre>\n\n\n\n![\"Added](\"https:\/\/paper-attachments.dropbox.com\/s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638557381465_tomorrow.io-demo1.png\")
<\/figure>\n\n\n\nHow to Create the Line Chart<\/h2>\n\n\n\n
.line()<\/code> method that pretty much generates the line path for you. Let’s add the line generator:<\/p>\n\n\n\nconst start_time = (d) => new Date(d.startTime);\nconst temperature = (d) => +d.values.precipitationProbability;\n\nconst line_generator = d3.line()\n .x((d) => x_scale(start_time(d)))\n .y((d) => y_scale(temperature(d)))\n .curve(d3.curveBasis);<\/code><\/pre>\n\n\n\nHow to Fetch Data from the Tomorrow.io Weather API<\/h2>\n\n\n\n
.json()<\/code> method to fetch JSON data from an API or a local file.<\/p>\n\n\n\n
![\"s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638566467761_tomorrow.io-demo2.png\"\/](\"https:\/\/paper-attachments.dropbox.com\/s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638566467761_tomorrow.io-demo2.png.png\")
<\/figure>\n\n\n\n![\"s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638560607910_tomorrow.io-demo3\"\/](\"https:\/\/paper-attachments.dropbox.com\/s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638560607910_tomorrow.io-demo3.png\")
<\/figure>\n\n\n\n![\"Tomorrow.io](\"https:\/\/paper-attachments.dropbox.com\/s_80A2ED9660649A0944547FE32AE888AF070E268C15D560C813DD3420036CDBBE_1638561615864_tomorrow.io-demo4.png\")
<\/figure>\n\n\n\n