Likert visualisations (Part 3 - Creating a D3.js chart component)

Posted on 2017-09-10 13:48:06

In part 2 we set up our data input component. In this post we will use this data to create an exportable and customisable chart.

The first thing we need to do is create the data-visualisation component. To do this run ng g c data-visualisation. Now we need to add this component to our app template so that it now looks like the following:

<div class="container">
  <app-data-input></app-data-input>
  <app-data-visualisation></app-data-visualisation>
</div>

The page should now contain our form and a piece of text saying “app-data-visualisation works”. We can now start writing our d3.js code to render the chart. The initial reason I created this application was so that the charts could be exported to pdf and then used in documents. To do this the svg gets converted to png on the page. As such our new components html looks like the following which may seem convoluted but will hopefully make sense once our typescript is written. We have an invisible #chart div where the svg will be rendered. That svg is then converted and shown as a png along with an export button. If the export functionality wasn’t necessary just the #chart element would be required.

<div style="display:none;" #chart></div>
<div class="card my-4">
  <img class="card-img-top" [src]="pngData"/>
  <div class="card-body">
    <a class="btn btn-outline-primary" [href]="pngData" [download]="downloadText">Download image</a>
  </div>
</div>

Comments