w.
I am a data analyst & visualization engineer turning your data into web-based data-driven visualization projects.
portfolio
portfolio
w.
I am a data analyst & visualization engineer turning your data into web-based data-driven visualization projects.
types ofmagnitudes
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.
04Force 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.
05Diamonds 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.
06Treemap 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.
07Voronoi 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.
08Starry 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.
09Japanese Waves While the size of the circles remains constant, the color allows the representation of magnitudes, and even the circle distribution allows temporal evolution.
10Spider 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.
11Spider 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.
12Anemone 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.
13Spirals 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.
14Small 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.
15Stacked 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.
16Oriented 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 oftime series
17Lines 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.
18Areas 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.
19Vertical 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.
20Sankey 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.
21Rings 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.
22Flights 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.
23Rain 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.
24Radial 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 ofnetworks
25Collapse 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.
26Force 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.
27Radial 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.
28Satellites 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 ofcartography
29D3.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.
30D3.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.
31D3.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.
32D3.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.
33D3.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.
34D3.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.
35D3.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.
36D3.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.
37D3.js DAT Binary data formats such as .DAT files are also suitable for displaying global data and project the dataproducts into an spherical grid.
38Folium 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.
39KeplerGL 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.
40KeplerGL 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.
41Leaflet 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.
42Leaflet 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.
43Leaflet 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.
44ThreeJS 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
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.
trainingin 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.