index.js
import { select } from 'd3'
//We need this proxy becuse our resource service hasn't allows cross origin requests explicitly
const proxyUrl = 'https://cors-proxy.htmldriven.com/?url=' //'https://cors-anywhere.herokuapp.com/'
const overviewUrl = 'https://npropendata.rdw.nl/parkingdata/v2/'
const svg = select('svg')
const margin = {top: 48, right: 72, bottom: 120, left: 72}
const height = parseInt(svg.style('height'), 10) - margin.top - margin.bottom
const width = parseInt(svg.style('width'), 10) - margin.left - margin.right
/* Conventional margins: https://bl.ocks.org/mbostock/3019563. */
const group = svg
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
makeVisualization()
// Our main function which runs other functions to make a visualization
async function makeVisualization(){
const allParkingFacilities = await getData(proxyUrl+overviewUrl)
const preparedData = await prepareData(allParkingFacilities, 10)
console.log(preparedData)
//We should prob check if there can be more than one specification for each item
console.log(preparedData.map(item=> item.specifications[0].capacity))
const limitedAccessArr = preparedData.map(item=> item.limitedAccess)
console.log(listUnique(limitedAccessArr))
const specialDaysArr = preparedData.map(item=> item.limitedAccess)
//Let's set up our scales in a separate function
// setupScales()
// setupAxes()
// drawBars()
}
async function getData(url){
let data = await d3.json(url)
console.log("data", data)
