# Visualize data from API in p5.js

**URL:** <https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246>\
**Category:** Coding Questions\
**Created:** [December 14, 2020, 6:26pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246 "2020-12-14T18:26:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fullmotion](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fullmotion/32/11300_2.png) [@fullmotion](https://discourse.processing.org/u/fullmotion)\
**Post date:** [December 14, 2020, 6:26pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246/1 "2020-12-14T18:26:00Z")

</div>

Hello, I am trying to create a data visualization from data form an API. I would like to visualize every point in the array on the sketch and include the type of the incident (i.e: theft). what’s the best way or path to call (and access) the following objects from the array? I would like to call all 100 objects in my array by identifying ‘type’ & ‘coordinates’.  
I am new to this so every tip and help is appreciated.  
This is my sketch [https://editor.p5js.org/fullmotion/sketches/jFCGlPSHg](https://editor.p5js.org/fullmotion/sketches/jFCGlPSHg)

```auto
properties: Object
id: 132897
type: "Theft"
occurred_at: 1607806800
geometry: Object
type: "Point"
coordinates: Array[2]
0: -122.2598627
1: 45.3962999

```

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [December 14, 2020, 7:40pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246/2 "2020-12-14T19:40:30Z")

</div>

It looks like you have already loaded JSON file into your sketch, and logged the `bikeAccidentsData` object. So, we will just need to look at its properties.

```auto
  const features = bikeAccidentsData.features
  for (let i = 0; i < features.length; i++) {
    const feature = features[i]
    console.log(feature.properties.type, feature.geometry.coordinates)
  }

```

---

<div class="post-metadata">

**Author:** ![fullmotion](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fullmotion/32/11300_2.png) [@fullmotion](https://discourse.processing.org/u/fullmotion)\
**Post date:** [December 14, 2020, 9:54pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246/3 "2020-12-14T21:54:46Z")

</div>

Thank you for the suggestion. I put it in & it read the specific data data. Yes, I have everything loaded including the API and my next step is to be able to create something visual with the type & coordinates data sets.

---

<div class="post-metadata">

**Author:** ![fullmotion](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fullmotion/32/11300_2.png) [@fullmotion](https://discourse.processing.org/u/fullmotion)\
**Post date:** [December 16, 2020, 5:08am UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246/4 "2020-12-16T05:08:30Z")

</div>

Hello, I have an update on this sketch.  
I was trying to add leaflet so that I can visualize the point from the geojson, but it didn’t work out. I tried following leaflet tutorials & Dan Shiffman’s too.  
Does anyone have any suggestion of the easiest way to visualize the coordinates in my data set on the sketch?  
Thank you

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [December 16, 2020, 3:07pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246/5 "2020-12-16T15:07:25Z")

</div>

I haven’t tried it but found [https://mappa.js.org/docs/getting-started.html](https://mappa.js.org/docs/getting-started.html) which has examples to work with p5js. Do you have a simplified version of your problem (code)?