CC LAB: JAVASCRIPT FINAL

For my final CC Lab project I wanted to do a data visualization based on the tracks of a playlist. Looking into the Spotify API, the data within the tracks has a data point called "Popularity" which ranges from 0-100.

I wanted to use this data point to feed the radius of the circles in the D3.js visualization. This is a example of what I want the the visualization to look like: 

I managed to connect to the Spotify API by using Node.js and NPM. Here's a quick look at the Javascript code:

import React, { Component } from 'react';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      query: "", // my query
      artist: null,
      popularity: null  // my response.
    }
  }

  search() {
    console.log('this.state', this.state);
    const BASE_URL = 'https://api.spotify.com/v1/search?';
    const FETCH_URL = BASE_URL + 'q=' + this.state.query + '&type=artist&limit=1';
    var accessToken = 'BQAgu0C8EljTdiFPVwAg76TCQmL3oiLE3hIqvjkJsA_VQvHkJjDiN-K7nPthlL9V90ng9G2Jm5UUf2tyhf7nuIEJ42-zrkzRdPchcuSsyYvd5bAHhYNrBWERlRy97XmCEskCXqQpFRi4KUliSDx37wfxJrSxCdZ8dkE&refresh_token=AQCOwtU2t0MCD6edIVo8Bv5xrYI9dFYyeLfwyKH8FOOYE3qHBhBBhmfkA5VZKBdLosmAZxyEUoMGqVgyKhTVvk3GeQKXcjGNbNwA6SK5-KpvKKJOddKl-6q6w6EQhq_GiPM'

    var myOptions = {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer ' + accessToken
      },
      mode: 'cors',
      cache: 'default'
    };

    fetch(FETCH_URL, myOptions)
      .then(response => response.json())
      .then(json => {
        const artist = json.artists.items[0];
        const popularity = json.artists.items[0];       
        this.setState({ artist });
      })

  }

  render() {

    let artist = {
      name: '',
      followers: {
        total: ''
      }
    };
    if (this.state.artist !== null) {
      artist = this.state.artist;
    }

    let popularity = {
      popularity: '',
      followers: {
        total: ''
      }
    };
    if (this.state.popularity !== null) {
      popularity = this.state.popularity;
    }

    return (
      // return JSX 
      <div className="container">
        <hr />
        <div className="col-lg-6">
          <div className="input-group">
            <input type="text" 
              onChange={event => { this.setState({ query: event.target.value }) }}
            className="form-control" placeholder="Search for..." />
            <span className="input-group-btn">
              <button 
              onClick={()=> this.search()}
               className="btn btn-default" type="button">Go!</button>
            </span>
          </div>
        </div>
        <hr />
        <div>
          <div> {artist.name}   </div>
          <div> {artist.followers.total} </div>
        </div>


        </div>
    )
  }
}
export default App;

Although I managed to connect to the API and make a successful query, I wasn't able to connect the exact data point to D3.js and alter the radius of the data points.