fabiovalse

This experiment creates a layout for navigating a set of images belonging to different groups (Abstract, Animals and People).

Initially, only the group containers are shown while after zooming in, images appear. First they are rendered as rectangles colored with their dominant color. Then, a certain zoom level images are loaded.

In order to improve performances, rectangles and images are removed from the DOM when they are not in the viewport the user is looking at.

Images have been downloaded from Lorempixel.com.

fabiovalse

This gist extracts the dominant color of an image using the Javascript color-thief library. By refreshing the gist an image is randomly picked among ten abstract images downloaded from Lorempixel.com.

The colors returned are good. Unfortunately, the library does not work using remotely hosted images.

fabiovalse

fabiovalse

This gist shows the vectorized version of the first three panels of the "Kunyu Wanguo Quantu".

Use imagemagick for converting the jpg file into a bitmap.

convert ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.jpg ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.bmp

The potrace tool is then used to vectorize the bitmap.

./potrace -k 0.2 --svg ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.bmp -o ../Kunyu_Wanguo_Quantu_by_Matteo_Ricci_Plate_1-3.svg

Look at

fabiovalse

/**
 * Copyright 2015 Teralytics AG
 *
 * @author Kirill Zhuravlev <kirill.zhuravlev@teralytics.ch>
 *
 */
(function(factory){if(typeof define==="function"&&define.amd){define(["leaflet","d3"],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory(require("leaflet","d3"))}else{factory(L,d3)}})(function(L,d3){if(typeof d3=="undefined"){throw"D3 SVG Overlay for Leaflet requires D3 library loaded first"}if(typeof L=="undefined"){throw"D3 SVG Overlay for Leaflet requires Leaflet library loaded first"}if(L.version>="1.0"){d3.select("head").append("style").attr("type","text/css").text("g.d3-overlay *{pointer-events:visiblePainted;}")}L.D3SvgOverlay=(L.version<"1.0"?L.Class:L.Layer).extend({includes:L.version<"1.0"?L.Mixin.Events:[],_undef:function(a){return typeof a=="undefined"},_options:function(options){if(this._undef(options)){return this.options}options.zoomHide=this._undef(options.zoomHide)?false:options.zoomHide;options.zoomDraw=this._undef(options.zoomDraw)?true:options.zoomDraw;r

fabiovalse

fabiovalse

A node-link diagram running a javascript implementation of the Dijkstra algorithm. Every time the visualization is refreshed two nodes are selected as start (in red) and end point (in blue). Then the shortest path is computed and shown on the diagram by highlighting the edges.

fabiovalse

Multiple SVGs are loaded, then overlayed onto each other to give the illusion of controlling the section plane of a 3D model. Use the control on the right to switch floor.

Edit: the 300ms tap delay that some browsers apply caused a bug on multitouch-enabled devices. It was solved by adding this meta tag to the HTML index:

<meta name="viewport" content="width=device-width">

(source)

A polyfill to handle this unwanted behavior is also available.

fabiovalse

This example shows how to import an external SVG file into a web page. Furthermore, the D3 zoom bahaviour can be used for zoom in/out the image.

fabiovalse

Black dots represents italian oil pumps.