IsaKiko

@IsaKiko·4 public vizzes

Quick bit of Python code to calculate a 5km travel buffer given as a talk at PyConlineAU 2020!

This example shows a Jupyter notebook presentation comparing a straight-line 5km radius from a Melbourne home with the actual travel distance along road networks. The code geocodes a location using geopy’s Nominatim API, then builds a drivable network with OSMnx and calculates the reachable area using NetworkX and Shapely. An alpha shape polygon represents the true travel buffer, rendered on folium and matplotlib maps. The notebook highlights the discrepancy between Euclidean distance and road-based travel during COVID-19 lockdown restrictions.

Sep 6, 2020

Loading thumbnail…

Rorschach effect and morphing using filter elements

An interactive button triggers a morphing Rorschach-like shape, with a red blob transitioning from a randomized scatter into a heart outline using d3.forceSimulation and an SVG filter that applies Gaussian blur and a color matrix for a gooey merging effect. The animation uses SVG circles bound to data points, animating their positions smoothly as the filter creates organic, fluid distortions. The code relies on d3.v4 for simulation and transitions, with the filter defined as an SVG `<filter>` element.

Aug 31, 2017

Loading thumbnail…

SVG inline only Gooey Effect

The example demonstrates a gooey effect in SVG, where multiple pairs of circles merge and separate with a smooth, organic visual transition. A clickable button triggers transformations that animate the circles’ positions, while paired goop paths dynamically generate stretched, fluid-like connections based on the distances and radii of each circle pair. Built with D3 v4, the visualization uses custom functions `goopGen` and `goopTransform` to compute path geometries, along with SVG attributes and D3’s data-binding capabilities to render the interactive animation. The code defines three circle pairs with specified coordinates and keys, all rendered in a 100x100 viewBox.

Aug 27, 2017

Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates how Sass preprocessing turns SCSS source code into standard CSS, using the SassMeister.com web tool. The input SCSS defines a `solidblock` mixin that mixes a background color with white at 40%, then applies it to `.block` and `.block-blue` classes, resulting in rendered HTML blocks with gray and white backgrounds. The snippet also shows nested selectors with a hover pseudo-class and a `$primary-color` variable. The CSS output and rendered HTML are displayed alongside the original SCSS and HTML files, illustrating the compilation pipeline from gist-embedded input to final styled output.

Mar 26, 2015