Skip to main content
SimilarExport ZIP
100%

Gist 3b05ad028ea1cbc56ccb696600b50566

✓ Published0🌍 Public
HHypercubed
Last edited Apr 30, 2023
Created on Apr 30, 2023

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.

AI-generated description

Similar vizzes

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
73% 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
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
65% 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
65% 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…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com
64% match
Loading thumbnail…

Visualization Editor

This visualization editor presents a live scatter plot and line chart showing temperature and humidity data for seven cities, fetched from the Data Canvas Sense Your City API. The scatter plot maps humidity against temperature with lines connecting city-specific series, while the line chart shows temperature trends over time. Users can interact with a configuration editor pane, adjusting visualization parameters through Chiasm’s reactive model, built with D3.js, CodeMirror, and the Inlet library. The runtime loads data continuously in 24-hour intervals, displaying five-minute resolution records with SVG rendering.

CCurran Kelleher
63% match
Loading thumbnail…

Experiment Weather Test 2

A dropdown menu lets the viewer select among seven weather variables, and a line chart displays the selected time series across 20 time steps. The visualization pulls CSV data from a remote GitHub gist using `d3.csv` and parses a column of nested, bracket-delimited values with custom JavaScript string manipulation. Updates to the chart are animated with `transition().duration(1000)`, and the line color changes via an ordinal `d3.scaleOrdinal` with `d3.schemeSet2`. The SVG rendering uses standard `d3.line` and `d3.axisBottom`/`d3.axisLeft` for axes.

Rrxgran
62% match