Munisbek-design

@Munisbek-design·7 public vizzes

Fork of Waste-Aggregation by gates

This interactive map visualizes waste aggregation data for buildings in Ward 61, Mumbai, using Leaflet for the base map and D3.js (d3.v5) to fetch GeoJSON data from a GeoNode server. Orange circle markers represent buildings, each with a popup showing population and waste metrics (dry, wet, and total). A linked dataset from a JSON file maps gate IDs to building numbers, allowing the visualization to likely highlight buildings associated with a specific gate by recoloring them black, as demonstrated in the styling function.

Oct 6, 2022

Loading thumbnail…

THE SVG WIZARD

This engaging visualization presents the face of Curran from a YouTube video, using a portrait pathway turned into a scalable, interactive SVG illustration. The author crafted the image path using GIMP's `To Path` feature, manually fixing the vector data before embedding the complex path `d` attribute into an HTML document. The visualization employs inline SVG with CSS transitions to create a playful hover effect: the face smoothly scales via `transform: scale()` over two seconds, then expands further on mouse hover. This example showcases the meticulous hand-tracing of a digital image into a lightweight, scalable vector graphic that invites interaction.

Oct 6, 2022

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a bubble map and a date histogram to explore migrant deaths and missing persons. The map displays circles sized by the total dead and missing using a square-root scale, while the histogram aggregates monthly totals. Brushing on the histogram filters the map’s displayed data in real time. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projection, `brushX` for selection, and pre-processed CSV data from the Missing Migrants Project.

Oct 6, 2022

Loading thumbnail…

1-mashq

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and swapped over time using D3.js data joins. The code defines a fruitBowl function that binds fruit data to SVG circle and text elements, using `scaleOrdinal` for color and radius mapping. State changes trigger re-renders at timed intervals: initially five apples appear, one is eaten, a lemon replaces an apple, and another apple is removed. The bowl itself is a rounded rectangle, with fruits positioned horizontally across the SVG canvas. The example uses D3 v5 with modern ES module imports and SVG rendering.

Oct 6, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG scene depicts a stylized sunset over layered, rolling hills. The sky—a large `<rect>` with a gradient—transitions from aliceblue to indigo over 15 seconds, while a single `<circle>` representing the sun moves downward and back upward along its `cy` attribute. Two landscape `<path>` elements, filled with corresponding `linearGradient`s, also shift their colors in sync. The animation is driven by SMIL `<animate>` elements, not JavaScript or external libraries.

Oct 6, 2022

Loading thumbnail…

Fork of map exemple

This choropleth map visualizes world population estimates for each country, with a color scale ranging from light red to dark red. The map renders geographic boundaries using `d3.geoPath` with a Mercator projection, and supports zooming via `d3.zoom`. Population data comes from a TSV file and country shapes from TopoJSON, both sourced from the world-atlas package. Countries display hover effects through CSS, changing fill color to purple, and show country names via SVG `title` elements.

Oct 6, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational concepts of SVG fundamentals through a minimal HTML page that combines CSS and JavaScript. It renders a static message, “Hello HTML!”, centered within the browser viewport using a large 13em font size styled via CSS. The page uses plain HTML markup with inline `<style>` and `<body>` elements to show how text formatting and layout work without external libraries or frameworks. The code highlights the simplest rendering approach possible—no SVG graphics, data bindings, or interactive elements—serving as a bare-bones starting point for understanding web visualization structure.

Oct 6, 2022