YasufumiSaito

@YasufumiSaito·4 public vizzes

fresh block

A simple animation demonstrates D3.js state changes using the `.transition()` and `.ease("bounce")` methods. A single SVG rectangle initially styled with a dark red fill (`#a72d1a`) transitions over three seconds to a light blue (`#5db9e3`). The example uses D3 3.5.5 and renders directly to an SVG element that fills the viewport. A console log confirms the D3 library is loaded. The code originates from a gist built with Blockbuilder.org and shows a minimal, self-contained transition without additional data or interaction.

Jan 20, 2016

Loading thumbnail…

MapBoxGL+D3 Practice

This choropleth map displays the population distribution across Japan's prefectures, overlaying colored TopoJSON regions onto a Mapbox GL base map. The visualization uses D3.js v3 for rendering the geographic paths as SVG elements, with a color scale mapping population values from light yellow to dark blue against a linear legend. Mapbox GL handles the interactive map navigation, while custom D3 projections and event listeners synchronize the SVG overlay with map movements, including a tooltip that shows prefecture names and population data on hover.

Jan 6, 2016

Loading thumbnail…

a-frame + d3 test

A circular field of 50 colored cylinders rises from the ground around a camera in a 3D scene built with A-Frame, using D3.js to bind random data to the scene’s DOM elements. The bars enter and update via D3’s selection and transition API, with their height scaled by a linear scale and color mapped across four color stops. D3’s transition method animates each cylinder’s height over 7 seconds with an elastic easing, while A-Frame’s cursor and lighting components handle interaction and rendering.

Dec 19, 2015

Loading thumbnail…

Here are some things you can do with Gists in GistBox.

This gallery example showcases GistBox, an application for organizing GitHub Gists. It demonstrates the versatility of Gists by storing three different file types: JavaScript code, a Ruby quicksort function, and Markdown documents. The interface displays a recipe and keyboard shortcut documentation, while the code examples highlight how developers can reuse and retain code snippets. The visual layout presents these gists as an organized collection, emphasizing Gists as a tool for code remembrance and documentation.

Sep 25, 2013