2022-11-22
3702
#angular
Karl Hughes
22415
Nov 22, 2022 ⋅ 13 min read

Data visualization in Angular using D3.js

Karl Hughes I write, speak, and help build startups. I'm the Chief Technology Officer at The Graide Network, where I manage the engineering team, write code, and oversee application architecture. I am also the founder of Draft.dev, a technical content marketing agency that helps create in-depth blog content for companies trying to reach software engineers.

Recent posts:

Implementing Vector Search With Open Ai, Next Js, And Supabase

Implementing vector search with OpenAI, Next.js, and Supabase

Let’s build a Next.js app that implements vector search using Supabase and OpenAI to offer better search experiences for users.

Peter Ekene Eze
Feb 27, 2024 ⋅ 11 min read
Comparing React Native BLE libraries

Comparing React Native BLE libraries

Discover the most popular libraries for enabling Bluetooth Low Energy (BLE) in React Native apps, allowing them to interact with Bluetooth hardware on iOS and Android platforms.

Fimber Elemuwa
Feb 26, 2024 ⋅ 4 min read
Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
View all posts

27 Replies to "Data visualization in Angular using D3.js"

  1. For the sake of completeness of this tutorial, an import of d3 would be handy 🙂 otherwise d3 will not compile

    1. This is so important!!! Also good to mention is, that import * as d3 makes problems when having more charts from more components on one page, as the d3 becomes global.

  2. Hi Karl,

    thanks a lot for this nice tutorial! However, in the last chapter about the scatter plot there is a small mistake in the createSvg() method. It should be:

    this.svg = d3.select(“figure#scatter”) instead of
    this.svg = d3.select(“figure#bar”).

    Cheers,
    Arvid

  3. I do not, but in most cases, you should be able to use the same basic JS code from the example you referenced. Just update the name of the variables and div to work with Angular.

  4. Hi ,I was following your solution , but i am getting this error Error: attribute height: Expected length, “NaN”.
    can you please help

  5. When I try the d3.json function, I get this error: Argument of type ‘unknown’ is not assignable to parameter of type ‘any[]’.

    Any suggestions how to solve it? I tried to add an Interface, but didn’t work.

  6. Hi can you give an example to implement sunburst chart in angular 10. I searched everywhere but not able to find any . Please Help

  7. Should d3.select(/*selector*/) be accepting an ElementRef, likely with @ViewChild, given this is an Angular application?
    Executing the draw method in ngOnInit may cause rendering issues if the element is not found due to the component yet to be rendered, so should the draw method be called in ngAfterViewInit?

  8. Getting an error while running angular

    node_modules/@types/d3-dsv/index.d.ts(493,52): error TS1005: ‘,’ expected.

    Please help

  9. Hey Karl, this tutorial is awesome, it helped me in my POC, but please can you help me in how to send data to charts through an API. plz hl plz help if u can

  10. Thank you for this tutorial. I am wondering what about updating the data through ngOnchanges and using the Enter/Update/Exit paradigm?

  11. Awesome article. This is my first Angular app. I wish you had a working code for using csv file integration. When I try to use d3.csv in bar2.components.ts, I get error on this.drawBars(data) line.

    ngAfterViewInit(): void {
    this.createSvg();
    d3.csv(“/assets/frameworks.csv”).then(data => this.drawBars(data));
    //this.drawBars(this.data);
    }

    How do we map it to ChartData? private drawBars(data: ChartData): void {

    What all changes do I have to do to make csv work.

Leave a Reply