fresh block

100%

✓ Published0🌍 Public

Last edited Apr 15, 2016

Created on Apr 15, 2016

This visualization uses the p5.js library to draw a field of translucent cyan circles on a blue background, layered with a fixed line of text. It loads live weather data from the OpenWeatherMap API for Moscow, Russia, and uses the reported humidity percentage to control the alpha transparency of the circles. Each circle’s position is randomly generated on every frame, creating a subtle shimmering effect as the drawing updates continuously.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5df40d75ef05f4b557973f56e67f55d2'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/7c590fd63e4a7c0129ee508d20181a9b'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/b0e764c122ca3925cc3b057ae9b0e92c'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/a81fa246e7199958b21fd41371e50690'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5e6777c3d0c0010c414d5ae10ddd8201'>fresh block</a>

Similar vizzes

Loading thumbnail…

fresh block

This example uses p5.js to display a collection of semi-transparent circles over a solid blue background. The sketch loads current weather data for Moscow from the OpenWeatherMap API using `loadJSON`, and the humidity value from the JSON response controls the alpha transparency of the circles. A static sentence of text is also drawn on the canvas. The circles’ positions are randomized each frame with `random(width)` and `random(height)`, creating a shifting, dotted pattern whose opacity fluctuates with the weather.

YYannael

93% match

Loading thumbnail…

fresh block

This example uses the p5.js library to display a static block of sample text over a blue canvas. It fetches current weather data for New York City from the OpenWeatherMap API, then extracts the humidity value to control the transparency of 50 randomly placed circles. The drawing function renders the text and ellipses each frame, while the background color remains constant. The data is loaded asynchronously via loadJSON, with the humidity affecting only the circle fill alpha.

YYannael

89% 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

79% match

Loading thumbnail…

OpenFoodFact

A canvas sketch uses p5.js to display a weather visualization based on live data from the OpenWeatherMap API. The code loads current weather for Moscow, Russia via `loadJSON`, then draws 50 randomly positioned ellipses whose fill transparency is mapped to the reported humidity percentage. A static sentence of sample text also appears in the top-left corner. The background shifts to a blue tone, while the alpha of the cyan ellipses varies with the humidity value retrieved from the JSON response.

YYannael

78% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

73% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

73% match

Loading thumbnail…

fresh block

The sketch alternates between a black and a white background every second, layering a small, semi-transparent image at random positions across the canvas whenever the mouse is pressed. It uses the p5.js library, specifically the `preload`, `setup`, and `draw` functions, along with `loadImage`, `image`, `background`, and `millis`. The displayed image is loaded from an external URL, and the random placement is driven by `random(width)` and `random(height)`. The composition shifts abruptly between states, producing a flickering, collage-like effect.

YYannael

73% match

Loading thumbnail…

fresh block

This visualization plots five data points from a static array as green or purple circles on an SVG canvas. Each circle’s x and y coordinates equal its data value, creating a diagonal scatter pattern. The code uses d3.select and append to build SVG elements, with the d3.v4 library handling data binding. Colors are set conditionally: values over 100 appear purple, while all others render green. The circle radius is fixed at 5 pixels.

KKunnyKou

72% match