Rendering a bar graph in JavaScript using D3.js

We will use the portable JavaScript library called D3.js to draw a bar graph. This allows us to easily create a web page that contains a graph from the Haskell code.

Getting ready

An Internet connection is necessary for the setup.

Install the d3js Haskell library as follows:

$ cabal install d3js

Create a website template to hold the generated JavaScript code as follows:

$ cat index.html

The JavaScript code will be as follows:

<html>
  <head>
    <title>Chart</title>
  </head>
  <body>
    <div id='myChart'></div>
    <script charset='utf-8' src='http://d3js.org/d3.v3.min.js'></script>
    <script charset='utf-8' src='generated.js'></script>
  </body>
</html>

How to do it…

  1. Import the relevant packages as follows:
    import qualified ...

Get Haskell Data Analysis Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial