Adding Charts in Ionic 4 apps and PWA: Part 2- Using D3.js
Tags: ionic, d3js, charts, pwa
Published: 2020-03-25 04:57:26

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="a903" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="b139" class="graf graf--p graf-after--figure">This is part 2 of a 4 part series regarding <strong class="markup--strong markup--p-strong">how to create charts in Ionic 4 apps. </strong>In this Part 2, you’ll learn how to create various types of Charts using D3.js in Ionic 4 apps and PWA</p><blockquote name="7afa" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using Chart.js</a>)<br>(Part 3— <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using HighCharts</a>)<br>(Part 4&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 4&#8202;—&#8202;Using Google Charts</a>)</blockquote><p name="6d65" class="graf graf--p graf-after--blockquote">In these posts, you’ll learn how to add and play with different types of charts in Ionic 4 apps. We will explore several alternatives for Charting i.e. Chart.js, D3.js, Highcharts, GoogleCharts and others.</p><blockquote name="61c0" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-d3js"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-d3js</strong></a></blockquote><h3 name="524c" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4</h3><p name="e21e" class="graf graf--p graf-after--h3">I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.</p><p name="a6fd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><h3 name="12c3" class="graf graf--h3 graf-after--p">What is&nbsp;d3.js</h3><p name="2eeb" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">D3.js&#8202;—&#8202;</strong>D3.js (or just <strong class="markup--strong markup--p-strong">D3</strong> for <strong class="markup--strong markup--p-strong">Data-Driven Documents</strong>) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the Scalable Vector Graphics (SVG), HTML5, and CSS standards (but it can also work via <code class="markup--code markup--p-code">canvas</code> too if need be). It is mainly used for real-time data visualizations or admin dashboards.</p><figure tabindex="0" contenteditable="false" name="87b1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 620px; max-height: 505px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 81.5%;"></div><img class="graf-image" data-image-id="1*Cns0pxD5LxfFRH9pm28p0A.gif" data-width="620" data-height="505" src="https://cdn-images-1.medium.com/max/720/1*Cns0pxD5LxfFRH9pm28p0A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">D3.js in&nbsp;action</figcaption></figure><p name="bf83" class="graf graf--p graf-after--figure">D3 creates amazingly detailed visualizations, both static and dynamic. One of the popular uses of D3.js is to visualization data over maps of different types</p><figure tabindex="0" contenteditable="false" name="c0e0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 431px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.5%;"></div><img class="graf-image" data-image-id="1*qOOebR72VOalkFes7xmwKQ.png" data-width="1009" data-height="621" src="https://cdn-images-1.medium.com/max/720/1*qOOebR72VOalkFes7xmwKQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Data visualization over map using&nbsp;D3.js</figcaption></figure><p name="b1ee" class="graf graf--p graf-after--figure">Here is another one&#8202;—&#8202;mapping Bible contradictions, available at <a href="http://bibviz.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">http://bibviz.com</a></p><figure tabindex="0" contenteditable="false" name="9db3" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 310px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.3%;"></div><img class="graf-image" data-image-id="1*2Gj7JWsGgTfEt51ghhxw8w.png" data-width="1320" data-height="585" src="https://cdn-images-1.medium.com/max/720/1*2Gj7JWsGgTfEt51ghhxw8w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ee7b" class="graf graf--p graf-after--figure">D3 can do magic if you know what you exactly want it to do. Check out more D3.js <a href="https://github.com/d3/d3/wiki/Gallery"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">examples</a> here</p><p name="e05a" class="graf graf--p graf-after--p">Some salient points for D3.js</p><ul class="postList"><li name="c90a" class="graf graf--li graf-after--p">D3.js focuses on binding data to DOM elements.</li><li name="4fbf" class="graf graf--li graf-after--li">D3.js is written in JavaScript and uses a functional style. That means you can reuse code and add specific functions as you wish, which makes it powerful</li><li name="3d04" class="graf graf--li graf-after--li">It is customizable ground up i.e. there is no standard bar-chart function, or pie-chart function you can use to create a simple chart. Everything needs to be made custom. This makes it amazingly powerful, but there is definitely a learning curve</li><li name="13da" class="graf graf--li graf-after--li">Because there is nothing pre-built, if you are simply looking for bar-charts and pie charts, D3 is probably not for you. But <strong class="markup--strong markup--li-strong">if you want your user to interact with data in a cool way, D3 is the answer</strong></li></ul><p name="e733" class="graf graf--p graf-after--li">If you are looking for simpler chart solutions, there are many other popular charting libraries like <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Chart.js</a>, HighCharts, FusionCharts, Angular Google Charts and more. All of these are custom libraries to create charts in a simple manner.</p><h3 name="bec3" class="graf graf--h3 graf-after--p">Structure of the&nbsp;post</h3><p name="36ca" class="graf graf--p graf-after--h3">We’ll go about the post in a step-by-step manner</p><ol class="postList"><li name="b1b2" class="graf graf--li graf-after--p">Create a basic Ionic 4 app</li><li name="f32b" class="graf graf--li graf-after--li">Add D3.js to the app</li><li name="97a4" class="graf graf--li graf-after--li">Create your first basic Bar Chart with D3.js&#8202;—&#8202;understand concepts</li><li name="6c4a" class="graf graf--li graf-after--li">Create simple Pie Chart with D3.js</li><li name="ae28" class="graf graf--li graf-after--li">Create more advanced charts</li><li name="e86f" class="graf graf--li graf-after--li">Test your app on Android</li></ol><blockquote name="5a74" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-d3js"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-d3js</strong></a></blockquote><h3 name="cd08" class="graf graf--h3 graf-after--blockquote">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="b909" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.12.0 currently)</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-d3js sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5a2e" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. Next we’ll add the D3js library to our app.</p><h3 name="e177" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Add D3.js to the&nbsp;app</h3><p name="b479" class="graf graf--p graf-after--h3">To create charts/visualizations you need to add D3.js library to the app. Add the library from npm package</p><pre name="6b0d" class="graf graf--pre graf-after--p">npm install d3 --save</pre><p name="a09a" class="graf graf--p graf-after--pre">This will install the library in your node modules. Now you can import different modules of the library in your page using <code class="markup--code markup--p-code">import</code> syntax. We’ll see individual imports in next section.</p><p name="4b0f" class="graf graf--p graf-after--p">That’s it&nbsp;! You are ready to use D3.js in your app and PWA pages.</p><h3 name="2135" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Create basic Bar chart with&nbsp;D3.js</h3><p name="92ce" class="graf graf--p graf-after--h3">D3.js uses HTML5 / CSS and SVGs to create charts and visualizations in HTML5. We will add a simple 1 <code class="markup--code markup--p-code">div</code> in the HTML page of our app’s page, and access that <code class="markup--code markup--p-code">div</code> in the <code class="markup--code markup--p-code">page.ts</code> file to include our SVG based chart</p><p name="ad12" class="graf graf--p graf-after--p">Let’s add a simple <code class="markup--code markup--p-code">div</code>element in HTML called <code class="markup--code markup--p-code">barChart</code></p><figure tabindex="0" contenteditable="false" name="4f11" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/bf1670c3c6ace0ff527ab0d80d0af6a2.js %}</div></div></figure><p name="b8a3" class="graf graf--p graf-after--figure">Next we’ll import D3 and relevant modules in <code class="markup--code markup--p-code">bar.page.ts</code> page. Here we’ll also access the <code class="markup--code markup--p-code">barChart</code> div and create svg, axes inside it, and finally plot data inside it using D3 methods. Complete code to create a bar chart would be</p><figure tabindex="0" contenteditable="false" name="53cd" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/93d7909fe512e481af9fe0f3aad67674.js %}</div></div></figure><p name="e458" class="graf graf--p graf-after--figure">You probably already realize that D3 is way more difficult for easier charts, compared to other libraries like Chart.js etc. There’s a lot happening in the code above, so let’s break it down</p><ol class="postList"><li name="eb60" class="graf graf--li graf-after--p">First we imported D3 and its modules in the <code class="markup--code markup--li-code">bar.page.ts</code> using</li></ol><pre name="92d0" class="graf graf--pre graf-after--li">import * as d3 from 'd3-selection';<br>import * as d3Scale from 'd3-scale';<br>import * as d3Array from 'd3-array';<br>import * as d3Axis from 'd3-axis';</pre><p name="f2d2" class="graf graf--p graf-after--pre">The module names are more or less self explanatory</p><p name="ee68" class="graf graf--p graf-after--p">2. There are four methods at work in this code</p><ul class="postList"><li name="3e39" class="graf graf--li graf-after--p">this.init();</li><li name="cae8" class="graf graf--li graf-after--li">this.initAxes();</li><li name="b179" class="graf graf--li graf-after--li">this.drawAxes();</li><li name="4a43" class="graf graf--li graf-after--li">this.drawChart();</li></ul><h4 name="ab3f" class="graf graf--h4 graf-after--li">init()</h4><figure tabindex="0" contenteditable="false" name="69f9" class="graf graf--figure graf--iframe graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/822133af2dfa88544e63f5977cacad80.js %}</div></div></figure><p name="1f72" class="graf graf--p graf-after--figure">This is the first method called after page loads. It selects <code class="markup--code markup--p-code">barChart</code> element in the DOM and appends an <code class="markup--code markup--p-code">svg</code> element to it. After that, all the lines are related to adding attributes to the <code class="markup--code markup--p-code">svg</code> element, like <code class="markup--code markup--p-code">height</code>&nbsp;, <code class="markup--code markup--p-code">width</code> etc.</p><p name="c270" class="graf graf--p graf-after--p">In the end, it also appends a <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">&lt;g&gt;</strong></code> element in the <code class="markup--code markup--p-code">svg</code>&nbsp;. The <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0">&lt;<strong class="markup--strong markup--p-strong">g</strong>&gt;</code> SVG element is a container used to group other SVG elements. Transformations applied to the <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">&lt;g&gt;</strong></code> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the &lt;use&gt; element.</p><p name="8398" class="graf graf--p graf-after--p">You can also check these element in the DOM using Chrome inspect tool. The <code class="markup--code markup--p-code">svg</code> and <code class="markup--code markup--p-code">&lt;g&gt;</code> elements are clearly visible here</p><figure tabindex="0" contenteditable="false" name="761a" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 316px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 45.2%;"></div><img class="graf-image" data-image-id="1*3XUgOvmHtS6d7T1NqzAPJw.png" data-width="786" data-height="355" src="https://cdn-images-1.medium.com/max/720/1*3XUgOvmHtS6d7T1NqzAPJw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="f274" class="graf graf--h4 graf-after--figure">initAxes()</h4><figure tabindex="0" contenteditable="false" name="17f8" class="graf graf--figure graf--iframe graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/d9473c6fed32fa360f5684b465627dc6.js %}</div></div></figure><p name="1d3b" class="graf graf--p graf-after--figure">In this function, we are initializing the axes of the chart. Notice how we have a <code class="markup--code markup--p-code">scaleBand</code> function for X axis, but <code class="markup--code markup--p-code">scaleLinear</code> for Y-axis. This is because we are creating a bar-chart (vertical), where the Y values will increase continuously, but X values are bundled for data. Also, the <code class="markup--code markup--p-code">padding(0.1)</code> is given in X-axis to create a gap between the bars.</p><p name="0ca7" class="graf graf--p graf-after--p">The domain (range) of the axes is also defined in a slightly different manner. X-axis has domain values as array, while Y-axis has domain values ranging from 0 to maximum of Y values.</p><h4 name="52de" class="graf graf--h4 graf-after--p">drawAxes()</h4><p name="5b0c" class="graf graf--p graf-after--h4">This function draws the initialized axes on the chart.</p><figure tabindex="0" contenteditable="false" name="8682" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e9460ee2fdfc6e5acf69a28f588e12e1.js %}</div></div></figure><p name="9d0d" class="graf graf--p graf-after--figure">Notice, we have added two <code class="markup--code markup--p-code">&lt;g&gt;</code> elements to the first <code class="markup--code markup--p-code">&lt;g&gt;</code> element which we added in <strong class="markup--strong markup--p-strong">init()</strong> function. Next steps are adding different HTML attributes to the <code class="markup--code markup--p-code">&lt;g&gt;</code> element.</p><p name="dad4" class="graf graf--p graf-after--p">Notice the <code class="markup--code markup--p-code">call(d3Axis.axisBottom())</code> and <code class="markup--code markup--p-code">call(d3Axis.axisLeft())</code> function calls. These are D3 specific function calls to create the axis values and text labels as per the data and domain defined in earlier steps.</p><p name="de57" class="graf graf--p graf-after--p">At this point the chart looks like this</p><figure tabindex="0" contenteditable="false" name="215e" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 390px; max-height: 692px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.4%;"></div><img class="graf-image" data-image-id="1*nvxsY3EO_BXxSuUcAJOr_w.png" data-width="390" data-height="692" src="https://cdn-images-1.medium.com/max/720/1*nvxsY3EO_BXxSuUcAJOr_w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="769e" class="graf graf--h4 graf-after--figure">drawChart()</h4><p name="fe75" class="graf graf--p graf-after--h4">Finally, we draw the values on chart in this function.</p><figure tabindex="0" contenteditable="false" name="579d" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a7943fb2a82eaa0316bf97e920995923.js %}</div></div></figure><p name="19a4" class="graf graf--p graf-after--figure">We attach <code class="markup--code markup--p-code">rect</code> element to every data contained in <code class="markup--code markup--p-code">this.barData</code> and set attributes of the <code class="markup--code markup--p-code">rect</code> (width, height, fill etc). Notice, the values are drawn as per the definition of <code class="markup--code markup--p-code">this.x</code> and <code class="markup--code markup--p-code">this.y</code> as defined in <strong class="markup--strong markup--p-strong">initAxes()</strong></p><p name="788f" class="graf graf--p graf-after--p">Here, you can attach custom classes, give each bar a different color and much more. There is no end of customization in D3 😎</p><p name="c754" class="graf graf--p graf-after--p">The Bar chart will look like this. Pretty cool, right&nbsp;!</p><figure tabindex="0" contenteditable="false" name="7c5f" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 683px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176%;"></div><img class="graf-image" data-image-id="1*Uc3DjWqW4FXyB6mBHaAMiQ.png" data-width="388" data-height="683" src="https://cdn-images-1.medium.com/max/720/1*Uc3DjWqW4FXyB6mBHaAMiQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="d2b0" class="graf graf--h3 graf-after--figure">Step 4— Create basic Pie chart with&nbsp;D3.js</h3><p name="7d1d" class="graf graf--p graf-after--h3">Pie chart creation is a little different from Bar Charts, because the linear domain is now changed to radial (angular?) domain. So instead of lengths we use arcs etc. Also, we’ll need to import different modules from D3.</p><p name="fc94" class="graf graf--p graf-after--p">Create a <code class="markup--code markup--p-code">div</code> element with id <code class="markup--code markup--p-code">pieChar</code> in your HTML. Then the complete TS code for a sample Pie chart will look like following</p><figure tabindex="0" contenteditable="false" name="bd4c" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/8b3a499b25c55a81efb94a1e83ea7c4e.js %}</div></div></figure><p name="9274" class="graf graf--p graf-after--figure">Notice that axes are replaced by <code class="markup--code markup--p-code">labelArc</code>&nbsp;. Broadly the creation process remain similar. I will leave it you to understand some of the things going on here. Trust me, it’s very easy to understand.</p><p name="1e79" class="graf graf--p graf-after--p">The Pie chart will look this</p><figure tabindex="0" contenteditable="false" name="2c16" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 388px; max-height: 685px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.5%;"></div><img class="graf-image" data-image-id="1*dERoXVyDQUmD_-AnCJkl_A.png" data-width="388" data-height="685" src="https://cdn-images-1.medium.com/max/720/1*dERoXVyDQUmD_-AnCJkl_A.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="5ec2" class="graf graf--p graf-after--figure is-selected">You’ll probably notice that D3 charts, as I have shown above, do not look as attractive as other libraries. That is not entirely true. D3 charts can be customized to any level, and they can look exactly as any other library’s charts (or better), but that will take effort on your side.</p><p name="9ae4" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">PWA users&nbsp;!</strong> Here’s how to current charts will look in a full screen desktop browser (remember, you can always customize the height, width and appearance as per screen size)</p><figure tabindex="0" contenteditable="false" name="5440" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*_ODsTAcD646bAaR4QAYldQ.png" data-width="1387" data-height="767" src="https://cdn-images-1.medium.com/max/720/1*_ODsTAcD646bAaR4QAYldQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">D3 bar chart in full desktop&nbsp;size</figcaption></figure><figure tabindex="0" contenteditable="false" name="ab5a" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.2%;"></div><img class="graf-image" data-image-id="1*wHFbcja_9hKXfA0uzcfdYw.png" data-width="1387" data-height="766" src="https://cdn-images-1.medium.com/max/720/1*wHFbcja_9hKXfA0uzcfdYw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">D3 pie chart in full desktop&nbsp;size</figcaption></figure><h3 name="b84a" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Create more advanced&nbsp;charts</h3><p name="fe22" class="graf graf--p graf-after--h3">As I discussed above, D3 can create amazing visualizations using JS. Let’s try to create something cool, which other libraries cannot build. I’m going to pick an example from the endless list of examples available at <a href="http://advanced"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">https://github.com/d3/d3/wiki/Gallery</a></p><p name="1e2f" class="graf graf--p graf-after--p">This example is taken from <a href="http://www.redotheweb.com/CodeFlower/"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">http://www.redotheweb.com/CodeFlower/</a>. This experiment visualizes source repositories using an interactive tree. Each disc represents a file, with a radius proportional to the number of lines of code (loc). All rendering is done client-side, in JavaScript. Try hovering on nodes to see the loc number, clicking on directory nodes to fold them, dragging nodes to rearrange the layout, and changing project to see different tree structures. Built with <a href="https://github.com/mbostock/d3"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">d3.js</a>. Inspired by <a href="https://code.google.com/p/codeswarm/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Code Swarm</a> and <a href="https://code.google.com/p/gource/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Gource</a>.</p><figure tabindex="0" contenteditable="false" name="b7d9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 599px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.1%;"></div><img class="graf-image" data-image-id="1*2Tcs2mZAJL9d0iPUqI4xCA.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/720/1*2Tcs2mZAJL9d0iPUqI4xCA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Power of D3 in Ionic 4&nbsp;apps</figcaption></figure><h3 name="3072" class="graf graf--h3 graf-after--figure">Step 6— Test your app in Android and as&nbsp;PWA</h3><p name="ac70" class="graf graf--p graf-after--h3">We have already tested the above d3 charts in browser. If you have carried out the above steps correctly, Android build should be a breeze.</p><p name="6245" class="graf graf--p graf-after--p">Run the following command to create Android platform</p><pre name="9f9d" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="f883" class="graf graf--p graf-after--pre">Once platform is added, run the app on device (Make sure you have a device attached to the system).</p><pre name="8b73" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="7820" class="graf graf--p graf-after--pre">Once your app is up and running on the device, you can start testing all the functions.</p><h3 name="dd96" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">In this post we learnt how to create simple charts using D3.js in Ionic 4 apps and PWA. Since D3.js is amazingly customizable, you need to take a little more effort to create simple charts, compared to other libraries, but you can create some amazing stuff in D3.js which other libraries cannot even think of.</p><p name="77f7" class="graf graf--p graf-after--p">In next posts of this series, we’ll learn how to create charts in Ionic 4 using Highcharts, Angular Google charts and other libraries.</p><blockquote name="3055" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic-4-d3js"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-d3js</strong></a></blockquote><p name="4613" class="graf graf--p graf-after--blockquote">Checkout other posts in this series</p><blockquote name="0118" class="graf graf--blockquote graf-after--p">(Part 1&#8202;—&#8202;<a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using Chart.js</a>)<br>(Part 3&#8202;—&#8202;<a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&#8202;—&#8202;Using HighCharts</a>)<br>(Part 4&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Adding Charts in Ionic 4 apps and PWA&nbsp;: Part 4&#8202;—&#8202;Using Google Charts</a>)</blockquote><p name="b70b" class="graf graf--p graf-after--blockquote"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em>Ionic 4 Chart App Starter&#8202;—&#8202;Ion Chart”<em class="markup--em markup--p-em"> today!!</em></strong></p><div name="3a8e" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://store.enappd.com/product/ionic-4-chart-app-starter-ion-chart/"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://store.enappd.com/product/ionic-4-chart-app-starter-ion-chart/"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Ionic 4 Chart App Starter&#8202;—&#8202;Ion Chart</strong><br><em class="markup--em markup--mixtapeEmbed-em">Create your own Dashboard app with this beautiful Ionic 4 chart app starter. Integrate your app with any back-end and…</em>store.enappd.com</a><a href="https://store.enappd.com/product/ionic-4-chart-app-starter-ion-chart/" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="24017da1302ee9a172af22af55b28c5e" data-thumbnail-img-id="0*PnsOsKNNoFE5p7sW" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*PnsOsKNNoFE5p7sW);"></a></div><p name="fba2" class="graf graf--p graf-after--mixtapeEmbed"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;— —</em></p><h3 name="a6f7" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of D3.js for charting in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app template for your next awesome&nbsp;app</figcaption></figure><p name="b64b" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>