This gist shows how to use the basic search function of DefiantJS. On the left a textbox allows to write and apply XPath expression on the JSON data structure shown on the right (HighlightJS has been used for JSON highlighting). The result of valid XPath expression is shown on the left under the textbox.
Some examples of possible XPath expressions:
//children//children[name="cluster"]//children[name="cluster"]/children//children[name="cluster"]/children/value
This gist shows how to use HighlightsJS. A JSON structure is shown in a <code> tag using one CSS highlighting style made available by the library. JSON.stringify() has been used for prettifying JSON data.
This gist shows a political map of Italy. It represents a baseline for constructing more sophisticated map such as choropleth or geographic bubble maps.
The visualization shows regions, provinces and towns (i.e., comuni). The level of detail of the map changes on zoom. Labels of administrative area are loaded according to zoom level in a way that tries to avoid collision and overcrowding.
In order to improve the visualization performance, a viewport filtering technique has been adopted. The SVG objects visible to the user are rendered while the ones outside the viewport are filtered out from the DOM.
2016 administrative boundaries have been downloaded from ISTAT archive. The following procedure shows how to obtain a topojson file containing towns, provinces, regions and country data together and mantaining their metadata.
## Installing topojson & ogr2ogr
This sankey diagram allows to analyse the stability of the graph partitioning technique used for displaying Isolario data.
Blue bars represent graph partitions and encode the amount of ASes they contain. Bars are placed in rows that represent days. Hence, each row summarizes the status of the ASes in a specific day. Links show the amount of ASes moving from one partition to another in two subsequent days.
The graph partitioning technique seems to be quite stable since:
(The data set represented covers a time period of 6 months, from March 1 to September 16)
This stacked bar chart shows the bike availability data of one CicloPI station. On the x-axis hour slots are displyed. On the y-axis the values of free bikes (green), empty (gray) and unavailable slots (red) are represented with stacked bars. The values of the three category has been computed as a weighted sum.
Suppose that, in a given slot (e.g., 8AM to 9AM), 12 bikes were free for 20 minutes and then 13 bikes were free for the other 40 minutes, the overall value of free bikes has been calculated as (12*20min + 13*40min) / 60 min = 12.66 bikes.
Moreovere, in order to experiment transitions between two set of data, related to different days, a switch button has been added on the top right.
(Due to rounding problems the second set of data presents two stacked bars that do not reach the top line value of 14)
An overview diagram of the solar system. The sun is placed on the left and every planet rotating around it is placed on the right along its own orbit. Some planets, such as Jupiter or Saturn, have in turn moons drawn around them.
The color of the planets indicates the type of celestial body such as terrestrial, gas giant, ice giant, asteroid, plutoid and satellite.
Except the sun, planet dimensions have been computed using the same scale (i.e., power scale with a 0.4 exponent). Also the planet distance from the sun and the moon distance from their primary planet have been calculated using the same scale (i.e., power scale with a 0.33 exponent).
Data have been taken from Wikipedia.
This gist uses the data of the Make me a hanzi repository and shows chinese characters, their properties and the relationships among them.
Images have been taken from https://commons.wikimedia.org/wiki/Category:Ashburnham_Pentateuch.