gaz_ukr

100%

✓ Published0🌍 Public

Last edited Jun 17, 2014

Created on Jun 17, 2014

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.

AI-generated description

Similar vizzes

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.

MMraleksa

95% match

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.

MMraleksa

77% match

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.

MMraleksa

67% match

Loading thumbnail…

Ukraine Events

This visualization maps Ukraine conflict events on a dark, stylized basemap using OpenLayers with a Stamen toner-lite layer, inverted for a moody aesthetic. React manages the map lifecycle and data loading, fetching GeoJSON coordinates via D3's `json`. Each event is rendered as a glowing, soft-edged sprite on a Canvas, generated by a radial gradient in `generateSprite.js` with a Cubehelix color scale, creating a firefly-like cartographic effect. The map automatically removes layers on component unmount.

CCurran Kelleher

67% match

Loading thumbnail…

D3 Bar Chart

This example visualizes natural gas consumption by the electric power sector across eleven U.S. states, using a horizontal bar chart where each bar’s length encodes the consumption value in billion BTU. The chart is built with D3.js (v7) and rendered as SVG, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Each bar is labeled with its exact value, and the plot includes a title and axis labels. The data comes from the included `data.csv` file.

Mmariahdiaz

66% match

Loading thumbnail…

Gas report

This visualization presents a layered line chart comparing gas consumption amounts and fuel efficiency (mpg) over time. The data is loaded from a GitHub-hosted CSV file using `d3.csv`. The chart uses two overlaid line marks with independent y-axes, created via the Vega-Lite API’s `vl.layer` and `resolve` functions. Both layers encode date on the x-axis and tooltips on the data fields. The visualization is rendered with Vega-Lite, using a custom config for axis styling and colors.

Rrohame

66% match

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.

MMraleksa

66% match

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.

MMraleksa

65% match