Gist bf0dde871413fb9081ca

100%

Gist bf0dde871413fb9081ca

✓ Published0🌍 Public

Last edited Mar 6, 2016

Created on Mar 6, 2016

This example shows current weather conditions for multiple Dutch cities, displaying temperature (in Fahrenheit and Celsius), weather icons, and local time. Users select a city from a dropdown menu or search for a location, triggering an API call to the Weather Underground API via jQuery’s `$.getJSON`. The interface also supports automatic geolocation by default, updating the weather display dynamically. Results are rendered as text and images in HTML elements, with error handling for invalid search queries.

AI-generated description

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…

Gist 061d35ce4df5e9a53079

This example demonstrates a command-line weather forecast script that outputs tomorrow’s predicted condition, high, and low temperatures for a fixed location. It first retrieves the location name and forecast data from the Yahoo Weather API, then prints the relevant details. The code uses Python’s `json` and `urllib2` modules to fetch and parse the JSON response, with the WOEID hardcoded for Newcastle. No graphical visualization is involved; the script simply prints text results to the console.

CCBasis

69% match

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes

67% match

Loading thumbnail…

Gist 8393712

This visualization displays weather forecast data for the Breton Sound location, using a GeoJSON feature to map the point coordinates. The data contains time-series measurements for minimum relative humidity, mixing height, wave height, and relative humidity. The visualization encodes these variables over time, likely as interactive charts or glyphs tied to the geographic marker, with timestamps in Unix epoch format and corresponding numeric values for each meteorological parameter.

Aadkatrit

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.

深深度碎片

64% match

Loading thumbnail…

Live Weather Data

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.

CCurran Kelleher

64% match

Loading thumbnail…

Visualization

This visualization displays a 3-day weather forecast using an animated bar chart built with D3.js. It encodes temperature values as bar heights, with a color scale ranging from white to blue to red to indicate temperature intensity. The data is loaded from a local JSON file. Bars animate upward with a bounce effect upon rendering. Interactive tooltips appear on mouseover to show the precise temperature, and hovering highlights a bar in yellow. The chart includes a time-based x-axis and linear y-axis.

Aajoua

62% match

Loading thumbnail…

FnCrandow

This interactive visualization combines live weather data with a dynamic, generative drawing canvas. It loads a background image and fetches current humidity levels for Moscow from the OpenWeatherMap API using p5.js’s `loadJSON` function. The humidity value directly controls the alpha transparency of a series of randomly placed circles, creating a weather-responsive overlay. The main drawing loop continuously updates the canvas, adding translucent red rectangles and the background image at random positions, while a time-based timer alternates the background between white and black to create a flickering, animated effect.

YYannael

61% match