I want to create an animated 3d scatterplot that shows how the family income (x-axis) and life expectancy (y-axis) of different races in the US (white, black, all) has changed from 1980-2018. 

But Im not getting the desired output. Please see my code and tell me what issues there could be: 

1) Here is my HTML 


 
 
 Project 2 - Gapminder Clone
 
 
 
 
 
 
 





2) Here is my Javascript 

/\*
\* main.js
\* Mastering Data Visualization with Three.js
\* Project 2 - Gapminder Clone
\*/

import \* as THREE from 'three';
import \* as d3 from 'd3';
// Set up the scene
const scene = new THREE.Scene();
const canvas = document.querySelector('#webgl');
const width = canvas.width;
const height = canvas.height;
const camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height );
document.getElementById("chart-area").appendChild(renderer.domElement);

// Scales
const x = d3.scaleLog()
 .base(10)
 .range([-width/2, width/2])
 .domain([30000, 80000])
const y = d3.scaleLinear()
 .range([height/2, -height/2])
 .domain([60, 90])

let time = 0

d3.json("data/current\_data.json").then(function(data){
 // clean data
 const formattedData = data.map(year => {
 return year["races"].filter(race => {
 const dataExists = (race.i {
 race.income = Number(race.income)
 race.life\_exp = Number(race.life\_exp)
 return race
 })
 })

 // run the code every 0.1 second
 d3.timer(function(){
 time = (time < formattedData.length-1) ? time + 1 : 0 
 update(formattedData[time])
 timeLabel.text(String(time + 1980))
}, 200)

 // first run of the visualization
 update(formattedData[0])
})

function update(data) {
 // standard transition time for the visualization
 const t = d3.transition()
 .duration(500)
 .ease(d3.easeLinear)

 // Remove existing spheres
 const spheres = scene.children.filter(child => child.type === "Mesh");
 spheres.forEach(sphere => scene.remove(sphere));
 
 // Add new spheres
 data.forEach(race => {
 const sphere = new THREE.Mesh(
 new THREE.SphereGeometry(0.05, 32, 32),
 new THREE.MeshBasicMaterial({ color: race.color })
 );
 sphere.position.x = x(race.income);
 sphere.position.y = y(race.life\_exp);
 scene.add(sphere);
 });

renderer.render( scene, camera );
}
3) Here is my css 

#chart-area {
 margin-left: auto;
 margin-right: auto;
 display: block;
}

#logo {
 height: 50px;
}

.navbar-brand {
 height: 60px;
 padding: 5px 0px;
}

\*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
}

body,
html {
overflow-x: hidden;
}

4) Here is the structure of my json file

[
 {
 "year": "1980",
 "races": [
 {
 "race": "white",
 "life\_exp": 73.4,
 "income": 57030
 },
 {
 "race": "black",
 "life\_exp": 66.8,
 "income": 32284
 },
 {
 "race": "all",
 "life\_exp": 72.6,
 "income": 53116
 }
 ]
 },
 {
 "year": "1981",
 "races": [
 {
 "race": "white",
 "life\_exp": 74.4,
 "income": 56026
 },
 {
 "race": "black",
 "life\_exp": 68.1,
 "income": 30992
 },
 {
 "race": "all",
 "life\_exp": 73.7,
 "income": 52272
 }
 ]
 },
1980년부터 2018년까지 미국 내 다양한 인종(백인, 흑인, 모두)의 가계 소득(x축)과 기대 수명(y축)이 어떻게 변화했는지 보여주는 애니메이션 3D 분산형 차트를 만들고 싶습니다. 하지만 원하는 출력을 얻지 못했습니다. 제 코드를 보고 어떤 문제가 있을 수 있는지 알려주세요: 1) 내 HTML은 다음과 같습니다.    프로젝트 2 - 갭마인더 클론       2) 내 자바 스크립트는 다음과 같습니다. /\*\* main.js\* Three.js로 데이터 시각화 마스터하기\* 프로젝트 2 - 갭마인더 클론\*/'three'에서 \*를 THREE로 가져옵니다;'d3'에서 \*를 d3로 임포트합니다;// 씬 설정const scene = new THREE.Scene();const canvas = document.querySelector('#webgl');const width = canvas.width;const height = canvas.height;const camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );camera.position.z = 5;const renderer = new THREE.WebGLRenderer();렌더러.setSize(너비, 높이 );document.getElementById("chart-area").appendChild(renderer.domElement);// 스케일const x = d3.scaleLog() .base(10) .range([-폭/2, 너비/2]) .domain([30000, 80000])const y = d3.scaleLinear() .range([높이/2, -높이/2]) .domain([60, 90])let time = 0d3.json("data/current\_data.json").then(function(data){ // 데이터 정리 const formattedData = data.map(year => { return year["races"].filter(race => { const dataExists = (race.i { race.income = Number(race.income) race.life\_exp = Number(race.life\_exp) 반환 race }) }) // 0.1초마다 코드 실행 d3.timer(function(){ time = (time < formattedData.length-1) ? time + 1 : 0  update(formattedData[time]) timeLabel.text(String(time + 1980))}, 200) // 시각화 첫 번째 실행 update(formattedData[0])})함수 update(data) { // 시각화의 표준 전환 시간 const t = d3.transition() .duration(500) .ease(d3.easeLinear) // 기존 구체 제거 const spheres = scene.children.filter(child => child.type === "Mesh"); spheres.forEach(구체 => scene.remove(구체));  // 새 구체 추가 data.forEach(race => { const sphere = new THREE.Mesh( new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshBasicMaterial({ color: race.color }) ); sphere.position.x = x(race.income); sphere.position.y = y(race.life\_exp); scene.add(sphere); });renderer.render( 장면, 카메라 );}3) 내 CSS는 다음과 같습니다. #차트 영역 { 여백-왼쪽: 자동; 여백-오른쪽: 자동 표시: 블록}#로고 { 높이: 50px;}.navbar-brand { 높이: 60px; 패딩: 5px 0px;}\*{ margin: 0; padding: 0; 상자 크기: 테두리 상자; }body,html {오버플로-X: 숨김;}4) 제 json 파일의 구조는 다음과 같습니다.[ { "year": "1980", "races": [ { "race": "white", "life\_exp": 73.4, "소득": 57030 }, { "race": "black", "life\_exp": 66.8, "소득": 32284 }, { "race": "all", "life\_exp": 72.6, "소득": 53116 } ] }, { "year": "1981", "races": [ { "race": "white", "life\_exp": 74.4, "소득": 56026 }, { "race": "black", "life\_exp": 68.1, "소득": 30992 }, { "race": "all", "life\_exp": 73.7, "소득": 52272 } ] },