Alberta Census Subdivisions Total Population Estimates - Map

.block

width: 950
height: 750
border: yes
license: gpl-3.0

README.md

Credits

• 2016 Federal Census Division - Alberta Open Data
• Alberta Regional Dashboard
• Canada's Topojson
• UTF-8 encoded string has black question mark
• Edmonton-Bylaw-Infractions-I
• Echarts - Switch among 34 Provinces
• Reference Geojson used - to get mouse hovering effect
• Mapshaper
• Echarts Documentation
• Echarts Documentation - geo
• Echarts Documentation - formatter
• Echarts - VisualMap Piecewise
• Echarts - Scatter Map
• Echarts - Scatter Map Brush
• Echarts-Theme Builder
• Center a DIV horizontally and vertically [duplicate]
• Color Brewer
• EZGIF - to make demo gif and video
• OBS Studio - for screen recording

My Other Projects

Criticism and feedback highly recommended.
Shoot me an email or message me @Michael_Otyz.

• OTHER PROJECTS

alberta-mapper-topo.json

alberta_census_subdivisions(2001-2017).csv

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"
            }
        }
    });
}));

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>

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
};

thumbnail.png