M

Mraleksa

@Mraleksa·32 public vizzes

Loading thumbnail…

Orbits 3

Orbits 3 is an animated, scroll-driven visualization of political connections in Ukraine, centered on Petro Poroshenko and featuring named figures like Iryna Lutsenko and Ihor Kononenko. The hierarchy is presented as a dynamic orbital layout, where nodes orbit their parent in concentric rings, with portraits of individuals loaded from static.rada.gov.ua URLs. The D3.js layout, defined in d3.layout.orbit.js, uses a custom tick function to update node positions, while graph-scroll.js handles scroll-based transitions between sections. The SVG rendering is powered by d3.layout.pie for angular distribution and setInterval for animation.

Loading thumbnail…

Orbits 3

The visualization presents a scrolling narrative about notable film director-actor partnerships, with a fixed, orbit-style network diagram displayed alongside. The SVG graph depicts nodes and connections, though the specific data relationships are loaded from a local `flare.json` file. The page uses D3.js (version 3.5.5) to render the SVG, and a custom `d3.layout.orbit.js` script for the graph layout. A `graph-scroll.js` script controls the fixed graph position, highlighting the active text section as the user scrolls.

Loading thumbnail…

Orbits 3

A scrolling narrative pairs text sections with a fixed orbital node-link diagram built with D3.js. As the user scrolls, the active text section highlights while the graph animates between hierarchical layouts using the `d3.layout.orbit` plugin. The SVG visualization renders categories from a JSON file, colored via `d3.scale.category20b`, and uses the `graph-scroll.js` library to synchronize scrolling with the chart’s state changes.

Loading thumbnail…

fresh blockhtuj!!!!!!!

This example loads a Google Sheets document by ID and renders its contents as a screen-filling visualization. The page uses the Vue framework and D3 v4, with a bundled JavaScript file that likely processes the spreadsheet data. The visualization draws on a dark gray background, and the code includes references to D3’s force simulation and node/edge rendering APIs, suggesting a network or graph layout driven by the sheet’s rows and columns. The exact visual output is not clear from the source alone.

Loading thumbnail…

fresh blockhtuj!!!!!!!

This example displays a randomized, canvas-based visualization built with Vue and D3 v4. It initializes a force-directed layout using `d3.forceSimulation`, though the visible output is a static pixel pattern. The block loads data from a Google Sheets document and renders it into a `<div>` on a gray background. The code bundles dependencies with `bundle.min.js` and relies on D3’s standard API for sizing and styling.

Loading thumbnail…

fresh blockhtuj!!!!!!!

A clustered visualization displays a dense network of interconnected nodes, likely representing data from a Google Sheets source, rendered on a dark gray background. The visualization uses a force-directed layout, implemented with D3 v4's `d3.forceSimulation`, to position the nodes and their connecting links. The entire application is built within the Vue framework, with the compiled logic residing in `bundle.min.js`, which also includes ASN.1 encoding utilities for data parsing. The nodes and edges are drawn directly in the browser, forming an organic, web-like structure that emphasizes the relationships between data points.

Loading thumbnail…

Відкрито набір учасників Тренінгу для Тренерів із закупівель

A network visualization of participants in a procurement trainer recruitment drive uses a force-directed layout. The graph shows nodes and connections, with colored clusters suggesting different groups or regions. Built with D3 v4's `d3.forceSimulation`, the visualization is rendered in a Vue.js framework, pulling data from a Google Sheets document. The interface includes a legend and interactive elements for exploring the relationships between trainers, likely illustrating the distribution of applicants across various categories.

Loading thumbnail…

fresh block

This example shows a blank SVG canvas with a single text message prompting the user to edit the code. The visualization renders a 960-by-500-pixel SVG element using D3 v4, appending a monospace-styled text node via `d3.select` and `svg.append`. The code uses static attributes and style properties rather than data-driven joins or interactivity, serving as a minimal starter template for Blockbuilder projects.

Loading thumbnail…

fresh block2

This example displays a single static SVG canvas containing the text “Edit the code below to change me!” positioned near the center. The text is styled with a monospace font at 36 pixels, rendered on a 960-by-500 pixel SVG using a minimal D3 v4 setup. The code appends the SVG element via `d3.select` and uses `.append("text")` to place the message, with no interactive or dynamic behavior beyond the initial rendering. The source is a straightforward Blockbuilder starter template.

Loading thumbnail…

fresh block

Minimal placeholder visualization shows a single line of fixed sample text rendered to an SVG canvas. The page uses the D3 v4 library to append a 960×500 SVG element to the body, then adds a text element with the message "Edit the code below to ftftgy change me!" positioned near the top. Styling sets the font to a 36-pixel monospace face, while the body margin is zeroed and fixed to fill the viewport. No data source or interactive behavior is present; the example serves as a starting template for editing in Blockbuilder.

Loading thumbnail…

fresh block

This example presents a horizontal bar chart comparing Ukrainian state-owned companies across seven categories, showing both the count of companies and their total revenue in billions of hryvnias. The visualization uses a small multiples layout created with d3 v4, nesting the tab-separated data by type and rendering each group as a separate SVG panel with scaled rectangles. A custom tooltip displays exact values on hover, while d3.swoopyDrag adds draggable annotation paths and text labels to highlight contextual insights.

Loading thumbnail…

Tangle document

This example uses the Tangle library, created by Bret Victor, to build an interactive document where a numerical value can be adjusted by dragging. The code sets up a model with two variables, `china` and `met`, and links an adjustable number in the text to update the metal price display based on a formula. The interaction relies on Tangle’s `TKAdjustableNumber` class and its supporting `BVTouchable` library for mouse and touch events.

Loading thumbnail…

Tangle document

This interactive document demonstrates how fuel prices in Ukraine are derived from oil prices and the euro exchange rate. Using the Tangle library, the page displays a sentence where key numbers are draggable, allowing viewers to adjust input values and see the computed gasoline price update in real time. The implementation relies on Tangle's `TKAdjustableNumber` class for the interactive sliders, while the calculation logic runs in a custom Tangle model using the `Math.round10` utility. JavaScript libraries include Tangle, MooTools, and the BVTouchable touch-event handling system.

Loading thumbnail…

efce

This example presents an interactive counter that increments each time a user clicks on a block of Russian text, which asks how many deputies have been found who voted for “dictatorial laws.” Built with jQuery and D3.js v3, the visualization relies on a simple click handler attached to the `<div class="y">` element, updating the displayed number in the `<span id="counter">` using the `.html()` method. The counter starts at zero and increases by one per click, with no external data source or additional rendering logic beyond the textual interface.

Loading thumbnail…

force

This visualization shows a force-directed network of labeled nodes, where each node’s size is scaled by a `words` value and its color is assigned by the categorical `fill` scale. Two buttons let the viewer switch the layout between figures centered on "Янукович" or "Путин." The code uses `d3.v3` with an SVG rendering, and the layout is driven by an implicit physics simulation (likely via a custom force loop, as no `d3.forceSimulation` call is present). Node positions depend on shared data fields (`poroh`, `yanyk`, `huilo`), suggesting these influence attraction or repulsion.

Loading thumbnail…

tftf

This example presents an interactive counter that tracks how many deputies a user has identified as having voted for dictatorial laws. The page displays a counter in Russian, starting at zero, and increments the displayed number each time a user clicks on an element with the class `y`. The implementation uses a jQuery click handler bound via `$(document).ready` to update the counter’s HTML content, while the counter element itself is styled with inline CSS. The data is not sourced from a file; instead, it relies entirely on user interaction within the static HTML page.

Loading thumbnail…

map_ATO3

This map visualizes the territorial situation in eastern Ukraine during the 2014 anti-terrorist operation (ATO), marking cities controlled by separatists, liberated towns, and recent attack locations. It also plots major regional cities and leader lines for reference. The visualization uses D3 v3 with a Mercator projection and `d3.geo.path` to render Ukraine’s oblast boundaries from a TopoJSON file, while custom SVG circles and labels represent place data. Hovering over map elements triggers a tooltip displaying the corresponding city or village name. The map also includes hexbin overlays and contextual annotations in Russian.

Loading thumbnail…

ATO3

A geographic visualization of territory in Ukraine maps the progress of the "ATO" (Anti-Terrorist Operation). The map displays the location of settlements controlled by separatists, recent liberated cities, and the sites of the latest attacks, with the user able to hover over marked cities or hexagons to reveal names in tooltips. The project uses d3.v3 with a Mercator projection and d3.geo.path to draw the map, while d3.hexbin renders a hexagonal overlay, and d3.select appends SVG elements for rendering.

Loading thumbnail…

slav

This visualization maps the territorial control of Ukrainian forces and separatists around Slavyansk in July 2014, using a chronological series of annotated narrative text blocks. It displays a static SVG map of Ukrainian oblasts, with the Donetsk region highlighted, overlaid with dated, descriptive event updates that incorporate images and tooltips. The application loads GeoJSON-like topology data to render maps via the `d3.geo` API, while text annotations are positioned absolutely within the HTML. Animation and interactivity are absent, instead relying on fixed spatial storytelling with the `d3` library and its `topojson` module for geographic projection.

Loading thumbnail…

slav

This example presents a chronological, map-based narrative of military events around Sloviansk, Ukraine, from July 1–5, 2014. It combines a static SVG map of Ukrainian regions with overlaid text annotations and photographs positioned along the page. The map is rendered from TopoJSON data using D3’s geographic projection and path generators. Scrolling and hovering trigger tooltips and animated transitions, while D3’s hexbin plugin and queue library are loaded but not visibly applied in the displayed code.

Loading thumbnail…

ATO2

A map of eastern Ukraine during the July 2014 ATO displays a hexbin overlay of armed confrontations and locations from a CSV dataset. The visualization uses a Mercator projection with d3.geo.path to render the region’s topojson boundaries. A d3.hexbin layout groups incident coordinates, with each hexagon’s size reflecting the count of events. Hovering over the hexagons reveals the name of the corresponding town or village via a tooltip.

Loading thumbnail…

карта АТО2

This map visualizes the locations of liberation efforts and conflict sites during the 2014 Anti-Terrorist Operation in Ukraine. It plots a dataset of place names and coordinates onto a region map, using red and orange squares to indicate different statuses, such as liberated or in-progress. Tooltips reveal place names on hover. The visualization is built with D3.js version 3, using `d3.geo.mercator()` for projection, `d3.geo.path()` for rendering the geographic data from a TopoJSON file, and `d3.hexbin()` as part of the process, with SVG rendering for all elements.

Loading thumbnail…

возобновление ато

This visualization maps attacks on Ukrainian forces during the "ceasefire" period of June 20-30, 2014, using a Mercator projection of eastern Ukraine. Circles on the map encode the date, location, and casualties (killed, wounded) of each incident from the CSV dataset. A draggable timeline slider filters events by day, and hovering over a circle displays its attack description in a tooltip. The map is drawn with `d3.geo.path` from a TopoJSON file of Ukrainian oblasts, with animations and transitions handled by the D3 v3 library.

Loading thumbnail…

ATO2

This interactive map visualizes attacks on Ukrainian forces during a unilateral ceasefire from June 20-30, 2014, with each incident plotted as a circle on a Mercator projection of Ukraine. The map uses a draggable slider to filter events by day, while hovering over a circle reveals the attack description via an HTML tooltip. It renders with D3.v3, using `d3.geo.path` for the TopoJSON boundaries and `d3.csv` to load the incident data, which includes coordinates, casualties, and text descriptions. The color of each circle encodes the day of the attack, and circles are sized by the number of killed and wounded.

Loading thumbnail…

ATO

This map visualizes attacks on Ukrainian forces during a unilateral ceasefire from June 20–30, 2014, using a slider to animate events by day and location. A static SVG map of Ukrainian oblasts, rendered via `d3.geo.path()` with a Mercator projection, is layered with circles and text annotations; hovering over a point triggers a tooltip with attack details. The visualization uses `d3.csv()` to load the dataset and `d3.forceSimulation` for the interactive slider, with colors encoding the date range. The map is built using TopoJSON and SVG animation, while the background annotation provides narrative context.

Loading thumbnail…

gaz_map

This interactive map visualizes changes in Russian gas transit routes to Europe across four scenarios, using buttons to toggle between years 2006, 2013, and projected states. Animated SVG paths trace pipelines like Nord Stream and South Stream, with a tooltip and explanatory text panels. The visualization uses D3 v3 with `d3.geo.path` for geographic rendering and TopoJSON for world country boundaries, while colored lines and CSS-styled buttons drive the scenario switching.

Loading thumbnail…

gaz_ukr

This visualization presents the state of natural gas consumption in Ukraine over the past nine years, breaking down total usage, import sources, and consumer sectors. The interface allows a user to drag a circular handle to adjust the volume of Gazprom gas, revealing the projected impact on Ukraine’s energy balance. Built with D3 v3, the graphic uses SVG for its map and charts, an animated slider mechanism, and axis annotations to compare scenarios. The data is displayed through custom annotations and dynamic charts, drawing on several D3 modules like `d3.scale.linear` and `d3.select` for rendering.

Loading thumbnail…

gaz_ukraine4

This interactive visualization, built with D3 v3, displays Ukraine’s natural gas consumption, supply sources, and export patterns over the past nine years using SVG and animation. It features a slider to adjust the volume of Russian gas imports and shows the resulting effects on consumption and reverse-flow supply from Europe. The page includes annotated sections with historical context and uses linear scales, axes, and drag-and-drop interaction for the slider. Data is embedded directly in the code, with text annotations in Russian explaining the geopolitical implications.

Loading thumbnail…

Альтернативные кандидаты

This interactive visualization compares political speeches by Ukrainian and Russian leaders using a force-directed graph layout. The piece presents a narrator’s textual annotations alongside the named candidates—Petro Poroshenko, Viktor Yanukovych, and Vladimir Putin—with buttons that switch between their associated content. Built with D3 version 3, the visualization employs `d3.forceSimulation` for node positioning, SVG rendering for the graph elements, and a custom tooltip system for additional context. The underlying data is embedded directly in the HTML, comprising excerpts of speeches and annotations that shift based on user selection.

Loading thumbnail…

Альтернативные кандидаты

This interactive visualization compares political speeches by Ukrainian and Russian leaders using a force-directed graph layout. The piece presents a narrator’s textual annotations alongside the named candidates—Petro Poroshenko, Viktor Yanukovych, and Vladimir Putin—with buttons that switch between their associated content. Built with D3 version 3, the visualization employs `d3.forceSimulation` for node positioning, SVG rendering for the graph elements, and a custom tooltip system for additional context. The underlying data is embedded directly in the HTML, comprising excerpts of speeches and annotations that shift based on user selection.

Loading thumbnail…

Альтернативные кандидаты

This visualization presents the 2014 Ukrainian presidential election as a network of alternative candidates, using a force-directed graph layout. The renderer is D3.js v3, with the `d3.forceSimulation` API driving node placement and SVG paths for the links. The interface includes interactive tooltips and fixed annotations. The data appears to be derived from a gist, and the graph styles edges to distinguish between candidate relationships, such as management or shareholder connections.

Loading thumbnail…

Gist 9438552

This example shows a force-directed network graph of patent disputes and licensing agreements among technology companies. Node labels and link types distinguish lawsuits, licensing deals, and resolved cases through distinct colors and arrow markers. The visualization uses D3.js v3 with the force layout (`d3.layout.force`) and SVG rendering. Data is hardcoded manually, with an elliptical arc path (`linkArc`) that doubly-encodes directionality and arrowhead markers defined per link type. Drag interaction is enabled on nodes via `force.drag`.