mikelotis · October 16, 2018 23:10
diff --git a/.block b/.block
 width: 950
 height: 750
 border: yes
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/alberta-mapper-topo.json b/alberta-mapper-topo.json
diff --git a/alberta_census_subdivisions(2001-2017).csv b/alberta_census_subdivisions(2001-2017).csv
diff --git a/custom-essos.js b/custom-essos.js

 (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
 }(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    echarts.registerTheme('custom-essos', {
        "color": [
            "#893448",
            "#f0150b",
            "#ff8800"
        ],
        "backgroundColor": "rgba(242,234,191,0.15)",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#893448"
            },
            "subtextStyle": {
                "color": "#d95850"
            }
        },
        "bar": {
            "itemStyle": {
                "normal": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                },
                "emphasis": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            }
        },
        "scatter": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "map": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#999999",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(255,178,72,1)",
                    "borderColor": "#eb8146",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#893448"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(137,52,72)"
                    }
                }
            }
        },
        "geo": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#999999",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(255,178,72,1)",
                    "borderColor": "#eb8146",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#893448"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(137,52,72)"
                    }
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#aaaaaa"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#e6e6e6"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#aaaaaa"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#e6e6e6"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "toolbox": {
            "iconStyle": {
                "normal": {
                    "borderColor": "#999999"
                },
                "emphasis": {
                    "borderColor": "#666666"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#999999"
            }
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#cccccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#cccccc",
                    "width": 1
                }
            }
        },
        "visualMap": {
            "color": [
                "#893448",
                "#d95850",
                "#eb8146",
                "#ffb248",
                "#f2d643",
                "rgb(247,238,173)"
            ]
        },
        "dataZoom": {
            "backgroundColor": "rgba(255,255,255,0)",
            "dataBackgroundColor": "rgba(255,178,72,0.5)",
            "fillerColor": "rgba(255,178,72,0.15)",
            "handleColor": "#ffb248",
            "handleSize": "100%",
            "textStyle": {
                "color": "#333333"
            }
        }
    });
 }));
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Census Subdivision Population</title>
    <style>
        #main {
            border: 1px solid black;
            position: absolute; 
            left: 0; 
            right:0;
            top: 0; 
            bottom: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            overflow: auto;
        }
    </style>
 </head>
 <body>
    <div id="main" style="width:900px; height:700px;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>
    <script src="custom-essos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="index.js" lang="babel" type="text/babel"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 const log = console.log;

 //----------- Loading Data
 const dataFiles = [
    "alberta_census_subdivisions(2001-2017).csv",
    "alberta-mapper-topo.json"
 ];
 const PromiseWrapper = function(d, file) {
    return new Promise(function(resolve) {
        d3[file](d, function(p) { resolve(p); });
    });
 };
 const promises = dataFiles.map(file => {
    const fileType = file.split(".")[1];
    return PromiseWrapper(file, fileType);
 });
 //----------- Loading Data

 //Echarts Instance
 const myChart = echarts.init(document.getElementById("main"), "custom-essos");

 //Call back after files are Loaded
 Promise.all(promises).then((resolve) => mapFunc(resolve));

 function mapFunc(allData) {
    
    //Data from loaded files
    const csv = allData[0];
    const json = allData[1];

    //Fix Náre name
    //Convert Year, Sex, and Total to ints
    csv.forEach(element => {
        if(element["Area Name"] === "Thabacha N�re 196A") element["Area Name"] = "Thabacha Náre 196A";

        csv.columns.forEach(d => {
            if(d !== "Area Name") element[d] = parseInt(element[d]);
        });
    });

    //Each year has areanames and corresponding data
    const years = d3.nest().key(d => d["Year"]).key(d => d["Area Name"]).entries(csv);
    //Used this for rapid prototyping
    // const years = d3.range(0, 2).map(p => d3.nest().key(d => d["Year"]).key(d => d["Area Name"]).entries(csv)[p]);

    //---Using topojson of the subdivisions 
    const geojson = topojson.feature(json, json.objects["alberta-mapper"]);
    const features = geojson.features;
    const searchFeatures = d3.map(features, d => d.id);
    //---Using topojson of the subdivisions 

    //---------------- Variables for echarts option
    const searchYears = d3.map(years, d => d.key);
    const titleName = "Alberta Census Subdivisions Total Population Estimates";
    const scatterData = years.map(d => {
        const values = d.values.map(p => {
            const areaName = p.key;
            const feature = searchFeatures.get(areaName);
            const value = p.values[0]["Total"];
            
            return {
                name: areaName,
                value: d3.geoCentroid(feature).concat(value)
            };
        });

        return {key: d.key, values: values};
    });
    const settings = {options: "2001"};
    const defaultYearData = scatterData[years.indexOf(searchYears.get(settings.options))].values;
    const searchDefaultYear = d3.map(defaultYearData, d => d.name);
    //---------------- Variables for echarts option

    //For Dat.GUI
    const yearVals = years.map(d => d.key);
    const gui = new dat.GUI();

    //----------------Echarts options, attributes for building the visualization
    const option = {
        title: {
            text: `${titleName} ${settings.options}`
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {},
                myTool1: {
                    show: true,
                    title: "Hide Bar Chart",
                    icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,"+
                           "11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,"+
                           "0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,"+
                           "589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,"+
                           "3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                    onclick: () => {
                        myChart.setOption({
                            yAxis : {
                                data: []
                            },
                            xAxis: {},
                            title: {},
                            series: {
                                id: "bar",
                                data: []
                            }
                        }); 
                    }
                }
            },
            iconStyle: {
                normal: {
                    borderColor: "black"
                },
                emphasis: {
                    borderColor: "red"
                }
            }
        },
        brush: {
            outOfBrush: {
                color: "#abc"
            },
            brushStyle: {
                borderWidth: 2,
                color: "rgba(0,0,0,0.2)",
                borderColor: "rgba(0,0,0,0.5)",
            },
            seriesIndex: [0, 1],
            throttleType: "debounce",
            throttleDelay: 300,
            geoIndex: 0
        },
        tooltip: { 
            trigger: "item",
            formatter: params => `${params.name} : ${searchDefaultYear.get(params.name).value[2].toLocaleString()}`
        },
        geo: {
            map: "Alberta",
            roam: true,
            zoom: 3.7,
            center: [-109.2, 55],
            itemStyle: {
                emphasis: {
                    areaColor: "lightgray",
                    borderColor: "gray"
                }  
            }
        },
        xAxis: {
            show: false,
            type: "value",
            scale: true
        },
        yAxis: {
            type: "category",
            name: "Top 30 (Maximum) Census Subdivisions",
            nameGap: 16,
            axisLine: {show: false, lineStyle: {color: "gray"}},
            axisTick: {show: false, lineStyle: {color: "gray"}},
            axisLabel: {interval: 0, textStyle: {color: "gray"}},
            data: []
        },
        legend: {
            orient: "vertical",
            top: "bottom",
            left: "right",
            data:["Population"],
            textStyle: {
                color: "gray"
            }
        },
        visualMap: {
            type: "piecewise",
            min: 0,
            max : d3.max(defaultYearData, d => d.value[2]),
            splitNumber: 3,
            textStyle: {color: "gray"},
            color: ["#ff7f00","#984ea3","#4daf4a"],
            formatter: (value, value2) => `${parseInt(value).toLocaleString()} - ${parseInt(value2).toLocaleString()}`
        },
        grid: {
            right: 40,
            top: 100,
            bottom: 40,
            width: "30%",
        },
        series: [
            {
                id: "geoScatter",
                name: "Population",
                type: "scatter",
                coordinateSystem: "geo",
                symbolSize: 7,
                label: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: "#fff",
                        borderWidth: 1
                    }
                },
                data: defaultYearData
            },
            {
                id: "bar",
                zlevel: 2,
                type: "bar",
                symbol: "none",
                label: {
                    show: true,
                    position: "right",
                    fontSize: 9.25,
                    formatter: params => searchDefaultYear.get(params.name).value[2].toLocaleString()
                },
                data: []
            }
        ]
    };
    //----------------Echarts options, attributes for building the visualization

     //Without this, when you hover on the map, the whole map is selected
    features.forEach(d => d.properties.name = d.id);    
    echarts.registerMap("Alberta", geojson);

    gui.add(settings, "options", yearVals);

    //Set Echarts options attributes
    myChart.setOption(option);

    //---------------------For updating the data using the dropdown menu
    //---------------------For now used d3 I don't know how to use dat.gui to update the data
    d3.select("div > select").on("change.custom", function() {
        const selectedYear = d3.select(this).node().value;
        const fetchedData = scatterData[years.indexOf(searchYears.get(selectedYear))].values;
        const searchSelectedNames = d3.map(fetchedData, d => d.name);
        
        myChart.setOption({
            tooltip: {
                formatter: params => `${params.name} : ${searchSelectedNames.get(params.name).value[2].toLocaleString()}`
            },
            title: {
                text: `${titleName} ${selectedYear}`
            },
            visualMap: {
                min: 0,
                max : d3.max(fetchedData, d => d.value[2])
            },
            series: {
                id: "geoScatter",
                data: fetchedData
            },
            series: {
                id: "bar", 
                label: {
                    formatter: params => searchSelectedNames.get(params.name).value[2].toLocaleString()
                }
            }
        });
    });
    //---------------------For updating the data using the dropdown menu

    //Programatically close dat.gui, it's open by default
    d3.select("div > div.close-button.close-bottom").dispatch("click");
    
    myChart.on("brushselected", renderBrushed);

    //----------------------------For creating horizontal bar chart during brush selection
    function renderBrushed(params) {
        const geoScatterSeries = params.batch[0].selected[0];
        const dataIndexes = geoScatterSeries.dataIndex;
        const selectedItems = [];
        const categoryData = [];
        const barData = [];
        const maxBar = 30;

        if(dataIndexes.length == 0) {
            return;
        }
        if(dataIndexes.length !== 0) {
            dataIndexes.forEach(d => {
                const dataItem = option.series[0].data[d];
                selectedItems.push(dataItem);
            });

            selectedItems.sort((a, b) => b.value[2] - a.value[2]);

            for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
                categoryData.push(selectedItems[i].name);
                barData.push(selectedItems[i].value[2]);
            };

            this.setOption({
                yAxis : {
                    data: categoryData.reverse()
                },
                xAxis: {},
                title: {},
                series: {
                    id: "bar",
                    data: barData.reverse()
                }
            });                    
        };
    };
    //----------------------------For creating horizontal bar chart during brush selection
 };
diff --git a/thumbnail.png b/thumbnail.png

	(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
	// AMD. Register as an anonymous module.
	define(['exports', 'echarts'], factory);
	} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
	// CommonJS
	factory(exports, require('echarts'));
	} else {
	// Browser globals
	factory({}, root.echarts);
	}
	}(this, function (exports, echarts) {
	var log = function (msg) {
	if (typeof console !== 'undefined') {
	console && console.error && console.error(msg);
	}
	};
	if (!echarts) {
	log('ECharts is not Loaded');
	return;
	}
	echarts.registerTheme('custom-essos', {
	"color": [
	"#893448",
	"#f0150b",
	"#ff8800"
	],
	"backgroundColor": "rgba(242,234,191,0.15)",
	"textStyle": {},
	"title": {
	"textStyle": {
	"color": "#893448"
	},
	"subtextStyle": {
	"color": "#d95850"
	}
	},
	"bar": {
	"itemStyle": {
	"normal": {
	"barBorderWidth": 0,
	"barBorderColor": "#ccc"
	},
	"emphasis": {
	"barBorderWidth": 0,
	"barBorderColor": "#ccc"
	}
	}
	},
	"scatter": {
	"itemStyle": {
	"normal": {
	"borderWidth": 0,
	"borderColor": "#ccc"
	},
	"emphasis": {
	"borderWidth": 0,
	"borderColor": "#ccc"
	}
	}
	},
	"map": {
	"itemStyle": {
	"normal": {
	"areaColor": "#f3f3f3",
	"borderColor": "#999999",
	"borderWidth": 0.5
	},
	"emphasis": {
	"areaColor": "rgba(255,178,72,1)",
	"borderColor": "#eb8146",
	"borderWidth": 1
	}
	},
	"label": {
	"normal": {
	"textStyle": {
	"color": "#893448"
	}
	},
	"emphasis": {
	"textStyle": {
	"color": "rgb(137,52,72)"
	}
	}
	}
	},
	"geo": {
	"itemStyle": {
	"normal": {
	"areaColor": "#f3f3f3",
	"borderColor": "#999999",
	"borderWidth": 0.5
	},
	"emphasis": {
	"areaColor": "rgba(255,178,72,1)",
	"borderColor": "#eb8146",
	"borderWidth": 1
	}
	},
	"label": {
	"normal": {
	"textStyle": {
	"color": "#893448"
	}
	},
	"emphasis": {
	"textStyle": {
	"color": "rgb(137,52,72)"
	}
	}
	}
	},
	"categoryAxis": {
	"axisLine": {
	"show": true,
	"lineStyle": {
	"color": "#aaaaaa"
	}
	},
	"axisTick": {
	"show": false,
	"lineStyle": {
	"color": "#333"
	}
	},
	"axisLabel": {
	"show": true,
	"textStyle": {
	"color": "#999999"
	}
	},
	"splitLine": {
	"show": true,
	"lineStyle": {
	"color": [
	"#e6e6e6"
	]
	}
	},
	"splitArea": {
	"show": false,
	"areaStyle": {
	"color": [
	"rgba(250,250,250,0.05)",
	"rgba(200,200,200,0.02)"
	]
	}
	}
	},
	"valueAxis": {
	"axisLine": {
	"show": true,
	"lineStyle": {
	"color": "#aaaaaa"
	}
	},
	"axisTick": {
	"show": false,
	"lineStyle": {
	"color": "#333"
	}
	},
	"axisLabel": {
	"show": true,
	"textStyle": {
	"color": "#999999"
	}
	},
	"splitLine": {
	"show": true,
	"lineStyle": {
	"color": [
	"#e6e6e6"
	]
	}
	},
	"splitArea": {
	"show": false,
	"areaStyle": {
	"color": [
	"rgba(250,250,250,0.05)",
	"rgba(200,200,200,0.02)"
	]
	}
	}
	},
	"toolbox": {
	"iconStyle": {
	"normal": {
	"borderColor": "#999999"
	},
	"emphasis": {
	"borderColor": "#666666"
	}
	}
	},
	"legend": {
	"textStyle": {
	"color": "#999999"
	}
	},
	"tooltip": {
	"axisPointer": {
	"lineStyle": {
	"color": "#cccccc",
	"width": 1
	},
	"crossStyle": {
	"color": "#cccccc",
	"width": 1
	}
	}
	},
	"visualMap": {
	"color": [
	"#893448",
	"#d95850",
	"#eb8146",
	"#ffb248",
	"#f2d643",
	"rgb(247,238,173)"
	]
	},
	"dataZoom": {
	"backgroundColor": "rgba(255,255,255,0)",
	"dataBackgroundColor": "rgba(255,178,72,0.5)",
	"fillerColor": "rgba(255,178,72,0.15)",
	"handleColor": "#ffb248",
	"handleSize": "100%",
	"textStyle": {
	"color": "#333333"
	}
	}
	});
	}));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Census Subdivision Population</title>
	<style>
	#main {
	border: 1px solid black;
	position: absolute;
	left: 0;
	right:0;
	top: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	}
	</style>
	</head>
	<body>
	<div id="main" style="width:900px; height:700px;"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>
	<script src="custom-essos.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
	<script src="index.js" lang="babel" type="text/babel"></script>
	</body>
	</html>
	const log = console.log;

	//----------- Loading Data
	const dataFiles = [
	"alberta_census_subdivisions(2001-2017).csv",
	"alberta-mapper-topo.json"
	];
	const PromiseWrapper = function(d, file) {
	return new Promise(function(resolve) {
	d3[file](d, function(p) { resolve(p); });
	});
	};
	const promises = dataFiles.map(file => {
	const fileType = file.split(".")[1];
	return PromiseWrapper(file, fileType);
	});
	//----------- Loading Data

	//Echarts Instance
	const myChart = echarts.init(document.getElementById("main"), "custom-essos");

	//Call back after files are Loaded
	Promise.all(promises).then((resolve) => mapFunc(resolve));

	function mapFunc(allData) {

	//Data from loaded files
	const csv = allData[0];
	const json = allData[1];

	//Fix Náre name
	//Convert Year, Sex, and Total to ints
	csv.forEach(element => {
	if(element["Area Name"] === "Thabacha N�re 196A") element["Area Name"] = "Thabacha Náre 196A";

	csv.columns.forEach(d => {
	if(d !== "Area Name") element[d] = parseInt(element[d]);
	});
	});

	//Each year has areanames and corresponding data
	const years = d3.nest().key(d => d["Year"]).key(d => d["Area Name"]).entries(csv);
	//Used this for rapid prototyping
	// const years = d3.range(0, 2).map(p => d3.nest().key(d => d["Year"]).key(d => d["Area Name"]).entries(csv)[p]);

	//---Using topojson of the subdivisions
	const geojson = topojson.feature(json, json.objects["alberta-mapper"]);
	const features = geojson.features;
	const searchFeatures = d3.map(features, d => d.id);
	//---Using topojson of the subdivisions

	//---------------- Variables for echarts option
	const searchYears = d3.map(years, d => d.key);
	const titleName = "Alberta Census Subdivisions Total Population Estimates";
	const scatterData = years.map(d => {
	const values = d.values.map(p => {
	const areaName = p.key;
	const feature = searchFeatures.get(areaName);
	const value = p.values[0]["Total"];

	return {
	name: areaName,
	value: d3.geoCentroid(feature).concat(value)
	};
	});

	return {key: d.key, values: values};
	});
	const settings = {options: "2001"};
	const defaultYearData = scatterData[years.indexOf(searchYears.get(settings.options))].values;
	const searchDefaultYear = d3.map(defaultYearData, d => d.name);
	//---------------- Variables for echarts option

	//For Dat.GUI
	const yearVals = years.map(d => d.key);
	const gui = new dat.GUI();

	//----------------Echarts options, attributes for building the visualization
	const option = {
	title: {
	text: `${titleName} ${settings.options}`
	},
	toolbox: {
	feature: {
	restore: {},
	saveAsImage: {},
	myTool1: {
	show: true,
	title: "Hide Bar Chart",
	icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,"+
	"11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,"+
	"0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,"+
	"589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,"+
	"3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
	onclick: () => {
	myChart.setOption({
	yAxis : {
	data: []
	},
	xAxis: {},
	title: {},
	series: {
	id: "bar",
	data: []
	}
	});
	}
	}
	},
	iconStyle: {
	normal: {
	borderColor: "black"
	},
	emphasis: {
	borderColor: "red"
	}
	}
	},
	brush: {
	outOfBrush: {
	color: "#abc"
	},
	brushStyle: {
	borderWidth: 2,
	color: "rgba(0,0,0,0.2)",
	borderColor: "rgba(0,0,0,0.5)",
	},
	seriesIndex: [0, 1],
	throttleType: "debounce",
	throttleDelay: 300,
	geoIndex: 0
	},
	tooltip: {
	trigger: "item",
	formatter: params => `${params.name} : ${searchDefaultYear.get(params.name).value[2].toLocaleString()}`
	},
	geo: {
	map: "Alberta",
	roam: true,
	zoom: 3.7,
	center: [-109.2, 55],
	itemStyle: {
	emphasis: {
	areaColor: "lightgray",
	borderColor: "gray"
	}
	}
	},
	xAxis: {
	show: false,
	type: "value",
	scale: true
	},
	yAxis: {
	type: "category",
	name: "Top 30 (Maximum) Census Subdivisions",
	nameGap: 16,
	axisLine: {show: false, lineStyle: {color: "gray"}},
	axisTick: {show: false, lineStyle: {color: "gray"}},
	axisLabel: {interval: 0, textStyle: {color: "gray"}},
	data: []
	},
	legend: {
	orient: "vertical",
	top: "bottom",
	left: "right",
	data:["Population"],
	textStyle: {
	color: "gray"
	}
	},
	visualMap: {
	type: "piecewise",
	min: 0,
	max : d3.max(defaultYearData, d => d.value[2]),
	splitNumber: 3,
	textStyle: {color: "gray"},
	color: ["#ff7f00","#984ea3","#4daf4a"],
	formatter: (value, value2) => `${parseInt(value).toLocaleString()} - ${parseInt(value2).toLocaleString()}`
	},
	grid: {
	right: 40,
	top: 100,
	bottom: 40,
	width: "30%",
	},
	series: [
	{
	id: "geoScatter",
	name: "Population",
	type: "scatter",
	coordinateSystem: "geo",
	symbolSize: 7,
	label: {
	normal: {
	show: false
	}
	},
	itemStyle: {
	emphasis: {
	borderColor: "#fff",
	borderWidth: 1
	}
	},
	data: defaultYearData
	},
	{
	id: "bar",
	zlevel: 2,
	type: "bar",
	symbol: "none",
	label: {
	show: true,
	position: "right",
	fontSize: 9.25,
	formatter: params => searchDefaultYear.get(params.name).value[2].toLocaleString()
	},
	data: []
	}
	]
	};
	//----------------Echarts options, attributes for building the visualization

	//Without this, when you hover on the map, the whole map is selected
	features.forEach(d => d.properties.name = d.id);
	echarts.registerMap("Alberta", geojson);

	gui.add(settings, "options", yearVals);

	//Set Echarts options attributes
	myChart.setOption(option);

	//---------------------For updating the data using the dropdown menu
	//---------------------For now used d3 I don't know how to use dat.gui to update the data
	d3.select("div > select").on("change.custom", function() {
	const selectedYear = d3.select(this).node().value;
	const fetchedData = scatterData[years.indexOf(searchYears.get(selectedYear))].values;
	const searchSelectedNames = d3.map(fetchedData, d => d.name);

	myChart.setOption({
	tooltip: {
	formatter: params => `${params.name} : ${searchSelectedNames.get(params.name).value[2].toLocaleString()}`
	},
	title: {
	text: `${titleName} ${selectedYear}`
	},
	visualMap: {
	min: 0,
	max : d3.max(fetchedData, d => d.value[2])
	},
	series: {
	id: "geoScatter",
	data: fetchedData
	},
	series: {
	id: "bar",
	label: {
	formatter: params => searchSelectedNames.get(params.name).value[2].toLocaleString()
	}
	}
	});
	});
	//---------------------For updating the data using the dropdown menu

	//Programatically close dat.gui, it's open by default
	d3.select("div > div.close-button.close-bottom").dispatch("click");

	myChart.on("brushselected", renderBrushed);

	//----------------------------For creating horizontal bar chart during brush selection
	function renderBrushed(params) {
	const geoScatterSeries = params.batch[0].selected[0];
	const dataIndexes = geoScatterSeries.dataIndex;
	const selectedItems = [];
	const categoryData = [];
	const barData = [];
	const maxBar = 30;

	if(dataIndexes.length == 0) {
	return;
	}
	if(dataIndexes.length !== 0) {
	dataIndexes.forEach(d => {
	const dataItem = option.series[0].data[d];
	selectedItems.push(dataItem);
	});

	selectedItems.sort((a, b) => b.value[2] - a.value[2]);

	for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
	categoryData.push(selectedItems[i].name);
	barData.push(selectedItems[i].value[2]);
	};

	this.setOption({
	yAxis : {
	data: categoryData.reverse()
	},
	xAxis: {},
	title: {},
	series: {
	id: "bar",
	data: barData.reverse()
	}
	});
	};
	};
	//----------------------------For creating horizontal bar chart during brush selection
	};