<p>Earlier this year, I spoke at <a href="https://agent.sh/agent-conf-2020&quot; target="_blank" rel="nofollow noopener noreferrer">AgentConf 2020, Dornbirn, Austria</a> on <code class="language-text">To D3 or not</code>.</p>n<ul>n<li><a href="https://docs.google.com/presentation/d/1GTh4q30nkt95X1ysky4LkLYk9Jg3e3si_wXMn5GkWKA/edit?usp=sharing&quot; target="_blank" rel="nofollow noopener noreferrer">Slides</a></li>n<li><a href="https://www.youtube.com/watch?v=n2ZArMqtIQw&list=PL02Kht_parVlg-EPMtMjwMFI2N1N7t_HH&index=5&t=0s&quot; target="_blank" rel="nofollow noopener noreferrer">Video</a></li>n</ul>n<p>n <an class="gatsby-resp-image-link"n href="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/de0bd/slide1.png"n style="display: block"n target="_blank"n rel="noopener"n >n n <spann class="gatsby-resp-image-wrapper"n style="position: relative; display: block; border: 1px solid #efefef max-width: 590px; margin-left: auto; margin-right: auto;"n >n <spann class="gatsby-resp-image-background-image"n style="padding-bottom: 56.08108108108109%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACU0lEQVQoz22SbVMSYRSG/Z8VIrAIbiIk5UiaVvgGhOwLyypYqKVUvmXjh2Zs+gH9jWbSSqLkcQHb52p20aZm+nDmOXNmzvWc+z5nwI1bSMVERk0Y1pHDBjJWRkavw6QVW6Uds/3cq7nRMigGxEu4QzpSKUPYoJOuMeDGLIjouMEKl8UF3PVpiBkQ1CCkw5DGZ6XKiVKFYAnp13Ta6gpOZQEax8j0CgRKfwMN3LCBO7tFO2lxfrvM91SFZqJMM2HxU9X5oeo079icjZqIEYPTZI2Tu3Wc2RosZiFo/AtEMX3ot2ABcb8O+T1Y2AHzCPL7kH0FxTd+3nvc4CxVphsowqCGDBu+ms74FVB6QC+Cy7STFVqzG4ipdYR2gJjbRhR3EcU9xPQGorDDeeYZzfQqlxEdUlVQbd+aPjBuQUjjNFlnL/cBodZg7iUiU0fMbCKyW4h0tQ+c2aQ936C3fACPGr6n59X39HL7cLNIJ712JTms041V+JSo01UsWNoB/S3Mv+5LnX4BxhEsH0LpEFbfIfO7ECrRUmw63pb/KzlU8r2UIzby3gYyVUOqNvLhNjK3ixxfQyaryIk6cuwpBExQdL/nD1D6E/aXgveTosHMc0gWfV+8kKM1UPtn46mRAR0SOZwHT7iIVPo3eQ3sxi2cqMFF1EDEdNrZec6PP9KatGlHSvTCZZjMIydyyJAFUaP/jhfobmXoZuoQMf2hut7ZnIYKfBnMIyIanWEDRzFxVBsnYuIoOr/CJnJMQ07Z4OXeNIoH9SAWvVGLs1tLNG8s8jVh8htzSpZKx62uwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"n >n <imgn class="gatsby-resp-image-image"n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"n alt="Slide 1"n title=""n src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/fcda8/slide1.png"n srcset="/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/12f09/slide1.png 148w,n/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/e4a3f/slide1.png 295w,n/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/fcda8/slide1.png 590w,n/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/efc66/slide1.png 885w,n/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/c83ae/slide1.png 1180w,n/blog/static/f0d2e1d27e69ba1e8c8d40c2b76af9a4/de0bd/slide1.png 2238w"n sizes="(max-width: 590px) 100vw, 590px"n />n </span>n </span>n n </a>n </p>n<h2 id="my-first-encounter-with-d3js"><a href="#my-first-encounter-with-d3js" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>My first encounter with D3.js</h2>n<p>I was working at a research lab <a href="http://aiaioo.com/&quot; target="_blank" rel="nofollow noopener noreferrer">Aiaioo Labs</a> doing work on artificial intelligence (AI), machine learning (ML) and natural language processing (NLP). One of the research projects was <code class="language-text">Intelligent Digital Menu for Restaurants</code> which had a graph to show trends based on a recommendation algorithm for the digital restaurant menu. A designer colleague came up to me with a prototype and asked what did I think! It was an interactive bar and line chart.</p>n<p><img src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/867797d28b6e132f803f93fa139b222d/encounter.gif&quot; alt="That's how I got in"></p>n<p>Given my JavaScript background, and back then with a most recent experience of hacking into Yuijs (Yahoo Charts), I said I would make it work! D3 was like jQuery, but most important to me, it was JavaScript!</p>n<p>The year was 2012, and <code class="language-text">Big Data</code> was the new hype back then. I was also volunteering for <a href="https://www.datakind.org/&quot; target="_blank" rel="nofollow noopener noreferrer">DataKind Bangalore</a> during the weekends. Amidst a bunch of data scientists, I was the data viz diva with my D3 skills!</p>n<h2 id="lightbeam"><a href="#lightbeam" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Lightbeam</h2>n<p>In 2017, I worked on <a href="https://princiya777.wordpress.com/category/lightbeam/&quot; target="_blank" rel="nofollow noopener noreferrer">Lightbeam</a> with <a href="https://medium.com/read-write-participate/shining-a-light-on-web-tracking-2194cdbdae5c&quot; target="_blank" rel="nofollow noopener noreferrer">Mozilla</a>, a browser extension which shows first and third party web trackers as you browse the internet. The visualisation grows based on your browsing history, and uses an interactive force-directed graph which uses D3’s force-directed graph algorithm. The initial work was supported by <a href="https://www.outreachy.org/apply/&quot; target="_blank" rel="nofollow noopener noreferrer">Outreachy</a> and later funded by <a href="https://prototypefund.de/en/project/lightbeam/&quot; target="_blank" rel="nofollow noopener noreferrer">PrototypeFund.de</a></p>n<p><img src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/75c2e7be1e5ce7cb15c5f65a74d0a3fa/lbimport.gif&quot; alt="Lightbeam"></p>n <div style="margin-top=55px; font-style: italic;">(This is an article posted to my blog at princiya.com/blog. You can read it online by <a href="https://atomic-temporary-42700218.wpcomstaging.com/blog/to-d3-or-not/">clicking here</a>.)</div>