D3 Angular

> npm install d3 --save
> npm install @types/d3 --save-dev

Create SVG and draw bars.

private margin = 50;
// create SVG
this.svg = d3.select("figure#bar")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
 
// draw bars
// Create the X-axis band scale
const x = d3.scaleBand()
    .range([0, this.width])
    .domain(data.map(d => d.Framework)) // what do domain do?
    .padding(0.2);
 
    // Draw the X-axis on the DOM
this.svg.append("g")
    .attr("transform", "translate(0," + this.height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");
 
// Create the Y-axis band scale
const y = d3.scaleLinear()
    .domain([0, 200000])
    .range([this.height, 0]);
 
// Draw the Y-axis on the DOM
this.svg.append("g")
    .call(d3.axisLeft(y));
 
// Create and fill the bars
this.svg.selectAll("bars")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", d => x(d.Framework)) // what comes in callback of all these methods?
    .attr("y", d => y(d.Stars)) // what is stars?
    .attr("width", x.bandwidth())
    .attr("height", (d) => this.height - y(d.Stars))
    .attr("fill", "#d04a35");
 

Output: