| license: mit |
This example shows how to fetch and display live weather data from OpenWeatherMap. Updates every 5 minutes.
If it's not working, probably you're looking at the HTTPS version, which blocks the HTTP request to the weather API. Try the non-HTTPS link: http://bl.ocks.org/curran/c7d740b2e91dda4f257d4174be506c42
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| font-size: 4em; | |
| margin: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>Temperature in London</p> | |
| <p id="temp-c">loading...</p> | |
| <p id="temp-f"></p> | |
| <script> | |
| var url = "https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=a3d9b50b2022aaff3f6b7eb24288e5c8"; | |
| var format = d3.format(".2f"); | |
| function update(){ | |
| d3.json(url, function (data){ | |
| var kelvin = data.main.temp; | |
| d3.select("#temp-c").text(format(celcuis(kelvin)) + " °C"); | |
| d3.select("#temp-f").text(format(fahrenheit(kelvin)) + " °F"); | |
| }); | |
| } | |
| function celcuis(kelvin){ return kelvin - 273.15; } | |
| function fahrenheit(kelvin){ return celcuis(kelvin) * 9/5 + 32; } | |
| update(); | |
| var fiveMinutes = 1000 * 60 * 5; | |
| setInterval(update, fiveMinutes); | |
| </script> | |
| </body> |
