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:

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
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 ⋅ 11 min read
A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 ⋅ 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 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