Elias Ousghir

Javascript developper & UX designer,
with a growing love for data.

ousghir.elias@gmail.com

Unemployment rates in France

This unemployment rates visualisation was made for Ouest-France’s online media. As the presidential election approaches, this recurrent political topic will come back in the media spotlight.

open interactive >>
D3.js

I’m using synchronised graphs to detail the evolution of each region’s unemployment rate during the last decade. It allows the user to see at a glance how his region compares to the rest of the country.

One of the challenges for this project was to allow the graphs to be as accessible on mobile as the desktop version. For a mobile-friendly approach, the graphs are stacked to benefit from a full screen display. The labels are only to be interacted with at a touch on the timeline slider. This way scrolling won’t interfere with the slider.

Being an admirer of Mike Bostock’s work, I used the New York Time’s ”Taxe Burden” article as a design reference.
Data is from the insee.


Semantic graph

Wikicréation.fr is an online encyclopedia abouts art & culture from the University of Paris Sorbonne. My team and I were in charge of redesigning the whole website. I developped the backend as well as a semantic graph, for the front-end. It was meant to display the relations between every article on the encyclopedia.

open interactive >>
javascript, D3.js, wordpress, REST API

The quincunx matrix shape is obtained by setting a wide collision sphere on each node (in white on the figure below), and forces (in pink) linking the children to their parents. The specificity of this graph is that it reuses the principles of hierarchical graphs, with the difference that a node may have multiple parents.

The back-end consists of a headless wordpress REST architecture, interacting with a front-end based on ReactJs.


World demographics overview

open interactive >>
javascript, jQuery, D3.js

I used this project as personal training for d3.js and different cartographic tools. All the data is displayed on a unique scrollable page, with an animated world map background positioning itself depending on the overlapping data.

Cartographic data from natural earth, demographic data from GeoHive and Pew Search Center.


Proximeti

This project might have been the failure I invested the most time in. In the continuity of my product design bachelor project, I teamed up with a friend to develop on our free time an anonymous social app. You would use it to publish geolocalized pictures & text to your vicinities. It was thought as a mean of sharing local things worth noticing.

We published it (after 9 months of development including a total redesign after 4 months) and for multiple reasons we simply couldn’t find an active user group. I believe It’s still a project worth mentioning, as It taught me a lot design & development wise.


Squawk 7700
flight’s emergency landings 3d visualisations

The objective of this experiment was to let planes draw a 3d silhouette of a “panic trajectory“ after an unexpected incident forces them to land.

javascript, three.js

As flightradar provides no API, I programmed a Raspberry Pi to constantly scan the sky, and check the transponder codes of every plane on the live interface datasets. If a plane emitted a squawk of 7500, 7600, or 7700, the raspberry waited for it to land before downloading the completed flight dataset.

I first used Processing for prototyping, then three.js to display the 3d visualisation in a web interface.


Illustrations

I used to draw a lot on my free time. Feel free to have a look at my illustrations on this blog.