import { select } from 'd3'
import { prepareData, transformData } from './prepareData';
const endpoint = 'https://gist.githubusercontent.com/Razpudding/f871bd3fb42008de991cfc8cf689dcbf/raw/35c7867c24d60bd59fc12ab79176305f4eb8480b/surveyDataByInterest.json'
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 + ')');
// Scales
const x = d3.scaleBand().padding(0.2)
const y = d3.scaleLinear()
// Store the raw unnested data globally so we don't have to pass it to every function
let unNestedData
// Store the nested data
let nestedData
//The initial variable the y axis is set on
let yVar = "biggestExpenseAvg"//"biggestExpenseAvg" // "sistersAvg" //"heightAvg"
let xVar = "preference"
makeVisualization()
// Our main function which runs other function to make a visualization
async function makeVisualization(){
//Use the prepareData function to get our data
unNestedData = await prepareData(endpoint)
//Set up the initial data transformation
nestedData = transformData(unNestedData, xVar)
const xFields = Object.keys(unNestedData[0]);
const yFields = Object.keys(nestedData[0].value);
setupInput(yFields, xFields)
setupScales()