index.js
/*
* This educational eample serves to show the process of creating a dataviz from dirty data
* It still has a lot of intermediate steps you would remove if you were to put the code into production
*/
import { select } from 'd3'
//We need this proxy becuse our resource service hasn't allows cross origin requests explicitly
const proxyUrl = 'https://cors-anywhere.herokuapp.com/'
const overviewUrl = 'https://npropendata.rdw.nl/parkingdata/v2/'
const svg = select('svg')
const margin = {top: 48, right: 72, bottom: 220, left: 72}
const height = parseInt(svg.style('height'), 10) - margin.top - margin.bottom
const width = parseInt(svg.style('width'), 10) - margin.left - margin.right
const group = svg
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
const x = d3.scaleBand().padding(0.2)
const y = d3.scaleLinear()
//A Global variable holding our data
let data
//This settings object is a nice way to encapsulate settings for your program
const settings = {
useTestData: true,
remoteParkingsAmount: 30,
}
makeVisualization()
// Our main function which runs other functions to make a visualization
async function makeVisualization(){
if (settings.useTestData) {
console.log("loading local data")
