I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected
Here is the TypeScript file I am working with:
export class PieChartComponent implements AfterViewInit {
//other initializations removed for brevity
convertedData: Map<string, number> = new Map();
ngAfterViewInit() {
d3.csv('app/data/data.csv').then((data) => {
data.forEach((d) => {
this.convertedData.set(d['name'], Number(d['age']));
});
});
this.svg = d3
.select('#canvas-area')
.append('svg')
.attr('width', 400)
.attr('height', 400);
this.circles = this.svg.selectAll('circle').data(this.convertedData);
this.circles
.enter()
.append('circle')
.attr('cx', (d, i) => i * 50 + 50)
.attr('cy', 250)
.attr('r', (d) => 2 * d[0])
.attr('fill', (d) => {
if (d[1] == 'Jessica') return 'blue';
return 'red';
});
}
}
Additionally, in my HTML file:
<div id="canvas-area"></div>
The contents of my data.csv file are as follows:
name,age
Tony,10
Jessica,12
Andrew,9
Emily,10
Richard,11