All examples By author By category About

Mbrownshoes

Full window Github gist

map and bar charts

<!DOCTYPE html>
<met charset="utf-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

.background {
    fill: none;
    pointer-events: all;
}

#prov-borders {
    stroke: #fff;
    stroke-linejoin: round;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
fill: steelblue;
}

.bar1 {
fill: #f03b20;
}

.line {
    fill: none;
    stroke: #1f77b4;
    stroke-width: 3px;
}

.line1 {
    fill: none;
    stroke: #ddd;
    stroke-width: 1.5px;
}

#chart_container {
    position: absolute;
    left:620px;
    top:60px;
}

#distid {
    padding-bottom: 500px;
}

.legend {
    left: 200px;
}

.map {
    padding-top: 100px;
}

.distreg{
    top: -110px;
    left: 100px;
    position: relative;
    font-size: 14px;

}
</style>

<div id="chart_container">
    <div id="chart">
        <h3 id="chart_title">2014 Regional District Disposal Rates </h3>
    </div>
    
    <div id = "graph"></div>
    
    
</div>

queue()
    .defer(d3.csv, "BC_Municipal_Solid_Waste_Disposal.csv")
    .defer(d3.json, "regions.json")
    .await(ready);

var width = 600,
    height = 700,
    active = d3.select(null);

var path = d3.geo.path()
    .projection(null);

var svg = d3.select(".map")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", stopped, true);

svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

var g = svg.append("g")

var stations = []
var regs = []
var legend_labels = ["< 300", "300+", "500+", "700+", ">900"]

// d3.select("#distid").style("visibility", "hidden")

function ready(error, BC_Municipal_Solid_Waste_Disposal, regions) {
    "use strict";
    if (error) {
        return console.error(error);
    }

stations = BC_Municipal_Solid_Waste_Disposal;

var bTopo = topojson.feature(regions, regions.objects.regions),
        topo = bTopo.features;

for (var i = 0; i < stations.length; i++) {
        console.log(stations[i])
        if (stations[i]['Disposal_Rate_kg'] == undefined) {
            stations[i]['Disposal_Rate_kg'] = Number(0);
            // console.log(stations[i]['Disposal_Rate_kg'])
        }
        if (stations[i]['Year'] == 2014) {
            if (stations[i]['Regional_District'] == 'Metro-Vancouver') {
                stations[i]['Regional_District'] = 'Greater Vancouver'
            }
            // console.log(stations[i]['Year'])
            stations[i]['Regional_District'] = stations[i]['Regional_District'].replace(' -', '')

var dataValue = Number(stations[i]['Disposal_Rate_kg']);
    
            // find the region in the topojson
            for (var j = 0; j < topo.length; j++) {
                if (topo[j].properties.region == 'Comox Valley' || topo[j].properties.region == 'Strathcona') {

topo[j].properties.region = 'Comox-Strathcona'
                }

if (stations[i]['Regional_District'] == topo[j].properties.region) {

topo[j].properties.value = dataValue;
                    console.log(topo[j].properties.region)
                    if (topo[j].properties.region == 'Comox-Strathcona') {
                        console.log(topo[j].properties.value)
                            // topo[j].properties.value = 2000
                    }
                    topo[j].properties.Disposal_Rate_kg = Number(stations[i]['Disposal_Rate_kg']);

break;
                }
                if (topo[j].properties.region == 'Comox-Strathcona') {
                    topo[j].properties.value = Number(stations[i]['Disposal_Rate_kg'])
                    topo[j].properties.Disposal_Rate_kg = Number(stations[i]['Disposal_Rate_kg'])
                }
            }
        }
    }

var tooltip = d3.select(".map")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .style("color", "#222")
        .style("padding", "8px")
        .style("background-color", "#fff")
        .style("border-radius", "6px")
        .style("font", "12 px sans-serif")
        .text("tooltip");

g.append("g")
        .attr("id", "provinces")
        .selectAll("path")
        .data(topo)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("id", "provinces")
        .attr("id", "prov-borders")
        .style("fill", function(d) {
            //Get data value
            var value = d.properties.value;
            // console.log(d.properties)
            // console.log('value: ' + value)
            if (value == null) {
                value = 0
                return "ccc"
            }
            if (value >= 0) {

return color(value);
            } else {
                return "ccc";
            }
        })
        .on("click", clicked)
        .on("mouseover", function(d) {
            var currentState = this;
            d3.select(this).style('fill-opacity', .9);

// console.log(d.properties)
            var id = d.properties.region_id;
            svg2.selectAll(".bar").style("fill", function(d) {
                return d.properties.region_id == id ? 'orange' : 'steelblue';

})
            if (d.properties.region == 'Stikine') {
                tooltip.text('NA')
            } else {
                tooltip.text(d.properties.region + ': ' + d.properties.value + ' kg per person')

}

tooltip.style("visibility", "visible");
        })
        .on("mousemove", function() {
            return tooltip.style("top", (d3.event.pageY) + "px").style("left", (d3.event.pageX) + "px");
        })
        .on("mouseout", function() {
            svg2.selectAll(".bar").style("fill", 'steelblue');

d3.selectAll('path')
                .style({
                    'fill-opacity': 1
                });
            return tooltip.style("visibility", "hidden");
        });

var legend = svg.selectAll("g.legend")
        .data([100, 300, 500, 700, 900])
        .enter().append("g")
        .attr("class", "legend");

var ls_w = 20,
        ls_h = 20;
    var leg_height = 500

legend.append("rect")
        .attr("x", 100)
        .attr("y", function(d, i) {
            return leg_height - (i * ls_h) - 2 * ls_h;
        })
        .attr("width", ls_w)
        .attr("height", ls_h)
        .style("fill", function(d, i) {
            return color(d);
        })
        .style("opacity", 0.8);

legend.append("text")
        .attr("x", 100 + 40)
        .attr("y", function(d, i) {
            return leg_height - (i * ls_h) - ls_h - 4;
        })
        .text(function(d, i) {
            return legend_labels[i];
        });

makeChart(topo)

}

var counter = 0;

function clicked(d) {

if (active.node() === this) return reset();
    active.classed("active", false);
    active = d3.select(this).classed("active", true);

var bounds = path.bounds(d),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        scale = .5 / Math.max(dx / width, dy / height),
        translate = [width / 2 - scale * x, height / 2 - scale * y];

if (counter == 0) {
        annualGraph(d);
        counter += 1;
    } else {
        updateGraph(d);

}

};

function reset() {
    active.classed("active", false);
    active = d3.select(null);

// svg.transition()
    //     .duration(750)
    //     .call(zoom.translate([0, 0]).scale(1).event);

// d3.select("h3")
    //     .transition()
    //     .delay(750)
    //     .style("visibility", "visible");
}

function zoomed() {
    g.style("stroke-width", 1 / d3.event.scale + "px");
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

// g.selectAll("circle")
    //     .attr("r", 10 / d3.event.scale);
}

function stopped() {
    if (d3.event.defaultPrevented) d3.event.stopPropagation();
}

// Chart stuff

margin = {
    top: 20,
    right: 20,
    bottom: 140,
    left: 100
};

var widthG = 1000 / 2 - margin.left - margin.right,
    heightG = 350 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y").parse;
var tickform = d3.time.format("%Y");

var chartData = [];
var alldat;

var x = d3.scale.ordinal().rangeRoundBands([0, widthG], .1);

var y = d3.scale.linear()
    .range([heightG, 0]);

format = d3.format("0,000");
// 
var customTicks = function(d) {
    return format(d)
};

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

svg2 = d3.select("#chart").append("svg")
    .attr("width", widthG + 100 + margin.left + margin.right)
    .attr("height", heightG + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function makeChart(topo) {

var tooltip1 = d3.select("#chart")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .style("color", "#222")
        .style("padding", "8px")
        .style("background-color", "#fff")
        .style("border-radius", "6px")
        .style("font", "12 px sans-serif")
        .text("tooltip1");
    // console.log(d)
    // console.log(regs)
    "use strict";
    topo.sort(function(a, b) {
        return b.properties.Disposal_Rate_kg - a.properties.Disposal_Rate_kg;
    });

topo.forEach(function(d) {

if (d.properties.Disposal_Rate_kg == undefined) {
            console.log('asdfasdfasddfas')
            d.properties.Disposal_Rate_kg = 0
        }
        chartData.push(d)

})

y.domain(d3.extent(chartData, function(d) {

return Number(d.properties.Disposal_Rate_kg);
    }));

x.domain(chartData.map(function(d) {
        return d.properties.region
    }));

svg2.append("g") //x axis group
        .attr("class", "x axis")
        .attr("transform", "translate(0," + heightG + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.25em")
        .attr("transform", "rotate(-65)");
    // .attr("transform", "rotate(-90)")

svg2.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -60)
        .attr("x", 0)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Regional Disposal Rates (Kg / person)");

svg2.selectAll(".bar")
        .data(chartData)
        .enter().append("rect")
        .attr("class", "bar")
        // .attr("transform", function(d) { return "translate(" + x(d.month) + ",0)"; })
        .attr("width", x.rangeBand())
        .attr("x", function(d) {
            return x(d.properties.region)
        })
        .attr("y", function(d) {
            // console.log(d.properties.Disposal_Rate_kg)
            return y(d.properties.Disposal_Rate_kg);
        })
        .attr("height", function(d) {
            return heightG - y(d.properties.Disposal_Rate_kg);
        })
        .on("mouseover", function(d) {
            d3.select(this)
                .style("fill", "orange");

tooltip1.text(d.properties.region + ': ' + format(d.properties.Disposal_Rate_kg))
            tooltip1.style("visibility", "visible");

})
        .on("mousemove", function() {
            return tooltip1.style("left", (d3.event.pageX - 660) + "px")
                .style("top", (d3.event.pageY - 50) + "px");
        })
        .on("mouseout", function() {
            d3.select(this)
                .style("fill", "steelblue");

return tooltip1.style("visibility", "hidden");
        });

}

svg3 = d3.select("#graph").append("svg")
    .attr("width", widthG + 100 + margin.left + margin.right)
    .attr("height", heightG + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line

var x1 = d3.scale.ordinal()
    .rangeRoundBands([0, widthG], .1);

var y1 = d3.scale.linear()
    .range([heightG, 0]);

var xAxis1 = d3.svg.axis()
    .scale(x1)
    // .ticks(4)
    .orient("bottom")
    .tickFormat(function(d, i) {
        if (i % 4 == 0) {
            console.log(d)
            return tickform(d)
        }
    });

var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left");

function annualGraph(d) {

d3.select("#graph")
        .append("p")
        .html(d.properties.region + ' Regional District')
        .attr("class", "distreg")

var tooltip2 = d3.select("#graph")
        .append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden")
        .style("color", "#222")
        .style("padding", "8px")
        .style("background-color", "#fff")
        .style("border-radius", "6px")
        .style("font", "12 px sans-serif")
        .text("tooltip2");

line = d3.svg.line()
        .x(function(d) {
            // console.log(d.date)
            return x1(d.date);
        })
        .y(function(d) {
            // console.log(d.Disposal_Rate_kg)
            return y1(d.Disposal_Rate_kg);
        });

chartData = []
        // console.log(d)
    stations.forEach(function(i) {
        // console.log(i)
        // console.log(i.Year + " 06")
        if (i.Regional_District == d.properties.region) {
            if (i.Disposal_Rate_kg == 'NA') {
                i.Disposal_Rate_kg = 0
            }
            chartData.push({
                date: parseDate(i.Year),
                Disposal_Rate_kg: Number(i.Disposal_Rate_kg)
            })
        }
    });

y1.domain(d3.extent(chartData, function(d) {

return Number(d.Disposal_Rate_kg);
    }));

x1.domain(chartData.map(function(d) {
        return d.date;
    }));

var dataSum = d3.sum(chartData, function(d) {
        return d.Disposal_Rate_kg;
    });

meanLine = d3.svg.line()
        .x(function(d) {
            return x1(d.date);
        })
        .y(function(d) {
            return y1(dataSum / chartData.length);
        });

svg3.append("g") //x axis group
        .attr("class", "x axis")
        .attr("transform", "translate(0," + heightG + ")")
        .call(xAxis1);

svg3.append("g")
        .attr("class", "y axis")
        .call(yAxis1)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -60)
        .attr("x", -10)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Disposal Rates (Kg / person)");

svg3.selectAll(".bar")
        .data(chartData)
        .enter().append("rect")
        .attr("class", "bar1")
        .attr("width", x.rangeBand())
        .attr("x", function(d) {
            return x1(d.date)
        })
        .attr("y", function(d) {
            // console.log(d.properties.Disposal_Rate_kg)
            return y1(d.Disposal_Rate_kg);
        })
        .attr("height", function(d) {
            // console.log(d.properties.Disposal_Rate_kg)
            return heightG - y1(d.Disposal_Rate_kg);
        })
        .on("mouseover", function(d) {
            d3.select(this)
                .style("fill", "orange");

tooltip2.text(format(d.Disposal_Rate_kg) + ' Kg / person')
            tooltip2.style("visibility", "visible");

})
        .on("mousemove", function() {
            return tooltip2.style("left", (d3.event.pageX - 660) + "px")
                .style("top", (d3.event.pageY - 50) + "px");
        })
        .on("mouseout", function() {
            d3.select(this)
                .style("fill", "#f03b20");

return tooltip2.style("visibility", "hidden");
        });

AvgLine = svg3.append("g");

AvgLine.append("path")
        .attr("class", "line1")
        .attr("d", meanLine(chartData));
}

function updateGraph(d) {

d3.select(".distreg")
        .transition()
        .delay(200)
        .text(d.properties.region + ' Regional District')
        // "use strict";
    var chartData = []
        // console.log(d)
    stations.forEach(function(i) {
        // console.log(i)

if (i.Regional_District == d.properties.region) {
            if (i.Disposal_Rate_kg == 'NA') {
                i.Disposal_Rate_kg = 0
            }
            chartData.push({

date: parseDate(i.Year),
                Disposal_Rate_kg: Number(i.Disposal_Rate_kg)
            })
        }
    })
    chartData.sort(function(a, b) {
        return a.date - b.date;
    });

y1.domain(d3.extent(chartData, function(d) {
        return d.Disposal_Rate_kg;
    }));

var dataSum = d3.sum(chartData, function(d) {
        // console.log(d.Disposal_Rate_kg)
        return d.Disposal_Rate_kg;
    });

meanLine = d3.svg.line()
        .x(function(d) {
            // console.log(d.date)
            return x1(d.date);
        })
        .y(function(d) {
            console.log(y1(dataSum / chartData.length))
            return y1(dataSum / chartData.length);
        });

svg3.selectAll(".bar1")
        .data(chartData)
        .transition()
        .duration(1000)
        .attr("width", x.rangeBand())
        .attr("x", function(d) {
            return x1(d.date)
        })
        .attr("y", function(d) {
            // console.log(d.properties.Disposal_Rate_kg)
            return y1(d.Disposal_Rate_kg);
        })
        .attr("height", function(d) {
            // console.log(d.properties.Disposal_Rate_kg)
            return heightG - y1(d.Disposal_Rate_kg);
        })

svg3.select(".line1")
        .transition()
        .duration(1000)
        .attr("d", meanLine(chartData));

// Update X axis
    svg3.select(".y.axis")
        .transition()
        .duration(1000)
        .call(yAxis1);

}

</script>

https://code.jquery.com/jquery-1.11.3.min.js

https://code.jquery.com/jquery-migrate-1.2.1.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://d3js.org/queue.v1.min.js