SassOnTheRoad

@SassOnTheRoad·8 public vizzes

Spotify Playlist Generator

This visualization lets users search for albums or artists through the Spotify Web API, displaying album covers that play 30-second track previews on click. It also generates a playlist table by reading artist names from a CSV file, querying each artist via the API, and compiling their top tracks into sortable columns. The interface uses jQuery for AJAX requests, Handlebars.js for templating, and custom CSS for styling.

Feb 10, 2022

Loading thumbnail…

The code in this gist isn't as succinct as I'd like it to be. Please bare with me and ask plenty of questions that you may have about it.

This example implements a minimal blockchain visualization server using Flask, exposing endpoints to submit transactions, retrieve the current chain, and mine new blocks. The code defines a Block class with SHA-256 hashing and a proof-of-work algorithm that increments values until divisible by 9 and the previous proof. It includes consensus logic to compare chain lengths across peer nodes via HTTP GET requests. The visualization aspect is limited to JSON responses of block data, with no graphical rendering or front-end library in use.

Jul 23, 2017

Loading thumbnail…

Gist 83b992dc85e966c5da1755c8630ce330

This example demonstrates a simple blockchain implementation in Python, showing how twenty blocks are sequentially chained together after the genesis block. The code defines a `Block` class that uses the `hashlib` library’s SHA-256 hashing algorithm to compute each block’s hash from its index, timestamp, data, and the previous block’s hash. Using the `datetime` module to timestamp each block, the script prints the index and hash of each newly added block, illustrating how the cryptographic chain grows and verifies its integrity.

Jul 16, 2017

Loading thumbnail…

Population Density of London Boroughs

The scatterplot shows the population density of London boroughs by plotting each borough's population (x-axis) against its area in hectares (y-axis) as animated circles that drop into place. The visualization uses D3 v3 to read the CSV data, applies linear scales for both axes, and employs the `d3.csv` parser and `d3.svg.axis` for the chart. Each circle is rendered as an SVG element, with a hover effect that turns it CornflowerBlue. Data is sourced from data.london.gov.uk, and the animation uses sequential delays to drop the circles over two seconds.

Apr 19, 2015

Loading thumbnail…

SVG Example

A hand-drawn stick figure and two text prompts occupy a static SVG canvas, while a D3.js v3 script loads London Borough Profiles data without performing any visible data binding or visualization. The page renders fixed shapes—lines, ellipses, and text—directly in HTML `<svg>` markup, with no dynamic updates from the CSV file. The example demonstrates raw SVG element creation and D3’s `d3.csv` callback interface, though the loaded population and hectare values remain unused in the displayed output.

Mar 29, 2015

Loading thumbnail…

Data Visualization and Infographics with D3, Module 2, Exercise 1

This example displays a single static blue circle centered within a small 50 by 50 SVG canvas, using a gray outline and a two-pixel stroke. It serves as a minimal demonstration of primitive SVG shape construction, where the circle is positioned via explicit `cx` and `cy` attributes and sized with an `r` radius. The visualization uses the standard D3.js library, though the code relies directly on raw SVG elements rather than D3-specific data joins or scales. The rendering approach is entirely declarative, showing how a basic geometric mark can be encoded directly in an HTML file without external data sources or interactive behavior.

Mar 23, 2015

Loading thumbnail…

London Borough Profiles Small

This bar chart visualizes population estimates for London’s boroughs using a simple horizontal layout, with each bar’s width proportional to its population value. The population data is loaded from a local CSV file via `d3.csv`, then sorted and scaled using `d3.scale.linear` to map values to pixel widths. Bars are rendered as styled `div` elements inside a `.chart` container, with counts displayed as text labels. The example uses D3 v3 and relies directly on the CSV’s `pop` field, sourced from the London Borough Profiles dataset under the UK Open Government Licence.

Mar 23, 2015

Loading thumbnail…

London Borough Profiles

This visualization displays employment trends across London boroughs from the London Borough Profiles dataset, with each borough shown as a separate small-multiple area chart. The code uses d3.csv to load data, d3.nest to group by borough, and d3.time.scale and d3.scale.linear for axes. Each SVG chart renders an area and line path using d3.svg.area and d3.svg.line, with text labels identifying each borough.

Mar 22, 2015