D3 Examples - map and bar charts

xxxxxxxxxx
 
<!DOCTYPE html>
<met charset="utf-8">
​
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
​
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
​
<!-- Latest compiled and minified JavaScript -->
<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>
​
<style>
body {
    margin-left: 0px;
    margin-right: 112px;
    font-size: 12px;
}
​
.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>
​
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
​
​
<p class="map" id="map">
​
<div id="chart_container">
    <div id="chart">
        <h3 id="chart_title">2014 Regional District Disposal Rates </h3>
    </div>
    
    <div id = "graph"></div>
    <!-- <h3 id="distid">' '</h3> -->
    
</div>
​
<script>
var color = d3.scale.threshold()
    .domain([100, 300, 500, 700, 900])
    .range(["#f1eef6", "#d0d1e6", "#a6bddb", "#74a9cf", "#2b8cbe", "#045a8d"]);
​
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>
​
​
    