Live Weather Data

100%

Live Weather Data

✓ Published0🌍 Public

Last edited Jan 17, 2017

Created on Jan 17, 2017

This example displays the current temperature in London, updating every five minutes. It fetches live weather data from the OpenWeatherMap API using `d3.json` and presents the temperature in both Celsius and Fahrenheit. The page shows a large text label for each unit, with values formatted using `d3.format`. A `setInterval` timer triggers the API request repeatedly, replacing the displayed numbers with the latest measurements. The visualization relies on D3 v4 for data loading and DOM selection.

AI-generated description

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

mit Licensed

Similar vizzes

Loading thumbnail…

Gist 3b05ad028ea1cbc56ccb696600b50566

This example displays a live weather dashboard that updates every minute. It shows the current location, temperature in Fahrenheit, weather description, and a clothing recommendation icon. The visualization uses a simple HTML widget via the Script Kit `widget` API, refreshing through `setInterval`. Weather data is fetched from the fcc-weather-api.glitch.me endpoint using `fetch`, while the displayed clothing item is selected by a `getTop` function based on Celsius temperature. The interface renders as a single card, with the date and time shown below the weather details.

HHypercubed

72% match

Loading thumbnail…

click counter

This example demonstrates loading live weather data for London and displaying the current condition, initially set to "cloudy," in an HTML span element. It uses the browser's native `fetch` API to retrieve a JSON file from a GitHub Gist, then parses the response with `response.json()`. The code updates the DOM by querying the span with `document.querySelector` and setting its `innerHTML` to the `main` weather value from the retrieved data. React and ReactDOM are included via UMD scripts but are not actively used in the interaction.

Bbryce-walsh

70% match

Loading thumbnail…

Line Chart

This line chart visualizes temperature readings over time for Geneva, automatically updating every 5 minutes with data from the Data Canvas - Sense Your City API. The chart is built with a reusable D3.js module and uses SVG rendering with smooth transitions. It fetches aggregated CSV data (mean temperature by date) via jQuery, maps the date field to a time-scale X axis and temperature to a linear Y axis, and includes labeled axes and a title. The visualization supports dynamic resizing and live data updates through a Model-based architecture that coordinates the container, SVG dimensions, scales, and axes.

CCurran Kelleher

68% match

Loading thumbnail…

D3 Example

As more data loads, this D3 example builds a multi-day temperature line chart for San Francisco, one CSV file at a time. Each file holds a day of hourly readings, and the visualization re-renders as each new day is fetched, revealing the dataset’s daily cycles. The SVG line chart, based on a standalone example, shows the temperature curve extending across time with each incremental load, demonstrating how to stream and update data progressively in the browser.

CCurran Kelleher

67% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the latest temperature readings from seven cities, using live data from the Data Canvas - Sense Your City API. Built with D3 v3 and an SVG rendering approach, it follows a reactive model-based architecture: the chart derives its width, height, scales, and axes from a set of properties, automatically updating when data or configuration changes. The X axis displays city names sorted by temperature, while the Y axis encodes the temperature values. The visualization includes animated transitions, a title, and axis labels, and is implemented as a reusable module that supports sorting and customizable margins. The data updates every five minutes, reflecting the most recent sensor readings.

CCurran Kelleher

67% match

Loading thumbnail…

Fetching Data

This example demonstrates how to fetch and aggregate environmental sensor data from the Data Canvas - Sense Your City API using D3, jQuery, and async.js for asynchronous control flow. The visualization retrieves temperature, light, air quality, sound, humidity, and dust readings across multiple cities, then combines the results into CSV format displayed in textareas. It fetches data for the past day, week, month, and 100 days in 5-minute intervals, using the async library’s map and whilst functions to manage API calls while respecting the 1000-row limit. The interface shows live loading indicators and record counters.

CCurran Kelleher

66% match

Loading thumbnail…

weather_data

This example visualizes weather data from a JSON file for a week of October 2018, showing daily summaries, icons, and key metrics such as temperature, humidity, wind speed, and precipitation. Rendered using D3.js, it employs linear scales for temperature and time, and axis generators like `d3.axisLeft` and `d3.axisBottom` to plot a line chart of temperature highs and lows. Data points include timestamps in Unix format, with temperature values in Fahrenheit. The chart also displays daily weather icons and summaries, extracting data from the `wh_weather_data.json` source. The visualization highlights trends in temperature fluctuations and weather conditions across each date.

深深度碎片

66% match

Loading thumbnail…

Getting the Data

This example demonstrates the raw output of a live sensor-data API by displaying a plain-text summary of the data returned from the Data Canvas - Sense Your City API. It fetches aggregated environmental readings (temperature, light, humidity, dust, etc.) for Geneva at five-minute intervals over the past day, then prints the number of rows, the number of columns, and the original CSV string onto the page. The code uses jQuery’s `$.get` to request the CSV and D3.js v3’s `d3.csv.parse` to convert the response into an array of objects. No chart or visual encoding is applied—the focus is purely on inspecting the dataset’s structure and content.

CCurran Kelleher

66% match