D3 Examples - US states

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
        svg {
            border: 1px solid red;
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
​
<h2> GDP (2014) - U.S. states Vs Countries</h2>
<h3>Selected State =
    <b id='statename'>name</b>;
    GDP ($M) =
    <b id='agvalue'>value</b>
</h3>
<h3>Equivalent Country=
    <b id='countryname'>country</b>;
    GDP ($M)=
    <b id='countrygdpvalue'>countrygdp</b>
</h3>
​
<script type='text/javascript'>
var w = 600;
var h = 400;
​
//setup our display area
var svg = d3.select('body')
            .append('svg')
            .attr('w',w+'px')
            .attr('h',h+'px');
​
​
//setup a projection
var projection = d3.geo.albersUsa()
    .translate([w/2,h/2])
    .scale(750) //1000 is the default scale
    ;
​
var path = d3.geo.path().projection(projection);
​
// smoosh function
function matchByState(json,data) {
    // smoosh ag productivity data with the geojson data
    for(var i=0; i<data.length; i++) {
        var dataState = data[i].state;
        for(var j=0; j<json.features.length; j++) {
            var jsonState = json.features[j].properties.name;
            if(dataState == jsonState) {
                json.features[i].properties.value = parseFloat(data[i].value);
                json.features[i].properties.country = data[i].country;
                json.features[i].properties.countrygdp = parseFloat(data[i].countrygdp);
                break;
            }
        }
    }
}
​
​
//load the data
d3.json('us-states.json', function(json) {
    //when the json file is loaded
    // set up the paths for each state
    d3.csv('gdp-2014.csv', function(data) {
          matchByState(json,data);
//          var colors = [];
// some output colors
//for(var i=1; i<=10; i++) {
//    var v = Math.round(i*255.0/10);
//    colors.push('rgb('+v+',255,'+v+')');
//}
​
//var colors = ['rgb(237,248,233)', 'rgb(186,228,179)',
//                     'rgb(116,196,118)', 'rgb(49,163,84)','rgb(0,109,44)',
//                     'rgb(237,248,233)', 'rgb(186,228,179)',
//                     'rgb(116,196,118)', 'rgb(49,163,84)','rgb(0,109,44)'];
​
//var colors = ['rgb(247,251,255)','rgb(222,235,247)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(66,146,198)','rgb(33,113,181)','rgb(8,81,156)','rgb(8,48,107)'];
​
//var colors = ['rgb(193,221,254)','rgb(164,200,233)','rgb(111,164,214)','rgb(56,142,188)','rgb(21,58,80)','rgb(37,90,125)','rgb(23,85,139)','rgb(4,48,92)','rgb(6,28,80)'];
​
//var color = d3.scale.quantize().range(colors);
​
var legend = svg.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");
​
var minimum = 0.03, maximum = 2.3;
​
var minimumColor = "#BFD3E6", maximumColor = "#88419D";
​
var color = d3.scale.linear().domain([minimum, maximum]).range([minimumColor, maximumColor]);
​
var y = d3.scale.linear().range([150, 0]).domain([minimum, maximum]);
​
var yAxis = d3.svg.axis().scale(y).orient("right").ticks(5);
​
​
//function to calculate a color based on the productivity value
function calcColor(d) {
    var value = d.properties.value;
    if(value) return color(value);  // get color from the color Scale
    return '#ccc'; //gray if there is no value
}
​
//function to get productivity value
function getValue(d) {
    return parseFloat(d.value);
}
​
//set up the domain / input of our color scale
color.domain([
    d3.min(data, getValue),
    d3.max(data, getValue)
    ]);
​
// set up the paths for each state
svg.selectAll('path')
    .data(json.features)
    .enter()
    .append("path")
    .attr('d',path) //bind the converter
    .attr('fill', calcColor)
    ;
​
svg.selectAll('path')
    .on('mouseover', function() {
        d3.select(this)
            .transition().duration(250)
            .attr('fill','orange');
    })
    .on('mouseout', function() {
        d3.select(this)
            .transition().duration(250)
            .attr('fill',calcColor);
    });
​
svg.selectAll('path')
    .on('click',function(d) {
        d3.select("#statename").text(d.properties.name);
        d3.select("#agvalue").text(d.properties.value);
        d3.select("#countryname").text(d.properties.country);
        d3.select("#countrygdpvalue").text(d.properties.countrygdp);
    })
    ;
​
legend.append("stop").attr("offset", "0%").attr("stop-color", maximumColor).attr("stop-opacity", 1);
​
legend.append("stop").attr("offset", "100%").attr("stop-color", minimumColor).attr("stop-opacity", 1);
​
svg.append("rect").attr("width", w - 570).attr("height", h - 250).style("fill", "url(#gradient)").attr("transform", "translate(520,230)");
​
//key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("axis title");
​
svg.append("g").attr("class", "y axis").attr("transform", "translate(550,230)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 35).attr("dy", ".71em").style("text-anchor", "end").text("GDP ($Trillion)");
​
​
    });
});
​
​
</script>
</body>
</html>
    