Francesco Di Filippo

@pankus·8 public vizzes

Fork of Sample_Leaflet_scrollytelling2

This example demonstrates a scrollytelling interaction where scrolling through text sections triggers corresponding map views in a fixed panel. It uses a scrollable column with content sections and a fixed column containing a Leaflet map, along with hidden alternative fixed content. The JavaScript listens to scroll events on the scrollable column, checks section visibility with `getBoundingClientRect()`, and calls `map.flyTo()` to animate the map to different coordinates and zoom levels for each section. The map itself uses Leaflet with CartoDB Voyager tiles, and the interaction is built with vanilla JavaScript and CSS, without additional frameworks like React.

Mar 11, 2024

Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

Mar 9, 2024

Loading thumbnail…

Fork of Sample_Leaflet_columnsFly

This example demonstrates a linked interaction between an HTML list and an interactive Leaflet map. Hovering over list items triggers the map to fly between two distinct geographic locations using the `map.flyTo` method. The visualization pairs a simple, unstyled list with a CartoDB Voyager tile layer rendered via the Leaflet JavaScript library. The code shows how DOM events, such as `mouseover`, can directly control map animations, offering a lightweight pattern for coordinating non-spatial UI elements with geospatial views. The map is initialized with a center point and zoom level, and the interaction resets colors after a short delay.

Mar 8, 2024

Loading thumbnail…

Sample_Leaflet_columns

This example pairs an interactive Leaflet map with an HTML list to demonstrate coordinated highlighting. The left column contains list items, while the right column shows a CartoDB basemap centered on Syria. Hovering over a list item triggers the map to fly to a corresponding geographic location, such as zooming to a specific point near Crete. The code uses Leaflet’s `flyTo` method and the map’s tile layer from CartoDB’s Voyager style, with mouse events on the list elements controlling the map’s view.

Mar 8, 2024

Loading thumbnail…

Sample_Leaflet_starter

This example displays a map centered on a region in Syria, with an overlay of a list of three text items. It shows a map visualization using the Leaflet JavaScript library, with CartoDB’s Voyager tile layer providing the basemap. The page layout is constructed with HTML and CSS flexbox, placing the map and the list side by side. The code initializes the map with a specific latitude and longitude, sets the zoom level, and adds the tile layer. No interactive features are demonstrated beyond the static map display, and the list items are placeholders without associated map interactions.

Mar 8, 2024

Loading thumbnail…

Sample_starter

A minimal HTML starter page displays a static blue square on a white SVG canvas. The page uses plain HTML, CSS, and JavaScript without any external libraries or data fetching. It renders a single `<svg>` element with a fixed 960×500 viewBox, containing a `<rect>` positioned via hardcoded coordinates. No interactivity or animation is present; the example serves only as a baseline template for creating simple SVG-based visualizations.

Mar 8, 2024

Loading thumbnail…

Sample1

A bubble chart displays the world's most spoken languages, with circle positions and sizes encoding total speakers and native speaker counts. Ten languages load sequentially with animated growth, and hovering enlarges a bubble while showing its name in a tooltip. The visualization uses D3 v7 selections and transitions to animate circle radii, with an SVG rendering on a light green background. Data is embedded in the source as static objects.

Mar 8, 2024

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3 -.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js. It renders a full-screen SVG with horizontal and vertical stripes defined by mask elements, producing the flag’s red and blue regions through layered rectangles. Fifty white star symbols are positioned in a grid within the canton area, using D3’s symbol generator. The piece demonstrates how algorithmic composition and masking techniques can construct a recognizable national flag from basic geometric primitives.

Feb 27, 2024