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:

Nx Adoption Guide: Overview, Examples, And Alternatives

Nx adoption guide: Overview, examples, and alternatives

Let’s explore Nx features, use cases, alternatives, and more to help you assess whether it’s the right tool for your needs.

Andrew Evans
Mar 28, 2024 ⋅ 9 min read
Understanding Security In React Native Applications

Understanding security in React Native applications

Explore the various security threats facing React Native mobile applications and how to mitigate them.

Wisdom Ekpotu
Mar 27, 2024 ⋅ 10 min read
Warp Adoption Guide: Overview, Examples, And Alternatives

warp adoption guide: Overview, examples, and alternatives

The warp web framework for Rust offers many enticing features. Let’s see when and why you should consider using warp in your projects.

Ukeje Goodness
Mar 26, 2024 ⋅ 8 min read
Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

Clara Ekekenta
Mar 25, 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