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:

Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 min read
andrew evans headshot

A spec-first workflow for building with agentic AI

Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.

Andrew Evans
Oct 1, 2025 ⋅ 18 min read
View all posts

28 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.

  12. The Main Issue I have with this, its not ‘Angular’, none of the structures report back to Angular changes that are made in the graphs, Angular cannot ‘see’ nor propagate those changes, they’re not hooked, its merely an OnNgInit wrapper around plain javascript, The whole point of using Angular is to flow data live between components for dynamic updating.

Leave a Reply