Live Weather Data by curran

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

index.html

<!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>