D3.js Angular Gallery

The Angular D3 graph gallery displays some of charts made with Angular and D3.js, always providing…

Follow publication

Density 2D Chart Angular & D3.js

Laakissi Achraf
D3.js Angular Gallery
2 min readFeb 14, 2021

Welcome to the D3.js Angular graph gallery: a collection of simple charts made with d3.js & angular created by LAAKISSI Achraf. D3.js is a JavaScript library for manipulating documents based on data. This gallery of a few graphics, always providing reproducible and editable source code. If you are new to creating graphics with Angular & D3.js, this is probably the place to start.

Density 2D Chart

This post describes how to build a 2d density chart using angular & d3.js. we’ve built a component you just need to add to your project, passing the input data, specifying other options and you get your chart easily. you can find the code on our website or in stackblitz.

A 2d density chart displays the relationship between 2 numeric variables. One is represented on the X axis, the other on the Y axis, like for a scatterplot. Then, the number of observations within a particular area of the 2D space is counted and represented by a color gradient.

The 2d density chart is made thanks to the d3-contour plugin.

The input dataset has 2 numeric variables: x and y. A 2d density plot basically represents the amount of data point on each part of the grid.

Component inputs :

  • data: It is an array of objects (dataset), each object contains 2 numeric variables: x and y
  • colorsInput: It is an array of 2 hex color codes.

https://stackblitz.com/edit/angular-d3-js-density-2d-chart

Click here to check out some other awesome charts. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter / Linkedin, or send an email.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

D3.js Angular Gallery
D3.js Angular Gallery

Published in D3.js Angular Gallery

The Angular D3 graph gallery displays some of charts made with Angular and D3.js, always providing the reproducible code.

Laakissi Achraf
Laakissi Achraf

Written by Laakissi Achraf

Software Engineer AWS / MEAN Stack

No responses yet

Write a response

What I applaud in Mr. Carnevale's piece is an attempt to shift the attention away from affirmative action and college (now, there's a silo) to education reform of K-12 education. In my view, the problem starts when humans by and large support their…

--

Affirmative Action still around?

--

interesting

--