https://alexchirkin.me/ Recent content on alexchirkin.me Hugo en-us <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a> Fri, 02 Jun 2023 00:00:00 +0000 https://alexchirkin.me/blog/chart-integration/ Fri, 02 Jun 2023 00:00:00 +0000 https://alexchirkin.me/blog/chart-integration/ <p><img src="https://alexchirkin.me/covers/plot-integration.png" alt="Chart integration"></p> <h2 id="introduction">Introduction</h2> <p>Integrating a chart into an application may appear easy task at first. If you have a container ready for the chart, all you need to do is include the necessary chart assets in a bundle and use them to render the chart. This approach works well for basic scenarios where you only need to provide data to a chart function and visualize it.</p> <p>However, things can get more challenging when your chart requires responsiveness to user actions or data updates. If the application&rsquo;s rendering flow is beyond your control or if you need to implement additional logic to handle actions or updates, the integration task becomes more complex.</p> https://alexchirkin.me/blog/chart-lifecycle/ Sun, 23 Oct 2022 00:00:00 +0000 https://alexchirkin.me/blog/chart-lifecycle/ <p><img src="https://alexchirkin.me/covers/state-lifecycle.png" alt="D3 chart lifecycle"></p> <p>Integration of D3 data visualizations into front-end applications can be a tricky task, when a plot lifecycle is controlled by the application, sometimes it may be unclear how to properly connect the plot and the application. In this article, I describe some ways to update plots with saving their internal state.</p> <h2 id="plot-internal-state">Plot internal state</h2> <p>When creating a D3 plot to visualize some data it frequently happens that to improve user experience some interactivity should be added. And with interactivity usually comes state and with that, the complexity of the plot lifecycle can increase rapidly. Many different things can be stored in the plot state, like scrolling position, selected elements, zoom value, etc. Basically, that can be any effect of possible user input not directly related to data changes.</p> https://alexchirkin.me/blog/first-post/ Sun, 08 May 2022 00:00:00 +0000 https://alexchirkin.me/blog/first-post/ <p>For my first post here I have decided to put my little game created for pico-8 fantasy console.</p> <p>I also have a personal page on <a href="https://booooring.itch.io" target="_blank">itch.io</a> (with not so much to see on it)</p> <div style="margin: 64px 0;display: flex;justify-content: center;"> <iframe scrolling="no" frameborder="0" allowfullscreen="true" src="https://alexchirkin.me/blog/first-post/game.html" style="width: 90vw; height: 50vh; max-width: 600px;" allowtransparency="true" webkitallowfullscreen="true" mozallowfullscreen="true" msallowfullscreen="true" allow="autoplay; fullscreen *; geolocation; microphone; camera; midi; monetization; xr-spatial-tracking; gamepad; gyroscope; accelerometer; xr; cross-origin-isolated" id="game_drop"> </iframe> </div> https://alexchirkin.me/about/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/about/ <p>alexchirkin.me - my personal blog where I implement different types of charts by using set of javascript (and sometimes other) libraries.</p> <p>You can find information about me on my <a href="https://www.linkedin.com/in/achirkin" target="_blank">LinkedIn</a> page</p> <p>Feel free to contact me by E-Mail - <a href="mailto:hello@alexchirkin.me">hello@alexchirkin.me</a> </p> <p>My GitHub profile - <a href="https://github.com/b0000ring" target="_blank">GitHub</a> </p> https://alexchirkin.me/charts/bar/bar-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/bar/bar-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeBar</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>} </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calculating width for each bar </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">barWidth</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>) <span style="color:#f92672">/</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data.length is used because we want scaling by X </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// depends on item count, not values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// tick format needed for custom value for every tick </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// i &lt; data.length needed to hide the last unnecessary tick label </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickFormat</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">`data </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">i</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickSize</span>(<span style="color:#ae81ff">0</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// swapping range values because they should increase </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from bottom to top. its opposite by default </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisRight</span>( </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all new data-element connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending actual element to every selection item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord to element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord to element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// substraction from height because by design </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it should be placed at the bottom of the plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting element width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#a6e22e">barWidth</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting element height </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>) <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// filling element with color from color scale </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating g element for Y axis and calling its component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// adding slight alignment </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">30</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating g element for X axis and calling its component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;class&#39;</span>, <span style="color:#e6db74">&#39;x-axis&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// transform in using to move the axis to bottom of the plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(0, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying rotation to x axis labels to make plot more responsive </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;.x-axis .tick text&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying some transform to x axis label for better readability </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">&#39;translate(20, 20) rotate(-45)&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for showing dynamic data and view change </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it generates new data, applies to plot and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changes the view with animation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">change</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all items (which is rect elements in view) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rect</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating of dataset </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>(() =&gt; Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data to items selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">rect</span>.<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating transition </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">transition</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting transition duration </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating every item height </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>) <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating every item y position </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling change function every second </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">change</span>, <span style="color:#ae81ff">1000</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/box/box-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/box/box-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeBox</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(<span style="color:#ae81ff">10</span>).<span style="color:#a6e22e">fill</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">15</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">24</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating scale for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// because x axis will be static </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">max</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">5</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating axis with scale usage </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axis</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisRight</span>(<span style="color:#a6e22e">scaleY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper for plot items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating vertical helping line </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying coords </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">height</span><span style="color:#f92672">-</span><span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying line color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying line style (dashing) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-dasharray&#39;</span>, <span style="color:#e6db74">&#39;4&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying line width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#e6db74">&#39;2&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating top horizontal helping line </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// most of the attributes the same </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// as for vertical line </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">3</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">1.5</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#e6db74">&#39;2&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating bottom horizontal helping line </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">3</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">1.5</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#e6db74">&#39;2&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating rect element for box </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// we dont really need to connect data </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to the element itself </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// so there is no direct data binding steps </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying id </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;box&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord (its static) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">4</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// using scaling to get correct positioning from </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// minimum data value (because this is a beginning point) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">data</span>))) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting rect fill color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#e6db74">&#39;2&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating line for mean value </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting id to element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;mean&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting line x1 coord (its constant) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">4</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting initial y1 coord </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (-10 to hide the line for initial render) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#f92672">-</span><span style="color:#ae81ff">10</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x2 coord (its constant) </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// also defines the line width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">4</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting initial y2 coord </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (-10 to hide the line for initial render) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#f92672">-</span><span style="color:#ae81ff">10</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#e6db74">&#39;2&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating g element for Y axis and calling its component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axis</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying transform to place the axis according to padding </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">padding</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for showing dynamic data and view change </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it generates new data, applies to plot and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changes the view with animation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">change</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting box element by id </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rect</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#box&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// select mean line element by id </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">line</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#mean&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating of dataset </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>(() =&gt; Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> (<span style="color:#a6e22e">max</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">min</span>)) <span style="color:#f92672">+</span> <span style="color:#a6e22e">min</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calculation of mean value from data </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">mean</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">mean</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// changing elements attributes based on new data </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">rect</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating transition </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">transition</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting transition duration </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying new y coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">data</span>))) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying height to box element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// scaled min value should be substracted from scaled max </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to get correct box size </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">max</span>(<span style="color:#a6e22e">data</span>)) <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">data</span>))) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">line</span>.<span style="color:#a6e22e">transition</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting transition duration </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new y1 coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">mean</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new y2 coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">mean</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling change function every second </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">change</span>, <span style="color:#ae81ff">1000</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/density/density-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/density/density-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeDensity</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">20</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">40</span>} </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">max</span>, <span style="color:#a6e22e">min</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data.length is used because we want scaling by X </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// depends on item count, not values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// swapping range values because they should increase </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from bottom to top. its opposite by default </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisRight</span>( </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>, <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>]) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating area generator function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">area</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">area</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying options to area generator </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">area</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// x coord according to data item index </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">x</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// y0 is static and should be the bottom of the plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">y0</span>(<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// y1 is the data item value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">y1</span>(<span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// using curveBasis to set curve </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">curve</span>(<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">curveBasis</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating group for plot items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data is wrapped by array because we need only one </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data element for one density curve </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>([<span style="color:#a6e22e">data</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// joining data to new path element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting d attr of every path element by calling area generator </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">area</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting fill color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper element for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling Y axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// adding slight alignment </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">30</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper element for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling X axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting X axis position to be on the plot bottom </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// +5 is slight corretion for better visibility </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(0, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">5</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for showing dynamic data and view change </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it generates new data, applies to plot and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changes the view with animation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">change</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating new dataset </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>(() =&gt; Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting path element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying new dataset </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>([<span style="color:#a6e22e">data</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating transition </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">transition</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting transition duration </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new value for d attribute of path element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">area</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling change function every second </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">change</span>, <span style="color:#ae81ff">1000</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/heatmap/heatmap-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/heatmap/heatmap-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeHeatmap</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">4</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating dataset </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(<span style="color:#ae81ff">64</span>).<span style="color:#a6e22e">fill</span>().<span style="color:#a6e22e">map</span>(() =&gt; (Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">min</span>) <span style="color:#f92672">|</span> <span style="color:#ae81ff">0</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// how much items could be in row </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rowLength</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">8</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// how much rows will be in plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rows</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">rowLength</span>) <span style="color:#f92672">|</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">40</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">40</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting svg container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying cursor style for svg container </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cursor&#39;</span>, <span style="color:#e6db74">&#39;pointer&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying mouseleave event </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseleave&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// finding popup container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#popup&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// removing popup container </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">remove</span>() </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// items width without margins </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">itemsWidth</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// items height without margins </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">itemsHeight</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values domain </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// using row length because tick is one item in row </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">rowLength</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting range with using margin </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for domain </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// using rows count because tick is one row </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">rows</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting range with using margin </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating color scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleColor</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleQuantize</span>().<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]).<span style="color:#a6e22e">range</span>([ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;#00beef&#39;</span>, <span style="color:#e6db74">&#39;#0089df&#39;</span>, <span style="color:#e6db74">&#39;#60a5fa&#39;</span>, <span style="color:#e6db74">&#39;#4b59d2&#39;</span> </span></span><span style="display:flex;"><span> ]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisTop</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// hiding tick (little line near tick value) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickSize</span>(<span style="color:#ae81ff">0</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// hiding zero value for better design </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickFormat</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">i</span> <span style="color:#f92672">?</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisLeft</span>(<span style="color:#a6e22e">scaleY</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickSize</span>(<span style="color:#ae81ff">0</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickFormat</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">i</span> <span style="color:#f92672">?</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calculation of item width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sizex</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">itemsWidth</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">rowLength</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calculation of item height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">sizey</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">itemsHeight</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">rows</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of empty collection for items </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all new data-element connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending actual element to every selection item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling cell component </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">cell</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting mouseenter callback for every item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseenter&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting of current element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (this - here element which triggered the event) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#66d9ef">this</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting special color for the element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;#ffc008&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#e6db74">&#39;#ffc008&#39;</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting mouseleave callback for every item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseleave&#39;</span>, <span style="color:#66d9ef">function</span> () { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting of current element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#66d9ef">this</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting color based on item value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColor</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColor</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting click event (e - event, v - item value) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;click&#39;</span>, (<span style="color:#a6e22e">e</span>, <span style="color:#a6e22e">v</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting pointer coords from event </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">pointer</span>(<span style="color:#a6e22e">e</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling popup component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">showPopup</span>(<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">v</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending x axis container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x axis container id </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;axisx&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x axis position </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// sizex / -2 needed to show label in the middle of the item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">sizex</span> <span style="color:#f92672">/</span> <span style="color:#f92672">-</span><span style="color:#ae81ff">2</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 30)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling x axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending y axis container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// same actions as for x axis </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;axisy&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(30, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">sizey</span> <span style="color:#f92672">/</span> <span style="color:#f92672">-</span><span style="color:#ae81ff">2</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting axis domains </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;.domain&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// removing domains to improve visual design </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">remove</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// show popup function (item click callback) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">showPopup</span>(<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">value</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting old popup </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#popup&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// removing old popup </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">remove</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating container for popup </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">group</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting id for popup container </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;popup&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating rect element for popup </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">group</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x position </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">x</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y position </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">y</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#e6db74">&#39;100px&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup height </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#e6db74">&#39;40px&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup border radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;rx&#39;</span>, <span style="color:#e6db74">&#39;10&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;ry&#39;</span>, <span style="color:#e6db74">&#39;10&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup background color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;white&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup border color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#e6db74">&#39;black&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending text component to popup container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">group</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;text&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting text value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">text</span>(<span style="color:#e6db74">`value: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">value</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup text element coords </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">10</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">y</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">25</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// cell component function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">cell</span>(<span style="color:#a6e22e">selection</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting width for item </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">selection</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#a6e22e">sizex</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting height for item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#a6e22e">sizey</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord for item </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// using i because step in a row is item nubmer </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span> <span style="color:#f92672">%</span> <span style="color:#a6e22e">rowLength</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord for item </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// using i / rowLength to get current row number </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleY</span>((<span style="color:#a6e22e">i</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">rowLength</span>) <span style="color:#f92672">|</span> <span style="color:#ae81ff">0</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting item color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColor</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting item border color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColor</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/linear/linear-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/linear/linear-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeLinear</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">60</span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data.length is used because scaling for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// depends on item count, not values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting amount of ticks according to data items count </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">ticks</span>(<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// tick format needed for custom value for every tick </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickFormat</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#e6db74">`item </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">i</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// swapping range values because they should increase </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from bottom to top. its opposite by default </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisRight</span>( </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>, <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>]) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating an instance of line generator </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// passing accessors functions </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">lineMaker</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">line</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">x</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">y</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// dot component function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">dot</span>(<span style="color:#a6e22e">selection</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting radius for dot element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">selection</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;r&#39;</span>, <span style="color:#ae81ff">5</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// fill dot with color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cx&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cy&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// line component function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">line</span>(<span style="color:#a6e22e">selection</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting line path by calling line generator instance </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">selection</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">lineMaker</span>(<span style="color:#a6e22e">data</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting empty line filling </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;none&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting line color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying line to the chart </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating path element for line </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">lineElement</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting id for lines group </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying dots to the chart </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// same steps as for lines above </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">circles</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;circles&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating g element for X axis and calling its component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>).<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;class&#39;</span>, <span style="color:#e6db74">&#39;x-axis&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// transform in using to move the axis to bottom of the plot </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// +5 is slightly correction to make entire axis visible </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(0, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">5</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying rotation to x axis labels to make plot more responsive </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;.x-axis .tick text&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">&#39;translate(-20, 20) rotate(-45)&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating g element for Y axis and calling its component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// adding slight alignment </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">30</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling dot component function and passing circles selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>(<span style="color:#a6e22e">circles</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling line component function and passing lineElement selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">line</span>(<span style="color:#a6e22e">lineElement</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for showing dynamic data and view change </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it generates new data, applies to plot and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changes the view with animation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">change</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating of dataset </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>(() =&gt; Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating view </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling dot and line component functions and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// passing selections with updated data and transition </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>(<span style="color:#a6e22e">circles</span>.<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>).<span style="color:#a6e22e">transition</span>().<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>)) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">line</span>(<span style="color:#a6e22e">lineElement</span>.<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>).<span style="color:#a6e22e">transition</span>().<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling change function every second </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">change</span>, <span style="color:#ae81ff">1000</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/network/network-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/network/network-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeNetwork</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item1&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item2&#39;</span>, <span style="color:#e6db74">&#39;item3&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item2&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item4&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item3&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item2&#39;</span>, <span style="color:#e6db74">&#39;item1&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item4&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item1&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item5&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item1&#39;</span>, <span style="color:#e6db74">&#39;item4&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;item6&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">connections</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;item1&#39;</span>], </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">70</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating network datastructure from the data </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// by using custom function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">structure</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getStructure</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying network layout to structure items </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">applyRandomLayout</span>(<span style="color:#a6e22e">structure</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting all nodes data </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getNodes</span>(<span style="color:#a6e22e">structure</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting all links data between network nodes </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">links</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getLinks</span>(<span style="color:#a6e22e">structure</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">items</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>), <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">max</span>(<span style="color:#a6e22e">items</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>)]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">items</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>), <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">max</span>(<span style="color:#a6e22e">items</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>)]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating drag behaviour </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">dragHandler</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">drag</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting general drag callback </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;drag&#39;</span>, <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">e</span>, <span style="color:#a6e22e">d</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting mouse pointer coords relatiely svg </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">pointer</span>(<span style="color:#a6e22e">e</span>, <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">node</span>()) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating coords directly in data object (d param) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">scaleX</span>.<span style="color:#a6e22e">invert</span>(<span style="color:#a6e22e">x</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">scaleY</span>.<span style="color:#a6e22e">invert</span>(<span style="color:#a6e22e">y</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling update function to redraw the chart </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">update</span>() </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper for all chart components </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wrapper</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// render connections between nodes </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying connections data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">links</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying element-data connections and creating line elements </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying line coords </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying lines color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// render nodes </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty collection </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying nodes data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">items</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying element-data connections and creating g elements </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// g element used because each node contain circle and text </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// so its a wrapper </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting node element class </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// for future selections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;class&#39;</span>, <span style="color:#e6db74">&#39;node&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending circles to each node </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying circle coords </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cx&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cy&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying circle radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;r&#39;</span>, <span style="color:#e6db74">&#39;10&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying each circle color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting cursor style </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;cursor&#39;</span>, <span style="color:#e6db74">&#39;pointer&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying text for each node </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;text&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting text value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">text</span>(<span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">id</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying text color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;currentColor&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup text element coords </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// +15 is a slight correction for better visibility </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>) <span style="color:#f92672">+</span> <span style="color:#ae81ff">15</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>) <span style="color:#f92672">+</span> <span style="color:#ae81ff">15</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying drag behavious to selection of all circle elements </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// which represents nodes </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dragHandler</span>(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;circle&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function which create structure with linked object </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from flat data array </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getStructure</span>(<span style="color:#a6e22e">data</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> {} </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting initial items structure </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">forEach</span>((<span style="color:#a6e22e">item</span>, <span style="color:#a6e22e">i</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">result</span>[<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">id</span>] <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">item</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting connections </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">item</span> =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">connections</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">connections</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">item</span> =&gt; <span style="color:#a6e22e">result</span>[<span style="color:#a6e22e">item</span>]) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">result</span>[<span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">id</span>].<span style="color:#a6e22e">connections</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">connections</span> </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">result</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function that applies random layout (without directions) </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to network structure </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">applyRandomLayout</span>(<span style="color:#a6e22e">data</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// spacing between nodes </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">spacing</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">100</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying coords for each element of structure </span></span></span><span style="display:flex;"><span> Object.<span style="color:#a6e22e">values</span>(<span style="color:#a6e22e">data</span>).<span style="color:#a6e22e">forEach</span>((<span style="color:#a6e22e">item</span>, <span style="color:#a6e22e">i</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting previous generated node object </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// or default object with coords for the first one </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">prev</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">0</span> <span style="color:#f92672">?</span> Object.<span style="color:#a6e22e">values</span>(<span style="color:#a6e22e">data</span>)[<span style="color:#a6e22e">i</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>] <span style="color:#f92672">:</span> {<span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>} </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating node coords </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">prev</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">spacing</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">prev</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">spacing</span>) <span style="color:#f92672">*</span> Math.<span style="color:#a6e22e">sin</span>(<span style="color:#a6e22e">i</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function that returns array of node objects </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getNodes</span>(<span style="color:#a6e22e">layout</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> Object.<span style="color:#a6e22e">values</span>(<span style="color:#a6e22e">layout</span>).<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">node</span> =&gt; <span style="color:#a6e22e">node</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function that returns array of arrays which represents </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// connections between two nodes </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getLinks</span>(<span style="color:#a6e22e">layout</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">links</span> <span style="color:#f92672">=</span> [] </span></span><span style="display:flex;"><span> Object.<span style="color:#a6e22e">values</span>(<span style="color:#a6e22e">layout</span>).<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">node</span> =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">node</span>.<span style="color:#a6e22e">connections</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">connection</span> =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">links</span>.<span style="color:#a6e22e">push</span>([<span style="color:#a6e22e">node</span>, <span style="color:#a6e22e">connection</span>]) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">links</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// general update callback </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">update</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating updated links and nodes data from structure </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">links</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getLinks</span>(<span style="color:#a6e22e">structure</span>) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getNodes</span>(<span style="color:#a6e22e">structure</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// render connections </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;.node&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">items</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;line&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">links</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x1&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y1&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">0</span>].<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x2&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y2&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>[<span style="color:#ae81ff">1</span>].<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// render nodes </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cx&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cy&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;text&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>) <span style="color:#f92672">+</span> <span style="color:#ae81ff">15</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>) <span style="color:#f92672">+</span> <span style="color:#ae81ff">15</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/pie/pie-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/pie/pie-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makePie</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">10</span>, <span style="color:#ae81ff">5</span>, <span style="color:#ae81ff">2</span>] </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cursor&#39;</span>, <span style="color:#e6db74">&#39;pointer&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// count radius based on width or height (the smallest one) and applying the padding </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">radius</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">min</span>(<span style="color:#a6e22e">width</span>, <span style="color:#a6e22e">height</span>) <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of colors scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleColors</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleQuantize</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;#4b59d2&#39;</span>, <span style="color:#e6db74">&#39;#008ae6&#39;</span>, <span style="color:#e6db74">&#39;#00b6e9&#39;</span> </span></span><span style="display:flex;"><span> ]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling d3.pie to get data processing </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for pie chart </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pie</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">pie</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating an instance of arc generator </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arc</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">arc</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting inner radius </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// value can be increased to make &#39;donut&#39; chart </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">innerRadius</span>(<span style="color:#ae81ff">0</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting outer radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">outerRadius</span>(<span style="color:#a6e22e">radius</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting pie chart data by passing in to </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// data processing function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pieData</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">pie</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating group element for chart content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying transform to put pie chart to center of svg </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection of path elements </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying processed data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">pieData</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all new data-element connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending actual element to every selection item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting path shape by calling arc generator instance </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">arc</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting color for every pie piece </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColors</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying mouseenter event </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseenter&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting current element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#66d9ef">this</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting element opacity </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;opacity&#39;</span>, <span style="color:#e6db74">&#39;0.7&#39;</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying mouseleave event </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseleave&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting current element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#66d9ef">this</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting element opacity </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;opacity&#39;</span>, <span style="color:#e6db74">&#39;1&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting old popup </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#popup&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// removing old popup </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">remove</span>() </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying mousemove event </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mousemove&#39;</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>, <span style="color:#a6e22e">d</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting pointer coords from event </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">pointer</span>(<span style="color:#a6e22e">e</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling popup component function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">showPopup</span>(<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// show popup function (item click callback) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">showPopup</span>(<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">value</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting old popup </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#popup&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// removing old popup </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">remove</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating container for popup </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">group</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting id for popup container </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;popup&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;pointer-events&#39;</span>, <span style="color:#e6db74">&#39;none&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating rect element for popup </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">group</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x position </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">10</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y position </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">y</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">10</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#e6db74">&#39;100px&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup height </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#e6db74">&#39;40px&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup border radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;rx&#39;</span>, <span style="color:#e6db74">&#39;10&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;ry&#39;</span>, <span style="color:#e6db74">&#39;10&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup background color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;white&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup border color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#e6db74">&#39;black&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending text component to popup container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">group</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;text&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting text value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">text</span>(<span style="color:#e6db74">`value: </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">value</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting popup text element coords </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">20</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">y</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">35</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/scatter/scatter-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/scatter/scatter-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeScatter</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">100</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// generating dataset </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(<span style="color:#ae81ff">100</span>).<span style="color:#a6e22e">fill</span>().<span style="color:#a6e22e">map</span>(() =&gt; ({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> (Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span>) <span style="color:#f92672">|</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> (Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span>) <span style="color:#f92672">|</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> })) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting svg container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying cursor style for svg container </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cursor&#39;</span>, <span style="color:#e6db74">&#39;pointer&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating root component for items elements </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values domain </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting range with using margin </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values domain </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from max to min to reverese y axis values (increasing from bottom to top) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">max</span>, <span style="color:#a6e22e">min</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisLeft</span>(<span style="color:#a6e22e">scaleY</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating zoom behaviour </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">zoom</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">zoom</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting extent for scrolling </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">translateExtent</span>([[<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>], [<span style="color:#a6e22e">width</span>, <span style="color:#a6e22e">height</span>]]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting extent for zooming </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">scaleExtent</span>([<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting callback event (both scrolling and zooming) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;zoom&#39;</span>, <span style="color:#a6e22e">onzoom</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying zooming behaviour to plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">zoom</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of empty collection for items </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all new data-element connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending actual element to every selection item </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;circle&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting circle radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;r&#39;</span>, <span style="color:#e6db74">&#39;5&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting circle fill color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting circle stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting item x coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cx&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting item y coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;cy&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating container element for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x axis position (25 is correction to make it visible) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(0, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">25</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">//calling x axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x axis container id </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;axisx&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating container element for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y axis position (30 is correction to make it visible) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">10</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y axis container id </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;axisy&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// zoom event callback </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onzoom</span>({ <span style="color:#a6e22e">transform</span> }) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new transform coords for items container </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// because this is an element which should be </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changed on zoom or scrolling </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#a6e22e">transform</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating new scale for x with taking to account </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// applied transofrm </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newScaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">transform</span>.<span style="color:#a6e22e">rescaleX</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating new scale for y </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newScaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">transform</span>.<span style="color:#a6e22e">rescaleY</span>(<span style="color:#a6e22e">scaleY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating new x axis with new scale usage </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newAxisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">newScaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating new y axis with new scale usage </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newAxisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisLeft</span>(<span style="color:#a6e22e">newScaleY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying new x axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#axisx&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">newAxisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying new y axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#axisy&#39;</span>).<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">newAxisY</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/scatter/scatter-pixi/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/scatter/scatter-pixi/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeScatter</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Basic settings for plot customisation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">90</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">width</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1000</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Data item visual element radius </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">r</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">5</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fontSize</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">14</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#39;canvasContainer&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisNames</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;valx&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;valy&#39;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Simple dataset with random values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(<span style="color:#ae81ff">1000</span>).<span style="color:#a6e22e">fill</span>(<span style="color:#66d9ef">null</span>).<span style="color:#a6e22e">map</span>((<span style="color:#a6e22e">_</span>, <span style="color:#a6e22e">i</span>) =&gt; ({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">id</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">i</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">valx</span><span style="color:#f92672">:</span> Math.<span style="color:#a6e22e">ceil</span>((Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> (<span style="color:#a6e22e">max</span>))), </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">valy</span><span style="color:#f92672">:</span> Math.<span style="color:#a6e22e">ceil</span>((Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> (<span style="color:#a6e22e">max</span>))) </span></span><span style="display:flex;"><span> })) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// The plot function call </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scatter</span>({ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axisNames</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">height</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">padding</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">r</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">max</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fontSize</span> </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">init</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Main plot function </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Contains general rendering logic and interactivity update callback </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">scatter</span>(<span style="color:#a6e22e">params</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Extracting parameters used in the main function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">container</span>, <span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">max</span>, ...<span style="color:#a6e22e">options</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">params</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting scale function for horizontal values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scalex</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Scale</span>( </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Values range </span></span></span><span style="display:flex;"><span> [<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">max</span>], </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Plot horizontal size range </span></span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>] </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting scale function for vertical values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaley</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Scale</span>( </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Values range </span></span></span><span style="display:flex;"><span> [<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">max</span>], </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Plot vertical size range </span></span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>] </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the default PIXI app </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Application</span>({ </span></span><span style="display:flex;"><span> <span style="color:#75715e">// PIXI app container width </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">width</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">width</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// PIXI app container height </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">height</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// PIXI app container background </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">background</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;#2e2e2e&#39;</span> </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting popup container component and methods </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">popup</span>, ...<span style="color:#a6e22e">popupMethods</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">getPopup</span>(<span style="color:#a6e22e">options</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting dots container with items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">dots</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">renderDots</span>( </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Using scale functions on each data item to get values from coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>(<span style="color:#a6e22e">item</span> =&gt; ({ </span></span><span style="display:flex;"><span> ...<span style="color:#a6e22e">item</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">scalex</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#a6e22e">item</span>[<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">x</span>]), </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">scaley</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#a6e22e">item</span>[<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">y</span>]) </span></span><span style="display:flex;"><span> })), </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Passing popupMethods as parameters to bind popup event to items interactions </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">popupMethods</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Passing other plot options </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">options</span> </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting xAxis container and elements using scalex </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxisX</span>(<span style="color:#a6e22e">scalex</span>, <span style="color:#a6e22e">options</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting yAxis container and elements using scaley </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxisY</span>(<span style="color:#a6e22e">scaley</span>, <span style="color:#a6e22e">options</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting interactivity callbacks from Interactivity instance </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoom</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">startScroll</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">stopScroll</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onScroll</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Passing onInteraction callback as the constructor parameter </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (which will be called after each interaction event is fired) </span></span></span><span style="display:flex;"><span> } <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Interactivity</span>(<span style="color:#a6e22e">onInteraction</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying interactivity events on app container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;mousedown&#39;</span>, <span style="color:#a6e22e">startScroll</span>, <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;mouseup&#39;</span>, <span style="color:#a6e22e">stopScroll</span>, <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;mousemove&#39;</span>, <span style="color:#a6e22e">onScroll</span>, <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Touch events need to get initial touch with coordinates first </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;touchstart&#39;</span>, (<span style="color:#a6e22e">e</span>) =&gt; <span style="color:#a6e22e">startScroll</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">touches</span>[<span style="color:#ae81ff">0</span>]), <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;touchend&#39;</span>, (<span style="color:#a6e22e">e</span>) =&gt; <span style="color:#a6e22e">stopScroll</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">touches</span>[<span style="color:#ae81ff">0</span>]), <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;touchmove&#39;</span>, (<span style="color:#a6e22e">e</span>) =&gt; <span style="color:#a6e22e">onScroll</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">touches</span>[<span style="color:#ae81ff">0</span>]), <span style="color:#66d9ef">true</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>.<span style="color:#a6e22e">onwheel</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">zoom</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying plot components to the app </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">stage</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">dots</span>, <span style="color:#a6e22e">axisX</span>, <span style="color:#a6e22e">axisY</span>, <span style="color:#a6e22e">popup</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the application canvas to the container element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">appendChild</span>(<span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">view</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the onInteraction callback </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// Offset represents the current plot x and y coordinate offsets </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (value does not take scale into account) </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// Scale represents the current plot scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onInteraction</span>(<span style="color:#a6e22e">offset</span>, <span style="color:#a6e22e">scale</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the scale of the data items container </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (only data items need to be scaled visually) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dots</span>.<span style="color:#a6e22e">scale</span>.<span style="color:#a6e22e">set</span>(<span style="color:#a6e22e">scale</span>, <span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Removing outdated axes </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">stage</span>.<span style="color:#a6e22e">removeChild</span>(<span style="color:#a6e22e">axisX</span>, <span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the new offset to the data items container </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (only data items need to be moved visually) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dots</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">x</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dots</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">y</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the new scale data values range </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// This must be done to recalculate axes values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newMaxX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">scalex</span>.<span style="color:#a6e22e">invert</span>( </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">scalex</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#a6e22e">max</span>) <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) <span style="color:#f92672">-</span> (<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newMinX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">scalex</span>.<span style="color:#a6e22e">invert</span>( </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">scalex</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#ae81ff">1</span>) <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) <span style="color:#f92672">-</span> (<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newMaxY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaley</span>.<span style="color:#a6e22e">invert</span>( </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">scaley</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#ae81ff">1</span>) <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) <span style="color:#f92672">-</span> (<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newMinY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">scaley</span>.<span style="color:#a6e22e">invert</span>( </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">scaley</span>.<span style="color:#a6e22e">scale</span>(<span style="color:#a6e22e">max</span>) <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) <span style="color:#f92672">-</span> (<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating new horizontal and vertical scales with the new data range values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newScaley</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Scale</span>( </span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">newMinY</span>, <span style="color:#a6e22e">newMaxY</span>], </span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>] </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newScalex</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Scale</span>( </span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">newMinX</span>, <span style="color:#a6e22e">newMaxX</span>], </span></span><span style="display:flex;"><span> [<span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">padding</span>] </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating new axes with recalculated scales </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// This way axes will show values taking into account </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// the updated shift and scale values </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxisX</span>(<span style="color:#a6e22e">newScalex</span>, <span style="color:#a6e22e">options</span>) </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxisY</span>(<span style="color:#a6e22e">newScaley</span>, <span style="color:#a6e22e">options</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the new axes to the app container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">stage</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">axisX</span>, <span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates a container for data item elements </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// and adds them to it </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">renderDots</span>(<span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">handlers</span>, <span style="color:#a6e22e">options</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the main container for data items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Container</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting necessary parameters from the options object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">r</span>, <span style="color:#a6e22e">axisNames</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">options</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting interactivity handlers from the handlers parameter </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">showPopup</span>, <span style="color:#a6e22e">hidePopup</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">handlers</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the renderDot function for each data item </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">renderDot</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the container with data items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">container</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Function that adds data item graphics to the data items container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">renderDot</span>(<span style="color:#a6e22e">data</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating PIXI graphics for the data item </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">dot</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Graphics</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the event mode to &#39;dynamic&#39; so </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// interactivity events can be called for this graphics </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">eventMode</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;dynamic&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding item data to the current graphics object as a custom property, </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// so this data can be used later in interactivity events </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">__data__</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the cursor style on element hover </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">cursor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;pointer&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the element line style </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">lineStyle</span>(<span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">0x285674</span>, <span style="color:#ae81ff">1</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the element fill (background) style </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">beginFill</span>(<span style="color:#ae81ff">0xd0d4fc</span>, <span style="color:#ae81ff">1</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Drawing the actual graphic (circle) in the graphics element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// For the y coordinate, the position is calculated </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from the bottom of the canvas as values should grow from bottom to top </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">drawCircle</span>(<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">options</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">r</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting interactivity handlers for the graphic element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">onmouseenter</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">onmouseenter</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">dot</span>.<span style="color:#a6e22e">onmouseleave</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">onmouseleave</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the graphic element for the specific data item </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to the data items main container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">dot</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the mouseenter event handler </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// e - PIXI event object </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// &#39;this&#39; in this function will refer to the graphic element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// for which the event handler was called </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onmouseenter</span>(<span style="color:#a6e22e">e</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the tint for the item element to &#39;highlight&#39; </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// the element that was hovered by the pointer </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">tint</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0x285674</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting the original browser event object </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// which contains global pointer coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">event</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">originalEvent</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the showPopup interactivity handler, </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// which renders a popup with the interactivity event target data </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">showPopup</span>( </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the popup content from the data info </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that was stored in the graphic element </span></span></span><span style="display:flex;"><span> <span style="color:#e6db74">`id: </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">__data__</span>.<span style="color:#a6e22e">id</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span></span></span><span style="display:flex;"><span><span style="color:#e6db74">${</span><span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">x</span><span style="color:#e6db74">}</span><span style="color:#e6db74">: </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">__data__</span>[<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">x</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74"> </span></span></span><span style="display:flex;"><span><span style="color:#e6db74">${</span><span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">y</span><span style="color:#e6db74">}</span><span style="color:#e6db74">: </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">__data__</span>[<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">y</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74"> </span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> `</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Passing the pointer coordinates from the original event object, </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// so the popup will be rendered where the pointer is </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">global</span>.<span style="color:#a6e22e">x</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">global</span>.<span style="color:#a6e22e">y</span> </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the mouseleave event handler </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onmouseleave</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Removing the element &#39;highlight&#39; </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">tint</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0xFFFFFF</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the hidePopup interactivity handler </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to remove the popup with the selected item data </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">hidePopup</span>() </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates a container with the y-axis and its elements </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getAxisY</span>(<span style="color:#a6e22e">values</span>, { <span style="color:#a6e22e">height</span>, <span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">fontSize</span>, <span style="color:#a6e22e">axisNames</span> }) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Count of ticks that will be rendered on the axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">steps</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Initial axis coordinates (top-left corner, accounting for padding) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">startx</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">starty</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the total length of the axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// It should have a length of the total height minus padding </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// and minus the distance to the start y-coordinate </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">length</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">starty</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the general getAxis function to get the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// and the axis line of a specific size </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axis</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxis</span>(<span style="color:#ae81ff">1</span>, <span style="color:#a6e22e">length</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the getTicks function that creates the ticks container, </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// calculates the values, and adds the tick elements to the container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ticks</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getTicks</span>(<span style="color:#a6e22e">values</span>, <span style="color:#a6e22e">steps</span>, <span style="color:#a6e22e">fontSize</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// For every tick, calling the applyTickCoord function </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that applies the tick coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ticks</span>.<span style="color:#a6e22e">children</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">applyTickCoord</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Slight offset of the entire ticks for better visibility </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ticks</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">-=</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the getLabel function </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that creates the label object for the axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">label</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getLabel</span>(<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">fontSize</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">4</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the label coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the ticks and label to the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">ticks</span>, <span style="color:#a6e22e">label</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the axis coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">startx</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">starty</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">axis</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Function that applies the tick coordinates for the Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">applyTickCoord</span>(<span style="color:#a6e22e">tick</span>, <span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculation of the width of one step (tick) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">stepWidth</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">length</span> <span style="color:#f92672">/</span> (<span style="color:#a6e22e">steps</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the offset for each step </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">offset</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">stepWidth</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">i</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the x-coordinate (to the left from the axis line) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">width</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the y-coordinate for the tick (from bottom to top) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">2</span>) <span style="color:#f92672">-</span> <span style="color:#a6e22e">offset</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">fontSize</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates a container with the x-axis and its elements </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// The base logic is the same as in getAxisY </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// but with different coordinate calculations </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getAxisX</span>(<span style="color:#a6e22e">values</span>, { <span style="color:#a6e22e">width</span>, <span style="color:#a6e22e">height</span>, <span style="color:#a6e22e">padding</span>, <span style="color:#a6e22e">fontSize</span>, <span style="color:#a6e22e">axisNames</span> }) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">steps</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">startx</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">starty</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">length</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">startx</span>; </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axis</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getAxis</span>(<span style="color:#a6e22e">length</span>, <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">ticks</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getTicks</span>(<span style="color:#a6e22e">values</span>, <span style="color:#a6e22e">steps</span>, <span style="color:#a6e22e">fontSize</span>); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">stepWidth</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">length</span> <span style="color:#f92672">/</span> (<span style="color:#a6e22e">steps</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// For every tick, calling the applyTickCoord function </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that applies the tick coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ticks</span>.<span style="color:#a6e22e">children</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">applyTickCoord</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Slight offset for better visibility (below the axis line) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">ticks</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">+=</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the getLabel function </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that creates the label object for the axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">label</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getLabel</span>(<span style="color:#a6e22e">axisNames</span>.<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">fontSize</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">4</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the label coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">length</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">label</span>.<span style="color:#a6e22e">height</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the ticks and label to the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">ticks</span>, <span style="color:#a6e22e">label</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the axis coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">startx</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">axis</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">starty</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">axis</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Function that applies the tick coordinates for the X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">applyTickCoord</span>(<span style="color:#a6e22e">tick</span>, <span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">offset</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">stepWidth</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">i</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">offset</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">tick</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates an axis label object </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getLabel</span>(<span style="color:#a6e22e">name</span>, <span style="color:#a6e22e">fontSize</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating a label text object by calling PIXI.Text </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">label</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Text</span>(<span style="color:#a6e22e">name</span>, { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying text options </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fill</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0xFFFFFF</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fontSize</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">fontSize</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fontWeight</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;bold&#39;</span> </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the label object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">label</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates an axis container and axis line </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getAxis</span>(<span style="color:#a6e22e">endx</span>, <span style="color:#a6e22e">endy</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Container</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the axis line graphics </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">graphics</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Graphics</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the axis line style </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">graphics</span>.<span style="color:#a6e22e">lineStyle</span>(<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">0xFFFFFF</span>, <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the line fill color (if it will be wider than 1 px) </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">graphics</span>.<span style="color:#a6e22e">beginFill</span>(<span style="color:#ae81ff">0xFFFFFF</span>, <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Drawing the axis line by calling the drawRect function </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">graphics</span>.<span style="color:#a6e22e">drawRect</span>(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">endx</span>, <span style="color:#a6e22e">endy</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the axis line to the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">graphics</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the axis container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">container</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that creates an axis ticks container and fills it with calculated ticks </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getTicks</span>(<span style="color:#a6e22e">scale</span>, <span style="color:#a6e22e">steps</span>, <span style="color:#a6e22e">fontSize</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the ticks container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">container</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Container</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting the axis data range from the scale as these values are used to create the scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">range</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">scale</span>.<span style="color:#a6e22e">valueRange</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating and rounding the final (biggest) value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">finalValue</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">ceil</span>(<span style="color:#a6e22e">range</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">/</span> <span style="color:#ae81ff">10</span>) <span style="color:#f92672">*</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the value for each step </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">step</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">finalValue</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">range</span>[<span style="color:#ae81ff">0</span>]) <span style="color:#f92672">/</span> (<span style="color:#a6e22e">steps</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating a temporary ticks array that will be used for value calculations </span></span></span><span style="display:flex;"><span> Array.<span style="color:#a6e22e">from</span>({ <span style="color:#a6e22e">length</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">steps</span> }).<span style="color:#a6e22e">forEach</span>((<span style="color:#a6e22e">_</span>, <span style="color:#a6e22e">i</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the getTickValue function that returns the value for each tick based on its position </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getTickValue</span>(<span style="color:#a6e22e">i</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the getTick function that creates the graphical tick object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">tick</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getTick</span>(<span style="color:#a6e22e">value</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Adding the tick object to the ticks container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">container</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">tick</span>); </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the ticks container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">container</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Helper function for getting the tick value based on its position in the line </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getTickValue</span>(<span style="color:#a6e22e">position</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the tick value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">value</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">range</span>[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">+</span> <span style="color:#a6e22e">position</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">step</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Rounding the tick value and returning it </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> Math.<span style="color:#a6e22e">ceil</span>(<span style="color:#a6e22e">value</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">10</span>) <span style="color:#f92672">*</span> <span style="color:#ae81ff">10</span>; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Function that creates the tick graphical object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getTick</span>(<span style="color:#a6e22e">value</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the tick object using the PIXI.Text function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Text</span>(<span style="color:#a6e22e">value</span>, { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying tick options </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fill</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0xFFFFFF</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fontSize</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">fontSize</span> </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#75715e">// Function that returns a container and handlers for the popup </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getPopup</span>({ <span style="color:#a6e22e">fontSize</span> }) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the internal popup padding </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">padding</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">20</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the general popup container </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">popup</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Container</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the popup graphics object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">wrapper</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Graphics</span>(); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Creating the internal popup content object </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">PIXI</span>.<span style="color:#a6e22e">Text</span>(<span style="color:#e6db74">&#39;&#39;</span>, { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the popup content options </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fill</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0xFFFFFF</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fontSize</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">fontSize</span> </span></span><span style="display:flex;"><span> }); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Applying the popup graphics and content objects to the container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">popup</span>.<span style="color:#a6e22e">addChild</span>(<span style="color:#a6e22e">wrapper</span>, <span style="color:#a6e22e">text</span>); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning the popup container and handlers </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">popup</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">hidePopup</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">showPopup</span> </span></span><span style="display:flex;"><span> }; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Handler to be called when the popup should be opened </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">showPopup</span>(<span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the popup text content </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the popup text content coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">y</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">padding</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Making the popup container graphics visible by drawing it </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the container border style </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">lineStyle</span>(<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">0xFFFFFF</span>, <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the container background style </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">beginFill</span>(<span style="color:#ae81ff">0x2E2E2E</span>, <span style="color:#ae81ff">1</span>); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Drawing the container rectangle with a size to fit the popup text </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">drawRect</span>(<span style="color:#a6e22e">x</span>, <span style="color:#a6e22e">y</span>, <span style="color:#a6e22e">padding</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">2</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">width</span>, <span style="color:#a6e22e">padding</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">2</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">height</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Handler to be called when the popup should be hidden </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">hidePopup</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Removing the popup text from the container </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">text</span>.<span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>; </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Clearing the popup container graphics </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">wrapper</span>.<span style="color:#a6e22e">clear</span>(); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75715e">// This is a class that contains state and an API for interactive plot calculations </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Interactivity</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the scale (zoom) value </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the current offset value </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">offset</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the total (global) offset </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// It stores the offset value before the current scrolling </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">_totalOffset</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that contains the mouse position </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// at the moment of scrolling start </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">_mousePosition</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that indicates whether the mouse button is pressed </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">isDown</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that will contain the update callback </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// The value will be assigned in the constructor </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onUpdate</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">constructor</span>(<span style="color:#a6e22e">onInteraction</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Assigning the update callback to its property </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">onUpdate</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">onInteraction</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Zoom handler that should be called on the onwheel event in PIXI </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoom</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Scale borders </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleMin</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleMax</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">2</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Getting the rounded value of how much was &#39;scrolled&#39; </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">path</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">deltaY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the scale change step </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleStep</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">path</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">10000</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating the new scale value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">newScale</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">scale</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">scaleStep</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Checking scale borders to prevent excessive scaling </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">newScale</span> <span style="color:#f92672">&gt;</span> <span style="color:#a6e22e">scaleMax</span> <span style="color:#f92672">||</span> <span style="color:#a6e22e">newScale</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">scaleMin</span>) <span style="color:#66d9ef">return</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the new scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">scale</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">newScale</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the update handler </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">update</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Returning false to prevent page scrolling </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">false</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Scroll start handler that needs to be assigned </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to the app container&#39;s mousedown event </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">startScroll</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Checking if scrolling is not in progress to prevent conflict </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#f92672">!</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isDown</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the isDown property to indicate </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that the mouse button is pressed </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isDown</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the mouse position at the moment of scrolling start </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_mousePosition</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">x</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">clientX</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">y</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">clientY</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Scroll stop handler that needs to be assigned </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to the app container&#39;s mouseup event </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">stopScroll</span> <span style="color:#f92672">=</span> () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Checking if scrolling is in progress </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isDown</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the isDown property to false </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to indicate that the mouse button is not pressed </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isDown</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Setting the total offset data </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// that will be used for the next scrolling </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_totalOffset</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> ...<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">offset</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Scroll handler that needs to be assigned to the app container&#39;s mousemove event </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onScroll</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Checking if scrolling is in progress </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">isDown</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculating and saving the new offset coordinates </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_mousePosition</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">clientX</span>) <span style="color:#f92672">+</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_totalOffset</span>.<span style="color:#a6e22e">x</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">offset</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">=</span> <span style="color:#f92672">-</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_mousePosition</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">clientY</span>) <span style="color:#f92672">+</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_totalOffset</span>.<span style="color:#a6e22e">y</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the update handler </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">update</span>() </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Update handler </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">update</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calling the onUpdate callback and passing offset and scale data to it </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">onUpdate</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">offset</span>, <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">scale</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75715e">// This is a class that provides an API for value scaling calculations between two ranges </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Scale</span> { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the range of possible values </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">valueRange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the target range </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">targetRange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">null</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Property that stores the scaling factor </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">m</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">constructor</span>(<span style="color:#a6e22e">valueRange</span>, <span style="color:#a6e22e">targetRange</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Save the value and target ranges </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">valueRange</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">valueRange</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">targetRange</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">targetRange</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculate and save the scaling factor </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">m</span> <span style="color:#f92672">=</span> (<span style="color:#ae81ff">1.0</span> <span style="color:#f92672">*</span> <span style="color:#a6e22e">targetRange</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">-</span> <span style="color:#a6e22e">targetRange</span>[<span style="color:#ae81ff">0</span>]) <span style="color:#f92672">/</span> (<span style="color:#a6e22e">valueRange</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">-</span> <span style="color:#a6e22e">valueRange</span>[<span style="color:#ae81ff">0</span>]) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// A method that allows scaling a value from the value range </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to a value in the target range </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span>(<span style="color:#a6e22e">num</span>){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculate and return the scaled value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">targetRange</span>[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">+</span> ( </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">m</span> <span style="color:#f92672">*</span> (<span style="color:#a6e22e">num</span> <span style="color:#f92672">-</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">valueRange</span>[<span style="color:#ae81ff">0</span>]) </span></span><span style="display:flex;"><span> ); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// A method that allows inverting a scaled value </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to its original value in the original range </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">invert</span>(<span style="color:#a6e22e">num</span>){ </span></span><span style="display:flex;"><span> <span style="color:#75715e">// Calculate and return the original value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> (<span style="color:#a6e22e">num</span> <span style="color:#f92672">-</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">targetRange</span>[<span style="color:#ae81ff">0</span>]) <span style="color:#f92672">/</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">m</span> <span style="color:#f92672">+</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">valueRange</span>[<span style="color:#ae81ff">0</span>] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/stacked/stacked-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/stacked/stacked-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeStacked</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//empty data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> [[<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>], [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>], [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>]] </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// max data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">10</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// min data item value </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">min</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting values for margins of svg content </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">margin</span> <span style="color:#f92672">=</span> {<span style="color:#a6e22e">top</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">left</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">50</span>, <span style="color:#a6e22e">right</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>, <span style="color:#a6e22e">bottom</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span>} </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// depends on item count, not values </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting X scale domain </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from 0 to 4 because inner data array length is 5 </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">4</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting scale range </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span>, <span style="color:#a6e22e">width</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">right</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating linear scaling for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting Y scale domain </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// Y is representing values so using min and max value </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// max and min should be swapped because value should be represented </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from down to top </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">max</span>, <span style="color:#a6e22e">min</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of colors scale </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">scaleColors</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleQuantize</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#ae81ff">0</span>, <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">length</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([ </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;#00b6e9&#39;</span>, <span style="color:#e6db74">&#39;#008ae6&#39;</span>, <span style="color:#e6db74">&#39;#4b59d2&#39;</span> </span></span><span style="display:flex;"><span> ]) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of X axis </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisX</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisBottom</span>(<span style="color:#a6e22e">scaleX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting ticks for x axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// according to data array length </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">ticks</span>(<span style="color:#ae81ff">5</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// settin x axis tick format </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">tickFormat</span>(<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// for better readability increase the value on 1 </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to show values from 1 to 5 (0 to 4 by default) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span> </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// swapping range values because they should increase </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// from bottom to top. its opposite by default </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axisY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">axisLeft</span>( </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">scaleLinear</span>() </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">domain</span>([<span style="color:#a6e22e">min</span>, <span style="color:#a6e22e">max</span>]) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">range</span>([<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>, <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">top</span>]) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating area generator function </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">area</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">area</span>() </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying options to area generator </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">area</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// x coord according to data item index </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">x</span>((<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleX</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// y0 is static and should be the bottom of the plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">y0</span>(<span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// y1 is the data item value </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">y1</span>(<span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">scaleY</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating group for plot items </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">items</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// joining data to new path elements </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">join</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting d attr of every path element by calling area generator </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">area</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting fill color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, (<span style="color:#a6e22e">d</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">scaleColors</span>(<span style="color:#a6e22e">i</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#e6db74">&#39;#00b6e9&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper element for Y axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling Y axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisY</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting Y axis position to be on the plot left </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// -5 is slight corretion for better visibility </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">left</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">5</span><span style="color:#e6db74">}</span><span style="color:#e6db74">, 0)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper element for X axis </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling X axis component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">axisX</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting X axis position to be on the plot bottom </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// +5 is slight corretion for better visibility </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#e6db74">`translate(0, </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">height</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">margin</span>.<span style="color:#a6e22e">bottom</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">5</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)`</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// function for showing dynamic data and view change </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// it generates new data, applies to plot and </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changes the view with animation </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">change</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// updating of dataset </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">map</span>( </span></span><span style="display:flex;"><span> (<span style="color:#a6e22e">item</span>, <span style="color:#a6e22e">i</span>) =&gt; <span style="color:#a6e22e">item</span>.<span style="color:#a6e22e">map</span>( </span></span><span style="display:flex;"><span> () =&gt; Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">max</span> <span style="color:#f92672">/</span> (<span style="color:#a6e22e">i</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>)) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting of all path elements on plot </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying data to items selection </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">data</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating transition </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">transition</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting transition duration </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">duration</span>(<span style="color:#ae81ff">300</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new value for d attribute of every path element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">area</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling change function every second </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">change</span>, <span style="color:#ae81ff">1000</span>) </span></span><span style="display:flex;"><span>} </span></span></code></pre></div> https://alexchirkin.me/charts/tree/tree-d3/ Mon, 01 Jan 0001 00:00:00 +0000 https://alexchirkin.me/charts/tree/tree-d3/ <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">makeTree</span>() { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//data set </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;root&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">children</span><span style="color:#f92672">:</span> [ </span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 1&#39;</span>}, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 2&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">children</span><span style="color:#f92672">:</span> [ </span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 4&#39;</span>}, </span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 5&#39;</span>} </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 3&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">children</span><span style="color:#f92672">:</span> [ </span></span><span style="display:flex;"><span> {<span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;child 6&#39;</span>} </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> ] </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">strokeColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#d0d4fc&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">fillColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#285674&#39;</span> </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">selectionColor</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;#4b59d2&#39;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting root element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">svg</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">select</span>(<span style="color:#e6db74">&#39;#chart&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting cursor style </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;cursor&#39;</span>, <span style="color:#e6db74">&#39;pointer&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element width </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">width</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;width&#39;</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting root element height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">height</span> <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;height&#39;</span>)) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// tree node height </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodeHeight</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">50</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// tree node size </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodeWidth</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">120</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// length of space between nodes </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodeSeparation</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">30</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating zoom behaviour </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">zoom</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">zoom</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting extent for zooming </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">scaleExtent</span>([<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>]) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting callback event (both scrolling and zooming) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;zoom&#39;</span>, <span style="color:#a6e22e">onzoom</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating tree hierarchy from the data </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">nodes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">hierarchy</span>(<span style="color:#a6e22e">data</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">children</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating generator for link paths </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (x and y coords should be swapped for horizontal rendering) </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">lnkMkr</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">linkHorizontal</span>().<span style="color:#a6e22e">x</span>( <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span> ).<span style="color:#a6e22e">y</span>( <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating of common component for all plot elements </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">g</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting initial transform for plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>( </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling zoom.transform manually </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">zoom</span>.<span style="color:#a6e22e">transform</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// passing initial transform params by calling translate func </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">zoomIdentity</span>.<span style="color:#a6e22e">translate</span>(<span style="color:#a6e22e">width</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">4</span>, <span style="color:#a6e22e">height</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying zooming behaviour to plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">zoom</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating defs element for plot </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// which contain base element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// for tree nodes </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">svg</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;defs&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating base tree node element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;rect&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting id for base tree node element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;id&#39;</span>, <span style="color:#e6db74">&#39;node&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting width for nodes </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;width&#39;</span>, <span style="color:#a6e22e">nodeWidth</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting height for nodes </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;height&#39;</span>, <span style="color:#a6e22e">nodeHeight</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting border radius </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;rx&#39;</span>, <span style="color:#e6db74">&#39;20&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;ry&#39;</span>, <span style="color:#e6db74">&#39;20&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke width </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke-width&#39;</span>, <span style="color:#ae81ff">2</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying tree layout to hierarchy </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d3</span>.<span style="color:#a6e22e">tree</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting nodes size </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">nodeSize</span>([ </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodeHeight</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">nodeSeparation</span>, </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">nodeWidth</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">nodeSeparation</span> </span></span><span style="display:flex;"><span> ])(<span style="color:#a6e22e">nodes</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying links to the plot </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection of path elements </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">links</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying links data from hierarchy </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>(<span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">links</span>()) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting all new data connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending real path elements </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;path&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting path d param by using links generator </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;d&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">lnkMkr</span>(<span style="color:#a6e22e">d</span>)) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#e6db74">&#39;#a9a9b3&#39;</span> ) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting fill property </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// (none value because it should be just line) </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;none&#39;</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying nodes elements </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating empty selection </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying nodes data from hierarchy </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// .descendants returns entire hierarchy </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">data</span>( <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">descendants</span>() ) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting all new data connections </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">enter</span>() </span></span><span style="display:flex;"><span> <span style="color:#75715e">// calling node element component function </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">call</span>(<span style="color:#a6e22e">renderItem</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// component function for tree nodes </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">renderItem</span>(<span style="color:#a6e22e">selection</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// creating wrapper for node elements </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">g</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">selection</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;g&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting text positioning style </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;text-anchor&#39;</span>, <span style="color:#e6db74">&#39;middle&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting mouseenter callback </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseenter&#39;</span>, <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>, <span style="color:#a6e22e">d</span>) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// getting path from root node to current node </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// current node is which has mouseover </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">path</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">nodes</span>.<span style="color:#a6e22e">path</span>(<span style="color:#a6e22e">d</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// changing color for links (path elements) </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// which connects nodes in path </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">links</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting stroke style </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>( </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;stroke&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// checking that both linked nodes are in selected path </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">includes</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">target</span>) <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">includes</span>(<span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">source</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting specific color </span></span></span><span style="display:flex;"><span> <span style="color:#f92672">?</span> <span style="color:#a6e22e">selectionColor</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">strokeColor</span> </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// changing fill color for nodes which in selected path </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// selecting all rect in node elements in plot </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// use elements should be selected because all nodes reusing rect </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// element from defs </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;use&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// applying fill style for every node element </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>( </span></span><span style="display:flex;"><span> <span style="color:#e6db74">&#39;fill&#39;</span>, </span></span><span style="display:flex;"><span> <span style="color:#75715e">// checking is element included in selected path </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// and selecting specific color </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">path</span>.<span style="color:#a6e22e">includes</span>(<span style="color:#a6e22e">d</span>) <span style="color:#f92672">?</span> <span style="color:#a6e22e">selectionColor</span> <span style="color:#f92672">:</span> <span style="color:#a6e22e">fillColor</span> </span></span><span style="display:flex;"><span> ) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting mouseleave event </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// to reset all styles for links and nodes in plot </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">on</span>(<span style="color:#e6db74">&#39;mouseleave&#39;</span>, <span style="color:#66d9ef">function</span>() { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">selectAll</span>(<span style="color:#e6db74">&#39;use&#39;</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">links</span>.<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;stroke&#39;</span>, <span style="color:#a6e22e">strokeColor</span>) </span></span><span style="display:flex;"><span> }) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending node element by using </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// base rect element from defs </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending use element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;use&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting href param on base element to reuse </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;href&#39;</span>, <span style="color:#e6db74">&#39;#node&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord for rect element </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// with some correction for better positioning </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">60</span> ) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord for rect element with some correction </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">-</span> <span style="color:#ae81ff">25</span> ) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting rect background color </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">style</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#a6e22e">fillColor</span>) </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">// appending text element </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;text&#39;</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// coords are swapped for horizontal tree positioning </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting x coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;x&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">y</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting y coord </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;y&#39;</span>, <span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">x</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">5</span>) </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting text </span></span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">text</span>(<span style="color:#a6e22e">d</span> =&gt; <span style="color:#a6e22e">d</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">name</span>) </span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;fill&#39;</span>, <span style="color:#e6db74">&#39;currentColor&#39;</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#75715e">// zoom event callback </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">onzoom</span>({ <span style="color:#a6e22e">transform</span> }) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">// setting new transform coords for items container </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// because this is an element which should be </span></span></span><span style="display:flex;"><span> <span style="color:#75715e">// changed on zoom or scrolling </span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">g</span>.<span style="color:#a6e22e">attr</span>(<span style="color:#e6db74">&#39;transform&#39;</span>, <span style="color:#a6e22e">transform</span>) </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>} </span></span></code></pre></div>