portfolio

w.

I am a data analyst
& visualization engineer
turning your data into
web-based data-driven
visualization projects.

types of
magnitudes


01
Mountains

Magnitudes are displayed in the height of what seems the top of mountains, drawn as a mountain ridge, overlapping their slopes. Useful for few units with high impact on their message.

02
Daisies

The size of each polygon represents the magnitude to be displayed. The polygons follow a round distribution and edges are smoothed with interpolation except for one edge. Colors single out particular values.

03
Force Bubbles

Data entries are associated with each circle, whose radius is proportional to the magnitudes. Circles are stick together through gravitational effects. Useful for large datasets.

04
Force Hexagons

Similar to the force bubbles, this time the circles are subtituted by hexagon shapes. The size of the hexagons is proportional to the magnitudes and color remains another axis of information.

05
Diamonds

A regular distribution of triangles piled up by rows to form a larger triangle. The color of each triangle is associated with a magnitude. Useful for many variables describing a whole status or condition.

06
Treemap

A rectangle is divided into several, smaller rectangles whose size is proportional to the magnitude represented. Useful for budgets and quantities distributed among many sources.

07
Voronoi Diagram

Similar to the treemap, this time the space is divided into a circle. The area of each portion is proportional to the magnitude. This diagram allows clustering by categories.

08
Starry Skies

Two main axis of information pop up in this diagram. One is the size of each rectangle and the other one is the number and size of the starts in each rectangle. Useful for successful cases among many samples.

09
Japanese Waves

While the size of the circles remains constant, the color allows the representation of magnitudes, and even the circle distribution allows temporal evolution.

10
Spider Diagram I

Each of the axis is proportional to a particular magnitude. This diagram allows several magnitudes to be displayed simultaneously and an easy comparison between cases.

11
Spider Diagram II

Similar to the spider diagram, the transparency and smoothness of the edges allows the comparison between different scenarios in a layered distribution of the polygons.

12
Anemone

Flows of quantities are easily represented in this diagram, from a common source to a wide variety of possibilities and branches. Thickness and color allow the magnitudes to pop up.

13
Spirals

Thickness and length of the branches represent the magnitudes to be displayed. The compact representation of information gieves an overall sense of density that help single out particular values.

14
Small Multiples

Simple shapes repeatedly displayed in regluar spatial distribution allows the analysis of many variables. The shape and color of each element shows the magnitudes.

15
Stacked Dots

Each magnitude is represented through the discretization and accumulation of dots. Color adds differenciation between different categories. Large quantities can be displayed. Useful for comparisons.

16
Oriented Bubbles

Horizontal or vertical distribution of force bubbles, that allow better understanding and inspection of particular samples. Better understanding of the whole dataset built by the groups of bubbles.

types of
time series


17
Lines in Cartesian Axis

The classic two-axis representation of two variables and their relationships. Thickness, transparency and color add additional axis of information. Useful in all senses for several magnitudes.

18
Areas in Cartesian Axis

Areas in cartesian axis represent the integral or sum below the lines, when the magnitudes demand volume to provide information. Again, transparency and color allows several magnitudes to be displayed.

19
Vertical Axis

Long timelines profit from the vertical scroll in the digital devices, either in desktop, mobile or tablet format. In addition, one of the axis is duplicated and adds more axis of information.

20
Sankey

Flows are traditionally displayed as Sankey diagrams, where the thickness of the lines represent the magnitude of these flows. Several intermediate steps can be addded for clarity.

21
Rings

Radius of each of the rings represent the magnitude at a particular point in time. They are displayed in a cavalier perspective to give a 3D effect. Color and transparency add axis of information.

22
Flights Takeoff

Timelines can be displayed as the trajectories of flights taking off. Thickness and color of the lines represent the associated magnitudes, while the point of departure represents time.

23
Rain

Similar to the flights, the color and thickness of the lines drawn downwards represent the magnitudes we want to display. The horizontal distribution represents time.

24
Radial Axis

Ideal for periodic events, the time axis draws a circle on which the magnitude for each time step is represented either as a line or an area. It allows comparisons using transparency and color.

types of
networks


25
Collapse Tree

Networks can be easily displayed in the horizontally oriented tree with a branch for each element of the tree. This one comes as static or as a explandible format flavour. Labels can be addded to each node.

26
Force Nodes

Complex network links are usually represented with force nodes, with gravitational and elastic properties. This network can be arranged in space by dragging the whole set of nodes.

27
Radial Tree

In large networks with several number of elements the radial tree provides a good solution, optimising the available space with its radial distribution for all the different hierarchical levels.

28
Satellites in Orbit

Just like planets have their asteroids and moons, the hierarchy of a simple network can be represented easily with the same structure as the solar system, being the nodes the celestial objects.

types of
cartography




29
D3.js Dots

Making use of the built-in cartographic projections of D3.js it is possible to place dots on particular latitudinal and longitudinal coordinates, showing magnitudes through radius and color.



30
D3.js Regions

Countries, monucipalities, terrirories, all have the power to display related magnitudes to these areas. D3.js allows to apply different colors to these regions to illustrate different magnitudes.



31
D3.js Trajectories

The path feature of D3.js can be projected into a map following trajectory data like flights, sailing traces or cycling routes. Density of path lines or color add depth to this representation.



32
D3.js Tiles

Gridded dataproducts such as meteorological or land use data can be displayed in their native grid size in D3.js by making use of the rectangular shape assigned to latitude and longitude points.



33
D3.js Polar

Map projections in D3.js offer a wide variety of proyections. Of particular interest is the polar perspective, in which polar events such as ocean circulation find their best representation and explainability.



34
D3.js Hexagonal Binning

Hexagonal binning is among the most popular mapping visualization techniques. The mean value of the magnitude displayed below takes the shape of nested hexagons, creating a fancy yet reliable layout.



35
D3.js Contour

SHP files with contours can be displayed using the D3.js cartographic library. This is of particular importance for perimeters that define a particular area of interest such as wildfires.



36
D3.js NetCDF

In addition to the JSON and GeoJSON formats for all the other D3.js mapping capabilities, it is possible to directly plug NetCDF file format into D3.js.



37
D3.js DAT

Binary data formats such as .DAT files are also suitable for displaying global data and project the dataproducts into an spherical grid.



38
Folium Contour

The Python package Folium offers a wide variety of mapping solutions with Leaftlet background cartography. In addition to dots, labels and more, the contour plots are visually appealing.



39
KeplerGL Contour

Contour lines can be also projected using the Kepler tool. This tool allows different shapes, map background options and even switching between 2D and 3D. Hardwired, but very useful.



40
KeplerGL Dots

Large datasets can be also treated with Kepler. Discretization through dots for every gridpoint is feasible and drawing circles at each gridpoint is a classic to display magnitudes.



41
Leaflet Tiles

Bakcground maps of quality are provided by Leaflet, a useful javascript library, that allows drawing D3.js on top. Tiles display dataproduct's original grid over large areas.



42
Leaflet Contour

Changing the input data files into appropriate data formats such as GeoJSON allows plotting regions of interest as contours in Leaflet. The information provided in the background map frames these regions of interest.



43
Leaflet Hexbin

Dynamic hexagonal binning displays the magnitude information on certain regions in a very atractive fashion. These hexagonal bins are recalculated at every zoom level, enhancing interactivity and exploration of the data.



44
ThreeJS Elevation Model

ThreeJS, a javascript library for creating 3D content has the excellent feature of height maps based on black and white images of certain regions. Highly interactive, ThreeJS is an easy yet effective tool for geospatial analysis.





about

I’m a dataviz cowboy, riding through D3.js mountains, looking for beautiful and wonderful data-driven storytelling.

Born and raised in Galicia, I studied Physics at Santiago de Compostela University, Spain, diving afterwards into the unfathomable mysteries of oceanography, achieving an MSc. in Applied Physical Oceanography at the British Antarctic Survey in Cambridge, UK, and a PhD. in Ocean Climate Modelling in Paris, France.

Since then I have invested my time into the graphic currency, embracing infographics and modern data visualization tools, just in time for the 2011 release of D3.js developed by Mike Bostock.

Beyond that, I love theatre plays, sharp dialogues and old printed posters, from classic operas to 1972 Olympics’ design.

Dataviz Cowboy is part of the Graphic Prototype industries.

contact

For project development, training courses or just sharing ideas, please contact me at:

     

training in
Python geodata

Intro

Postprocessing of raw input data files is a delightful step in data analysis and data format conversion for javascript web-based visualization. This modules help reading, plotting and converting all sorts of georeferenced input data formats.

Data
Structures


Basic input data formats such as CSV or JSON are usually translated into Pandas format to clean and filter the data we aim for, using arrays, dictionaries and lists. The output is converted into JSON or Parent/Child JSON.

Basic
Plots


A quick overview of the data can be done with plots using the Matplotlib library through scatter plots, regression fit, Time Seriesand histograms, together with all necessary plot formatting in text, legend and labels.

Format
Conversion


Model output, dataproducts and observational datasets often come in georeferenced data formats, such as NetCDF, TIF, SHP or MAT files. Reading and all possible conversion among these file formats are explained. Generating an output in either JSON or GeoJSON format is also useful.

Regrid
and Mask


Georeferenced data comes in a wide variety of map projections. In this module how to regrid both NetCDF and SHP files is explained. Masking dataproducts over particular regions defined by SHP files is also covered in this section.

Cartography

Mapping largely involves representation of either discrete elements, contour plots and areas or binning via hexagons or other polygons. These operations are performed to ultimately display the data in D3.js, Leaflet, Folium or KeplerGL.

Text
Analysis


Text analysis from web scrapers or social network feeds can be done with the NLTK python package for basic statistics such as word frequency or word rank.

training
in D3.js

Intro

The golden standard of modern, contemporary data visualization. All that is needed to display magnitudes, time series, networks and maps is explained in this module, including transformations and interactivity.

Set Up

Basic set up to start writing code in D3.js and to see it working. This includes Observable Notebooks or setting up a local server. D3.js scripts are usually embedded into HTML code plus some CSS styles, a quick review of these basic elements is also covered.

Basic
Shapes


The heart and soul of D3.js resides into drawing very basic shapes such as circles, lines or rectangles. The attributes of these shapes are subject to mathematical operations, including examples of loops, numerical operations, functions and conditional statements.

Plug
Data


Plugging data into D3.js shapes bring the whole dataviz into life. This module cover three simple data structures: CSV, JSON and GoogleSheets formats, and how to plug them into our dataviz project.

Advanced
Shapes


D3.js goes well beyond circles and lines to draw also polygons, arcs, lines and areas on cartesian axis, adding all possible axis of creativity.

Transformations

Conventional layouts can be modified through simple transformations of the groups of elements. This includes rotation of elements and display elements into rectangular or Circular grids.

Interactivity

New layers of information can be easily added or explored via a number of interactive elements, such as zooming, dropdown menus, sliders or tooltips, all of them through smooth transitions.

Cartography

Maps are one of the oldest data visualization tools. This section covers map projections, dots, lines, trajectories and regions on a map, tile filling of the space and hexagonal binning. These features are plotted using D3.js on native or Leaflet cartographies.

Project
Development


Data visualization merges with journalism when telling a story, few clues are given regarding layout axis, layers of information, choice of background color, legends, credits and data sources.

  portfolio     types     training     about