// You can import API functions like this from D3.js.
import { select,
map,
Group,
stack,
columns,
slice,
length
} from 'd3';
/// from: https://bl.ocks.org/d3noob/183abfcee0670fa49998afc695a8f5ad
//based on http://datawanderings.com/2019/10/20/tutorial-advanced-bar-chart-in-d3-js-v-5/#more-3849
//based on https://hkpeterpeter.github.io/d3-learn/010_stacked_barchart.js
//Reference: https://bl.ocks.org/mbostock/3886208
//--------------------------PREPARATION--------------------------//
//------------------------SVG PREPARATION------------------------//
// set the dimensions and margins of the graph
const margin = {top: 90, right: 20, bottom: 30, left: 40},
width = 760 - margin.left - margin.right,
height = 460 - margin.top - margin.bottom;
// append the svg object to the body of the page
// append a 'group' ("g") element to 'svg'
// moves the 'group' element to the top left margin
const svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//-----------------------SCALES PREPARATION----------------------//