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:

Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 min read

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 ⋅ 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 ⋅ 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 ⋅ 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