Displaying d3 graph with ObservableHQ in Angular 7

ObservableHQ notebook provides a nice platform for creating and playing around with D3.js examples.

In this story, we will integrate existing example from below website into Angular 7.

  1. Create new Angular project using ng new command.
  2. Install ObservableHQ package by running command npm install @observablehq/notebook-runtim
  3. Open index.html and add below line in <head> section

4. Open app.component.ts and add below import sections. Make sure you have graph.js file inside assets folder

5. Open app.component.html and add below <div> for rendering graph.

6. Inside app.component.ts put below code for referring our placeholder <div>

7. Run the application and you should see nice graph rendered inside your Angular application.

We can move all code from graph.js to Angular component but for sake of time, I will leave it there. May be in another story I will try to create separate example.

Here is the running example:

Here is source code on GitHub:

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store