XavierGimenez

XavierGimenez

'use strict';

var D2R = Math.PI / 180;
var R2D = 180 / Math.PI;

var Coord = function(lon,lat) {
    this.lon = lon;
    this.lat = lat;
    this.x = D2R * lon;
    this.y = D2R * lat;

XavierGimenez

Force-directed graph where a set of qualifiers can be added each node. Useful for cases when the nodes of the network are multicategorical and this has to be represented somehow. Data is a subset of the character coappearence in Les Misérables.

Since the symbols used are external svgs the qualifier can be any visual. Regarding these external svg files some assumptions are made, such having a single 'g' acting as placeholder and having the content within the placeholder centereed around the 0,0 of the 'g' (As these svg are translated and scaled, it is important not to accumulate matrix transformations on the same element in order to achieve the desired effect).

Related bl.ocks

Mike Bostock's example for a force directed graph and Steve Haroz's example for a d3-force testing ground

XavierGimenez

height: 600

XavierGimenez

license: gpl-3.0
height: 600

XavierGimenez

Vega.js example with small multiples, legends amb multiple marks.

By using the mark type group we can facet the data and create small multiples, as this:

"marks": [   
    {
       "name": "rankName2",
       "type": "group",

       "from": {

XavierGimenez

animated timeline

Show age trends through time by animating a timeline, changing opacities, colors and widths proportional to the year within the temporal series. Timeline contains data a regional level, mouseover show national data for the same year and percentage differences between the two series

d3.js recreation of this example of (animated timelines from the flowingData blog)[http://flowingdata.com/2017/07/17/marrying-age-over-the-past-century/], made in R:

XavierGimenez

Parallel sets

Base code (WIP) for a proof of concept of a parallel set with progressive disclosure (drilling down a fixed hierarchy in a flow).

Reusing code (data transformation and alluvial graph) from the Raw project, github here.

Dataset from the Parallel Sets project

XavierGimenez

Custom chart to show the Specialization Index in a series of Universitites

Specialization Index

In bilbiometrics, the SI is an indicator that describes the intensity of research of an entity (e.g., an institution) in a given related field relative to the intensity of the country or world in the same field.

XavierGimenez

license: gpl-3.0