D3.js force layout

Debugging the ALPHA! While I have worked with D3.js in the past, the d3-force layout library was entirely new to me and it was very interesting to learn the concepts behind the physical simulations in order to understand the networks and hierarchies of the first and the third party trackers for Lightbeam. It did take... Continue Reading →

Advertisements

Web workers for Lightbeam

This is an initial attempt to improve the graph's performance for large number of nodes using web workers. This PR is a work in progress. The idea here is to off-load the heavy force layout computations to the web worker. This improves performance during page load. I am also experimenting on passing the logic to... Continue Reading →

Lightbeam – the launch

Drum roll.....!!! We released Lightbeam yesterday and I am super proud of my Outreachy work. You can find Lightbeam at the Mozilla add-ons page. What is new? Below are the highlights of Lightbeam 2.0.1: Re-written from scratch to adapt to the browser web-extension API Asynchronous data capture and storage IndexedDB for data storage (data is... Continue Reading →

Lightbeam goes virtual!

Here is a gif from my latest aframe experiments for Lightbeam. For Mozfest 2017, I had submitted the following proposal - 'Lightbeam, an immersive experience'. While the proposal is still being reviewed, I have been experimenting with Aframe and the above gif is an initial proof of concept 🙂 Here is the excerpt from the proposal:... Continue Reading →

Lightbeam – All the Math!

In this post I shall discuss all (most of) the math involved in the visualisations. A quick recall: Lightbeam is now responsive and fully interactive. Tooltips The math behind tooltips is the sequel to my blog post Lightbeam – Tooltips (SVG). Read this blog post to understand Lightbeam's migration from SVG to Canvas. Ignore the transforms... Continue Reading →

Lightbeam updates

Here are two quick updates about Lightbeam because I can't contain the excitement to myself. Lightbeam goes responsive, yayyyyy!!! Responsive UI I am extremely happy for achieving this today. Making the UI responsive was there in our to-dos, but this one got done today accidentally in an attempt to answer few of the comments on... Continue Reading →

Lightbeam – SVG to Canvas

SVG is the preferred choice for D3. But when you expect a lot of DOM nodes (yes, in the case of Lightbeam) you need to start worrying about the DOM performance and have to take the call to step out of the SVG comfort zone. We chose Canvas over SVG for Lightbeam 2.0! In this... Continue Reading →

Lightbeam – Tooltips (SVG)

In this blog post I want to share my lessons learned from creating tooltips for the Lightbeam visualisations. Visualisations are the major part of this Outreachy - Lightbeam internship. We use D3-force to create a simulation for an array of nodes (websites), compose the desired forces, and then listen for tick events to render the nodes as they update. When we started,... Continue Reading →

Lightbeam – Behind the scenes

It's more than 2 weeks now. I haven't had the time to write anything down. So here's a quick post on what's happening! San Fransisco - Mozilla All Hands 2017 Before The week of June 26 - 30 was Mozilla All Hands 2017 at San Fransisco. It was my first time into the United States... Continue Reading →

Create a free website or blog at WordPress.com.

Up ↑