Visualize data from API in p5.js

p5.js Coding Questions
1

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

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

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.

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

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.

1 Like
4

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

5

I haven’t tried it but found 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)?