Created
February 15, 2016 07:28
-
-
Save a10k/88b9a33ced3ab47537fd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| hosting map viz |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| <style> | |
| /*svg{ | |
| margin-left: 10%; | |
| margin-top: 5%; | |
| }*/ | |
| body{ | |
| background-color: black; | |
| } | |
| path:hover { | |
| fill: #fce57e; | |
| } | |
| h1{ | |
| margin-left: -10%; | |
| margin-top: 2%; | |
| color: white; | |
| } | |
| circle{ | |
| cursor: pointer; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <div class="row" style="margin-left:1%;"> | |
| <h1 class="text-center">US Industries</h1> | |
| <div class="col-md-8"> | |
| <!-- <button class="btn btn-primary zoom-off" id="reset_zoom" style="visibility:hidden;">Zoom Off</button> --> | |
| <svg class="usmap" width="100%" viewBox="0 0 900 550" style="z-index:1;position:relative;margin-left:3%;margin-top:3%;"> | |
| <svg id="us-states" width="900" height="950"></svg> | |
| </svg> | |
| </div> | |
| <div class="col-md-4"> | |
| <img src="legend.png" alt="Smiley face" height="42" width="300" style="margin-top:20%;"> | |
| <textarea rows="6" cols="40" style="margin-top:10%;">Color of circle is based on All_Industries_Total of a Region. A Region with lowest no. of All_Industries_Total is coloured Red and highest no. of All_Industries_Total is coloured Green and other circles are coloured by the gradient from red to green.</textarea> | |
| </div> | |
| </div> | |
| <script> | |
| var data_json = {"All_Industries_Total":{"0":100.2,"1":32.5,"2":193.2,"3":38.6,"4":27.3,"5":11.9,"6":26.5,"7":23.4,"8":106.1,"9":225.1,"10":405.4,"11":275.3,"12":272.8,"13":152.7,"14":187.6,"15":224.0,"16":85.6,"17":51.2,"18":58.4,"19":97.9,"20":89.6,"21":27.0,"22":15.3,"23":9.6,"24":86.4,"25":41.5,"26":245.8,"27":196.3,"28":95.4,"29":58.3,"30":34.1,"31":203.4,"32":115.9,"33":125.7,"34":154.4,"35":29.3,"36":83.0,"37":20.2,"38":48.2,"39":476.4,"40":83.6,"41":13.9,"42":7.2,"43":35.6,"44":9.0,"45":14.4,"46":602.8,"47":32.1,"48":40.0,"49":46.3,"50":97.9,"51":18.2,"52":17.2},"Finance_and_insurance":{"0":"13","1":"3.7","2":"24.7","3":"3","4":"6.8","5":"0.9","6":"4.2","7":"0.7","8":"3.8","9":"30.9","10":"82.3","11":"15.8","12":"20.8","13":"1.5","14":"4.7","15":"5.9","16":"7.5","17":"7.9","18":"2.3","19":"6.8","20":"2.5","21":"2.6","22":"0.7","23":"0.7","24":"H","25":"0.8","26":"18.4","27":"5.5","28":"1.5","29":"0.5","30":"0.3","31":"4.7","32":"2.2","33":"2.5","34":"2.5","35":"0.1","36":"4.3","37":"0.5","38":"0.7","39":"18.4","40":"6.9","41":"0.2","42":"0.5","43":"1.7","44":"0.4","45":"0.1","46":"42.4","47":"2.9","48":"H","49":"1.3","50":"2.7","51":"4.8","52":"0.4"},"Information":{"0":"2.8","1":"1","2":"9.3","3":"0.5","4":"0.7","5":"0.5","6":"0.9","7":"2.1","8":"4.5","9":"10.4","10":"27.8","11":"7.5","12":"10.4","13":"5.8","14":"5.3","15":"6","16":"2.3","17":"2.9","18":"2.8","19":"13.3","20":"3","21":"0.3","22":"0.1","23":"A","24":"1.7","25":"0.6","26":"12.5","27":"7.6","28":"2.4","29":"0.4","30":"0.2","31":"3","32":"1.6","33":"3","34":"5.3","35":"0.1","36":"2.4","37":"1.9","38":"0.6","39":"14.9","40":"5.8","41":"G","42":"0.1","43":"1","44":"0.1","45":"0.1","46":"37.8","47":"0.4","48":"1.1","49":"2.7","50":"9.4","51":"0.7","52":"0.7"},"Other_Industries":{"0":"20.3","1":"I","2":"44.6","3":"6.6","4":"I","5":"4.3","6":"5.7","7":"12.7","8":"27.1","9":"50.5","10":"117.5","11":"68.6","12":"72","13":"25.8","14":"34.1","15":"47.7","16":"23.6","17":"10.9","18":"11.5","19":"26.4","20":"22.7","21":"6","22":"5.9","23":"H","24":"J","25":"7.5","26":"89.3","27":"52.7","28":"17.2","29":"26","30":"10.6","31":"38.2","32":"21.8","33":"29.9","34":"32.3","35":"9.2","36":"30.7","37":"I","38":"16.5","39":"156.3","40":"25","41":"I","42":"3.4","43":"14.1","44":"4.6","45":"I","46":"166.1","47":"J","48":"J","49":"13.6","50":"27.6","51":"H","52":"I"},"Professional_scientific_and_technical_services":{"0":"4.1","1":"0.6","2":"10.3","3":"0.8","4":"G","5":"0.4","6":"1.9","7":"4","8":"4.1","9":"11.8","10":"33.3","11":"17.9","12":"20.9","13":"2.1","14":"8.6","15":"9.3","16":"1.4","17":"1","18":"1.3","19":"4.8","20":"3.7","21":"0.7","22":"0.2","23":"0.2","24":"3.6","25":"1.5","26":"8.5","27":"10.4","28":"1.7","29":"5.5","30":"1","31":"5","32":"3.9","33":"3.4","34":"16.1","35":"0.5","36":"3","37":"G","38":"1.4","39":"35.3","40":"4.1","41":"0.6","42":"0.3","43":"0.8","44":"0.4","45":"0.2","46":"31.2","47":"0.2","48":"1.3","49":"0.7","50":"6.4","51":"0.1","52":"0.2"},"Real_estate_and_rental_and_leasing":{"0":"0.3","1":"(*)","2":"2.3","3":"0.1","4":"0.1","5":"(*)","6":"(*)","7":"0.3","8":"1.3","9":"2.2","10":"3.9","11":"1.6","12":"1.4","13":"0.2","14":"0.3","15":"0.6","16":"0.1","17":"0.1","18":"0.2","19":"0.7","20":"0.1","21":"(*)","22":"(*)","23":"(*)","24":"0.4","25":"(*)","26":"10.4","27":"2.3","28":"0.3","29":"0.2","30":"(*)","31":"0.6","32":"0.6","33":"0.2","34":"0.9","35":"(*)","36":"1.1","37":"(*)","38":"0.2","39":"7","40":"0.3","41":"(*)","42":"0.1","43":"0.2","44":"(*)","45":"A","46":"5.8","47":"G","48":"1.3","49":"0.2","50":"0.6","51":"A","52":"A"},"Region":{"0":"Connecticut","1":"Maine","2":"Massachusetts","3":"New Hampshire","4":"Rhode Island","5":"Vermont","6":"Delaware","7":"District of Columbia","8":"Maryland","9":"New Jersey","10":"New York","11":"Pennsylvania","12":"Illinois","13":"Indiana","14":"Michigan","15":"Ohio","16":"Wisconsin","17":"Iowa","18":"Kansas","19":"Minnesota","20":"Missouri","21":"Nebraska","22":"North Dakota","23":"South Dakota","24":"Alabama","25":"Arkansas","26":"Florida","27":"Georgia","28":"Kentucky","29":"Louisiana","30":"Mississippi","31":"North Carolina","32":"South Carolina","33":"Tennessee","34":"Virginia:","35":"West Virginia","36":"Arizona","37":"New Mexico","38":"Oklahoma","39":"Texas","40":"Colorado","41":"Idaho","42":"Montana","43":"Utah","44":"Wyoming","45":"Alaska","46":"California","47":"Hawaii","48":"Nevada","49":"Oregon","50":"Washington","51":"Puerto Rico","52":"Other U.S. areas"},"Retail_Trade":{"0":"17.9","1":"J","2":"36.3","3":"7.8","4":"4.6","5":"2.6","6":"2.4","7":"1.4","8":"30.1","9":"20.2","10":"43.8","11":"35.7","12":"15.7","13":"6.1","14":"5.1","15":"16.5","16":"3.5","17":"1.3","18":"1.7","19":"4.1","20":"3.8","21":"0.8","22":"0.2","23":"0.1","24":"2","25":"0.7","26":"27.7","27":"11.3","28":"2.7","29":"2.6","30":"0.7","31":"38","32":"9.4","33":"5.6","34":"37.4","35":"2.7","36":"10.2","37":"1.1","38":"1.3","39":"15.7","40":"4.4","41":"0.7","42":"0.2","43":"1.3","44":"0.3","45":"1.3","46":"49.9","47":"5.6","48":"3.6","49":"2.6","50":"4.7","51":"0.6","52":"G"},"Total_Manufacturing":{"0":31.9,"1":8.6,"2":48.9,"3":17.4,"4":3.6,"5":2.7,"6":10.5,"7":1.4,"8":28.9,"9":70.8,"10":62.5,"11":111.0,"12":101.4,"13":97.9,"14":115.8,"15":123.6,"16":41.1,"17":24.4,"18":31.3,"19":32.5,"20":47.3,"21":15.3,"22":7.1,"23":5.0,"24":51.4,"25":28.5,"26":58.6,"27":75.5,"28":53.9,"29":19.3,"30":13.3,"31":99.2,"32":65.6,"33":62.2,"34":44.5,"35":14.4,"36":23.2,"37":6.7,"38":24.8,"39":175.6,"40":30.0,"41":5.5,"42":1.8,"43":13.5,"44":2.9,"45":5.9,"46":182.7,"47":3.0,"48":8.7,"49":15.8,"50":33.2,"51":7.3,"52":5.3},"Wholesale_Trade":{"0":10.0,"1":1.2,"2":16.8,"3":2.4,"4":1.6,"5":0.4,"6":1.0,"7":0.8,"8":6.3,"9":28.4,"10":34.5,"11":17.3,"12":30.1,"13":13.3,"14":13.8,"15":14.4,"16":6.0,"17":2.8,"18":7.2,"19":9.2,"20":6.5,"21":1.3,"22":1.0,"23":0.6,"24":9.0,"25":2.1,"26":20.5,"27":31.0,"28":15.8,"29":3.9,"30":8.1,"31":14.6,"32":10.9,"33":18.8,"34":15.4,"35":2.3,"36":8.0,"37":1.4,"38":2.9,"39":53.3,"40":7.1,"41":0.8,"42":0.7,"43":3.0,"44":0.2,"45":0.4,"46":86.8,"47":1.0,"48":2.3,"49":9.3,"50":13.2,"51":0.8,"52":0.1},"Color":{"0":"#d51500","1":"#f10700","2":"#ad2900","3":"#ef0800","4":"#f30600","5":"#fa0300","6":"#f40600","7":"#f50500","8":"#d21700","9":"#a03000","10":"#545600","11":"#8b3a00","12":"#8c3a00","13":"#be2000","14":"#b02800","15":"#a03000","16":"#db1200","17":"#e90b00","18":"#e60c00","19":"#d61500","20":"#d91300","21":"#f40600","22":"#f90300","23":"#fb0200","24":"#da1200","25":"#ed0900","26":"#973400","27":"#ac2a00","28":"#d71400","29":"#e60c00","30":"#f10700","31":"#a92b00","32":"#ce1900","33":"#ca1b00","34":"#be2100","35":"#f30600","36":"#dc1200","37":"#f60400","38":"#eb0a00","39":"#356500","40":"#dc1200","41":"#f90300","42":"#fc0200","43":"#f00800","44":"#fb0200","45":"#f90300","46":"green","47":"#f10700","48":"#ee0800","49":"#eb0a00","50":"#d61500","51":"#f70400","52":"#f80400"},"Latitude":{"0":41.597782,"1":44.693947,"2":42.230171,"3":43.452492,"4":41.680893,"5":44.045876,"6":39.318523,"7":38.897438,"8":39.063946,"9":40.298904,"10":42.165726,"11":40.590752,"12":40.349457,"13":39.849426,"14":43.326618,"15":40.388783,"16":44.268543,"17":42.011539,"18":38.5266,"19":45.694454,"20":38.456085,"21":41.12537,"22":47.528912,"23":44.299782,"24":32.806671,"25":34.969704,"26":27.766279,"27":33.040619,"28":37.66814,"29":31.169546,"30":32.741646,"31":35.630066,"32":33.856892,"33":35.747845,"34":37.769337,"35":38.491226,"36":33.729759,"37":34.840515,"38":35.565342,"39":31.054487,"40":39.059811,"41":44.240459,"42":46.921925,"43":40.150032,"44":42.755966,"45":61.370716,"46":36.116203,"47":21.094318,"48":38.313515,"49":44.572021,"50":47.400902,"51":40.590752,"52":44.572021},"Longitude":{"0":-72.755371,"1":-69.381927,"2":-71.530106,"3":-71.563896,"4":-71.51178,"5":-72.710686,"6":-75.507141,"7":-77.026817,"8":-76.802101,"9":-74.521011,"10":-74.948051,"11":-77.209755,"12":-88.986137,"13":-86.258278,"14":-84.536095,"15":-82.764915,"16":-89.616508,"17":-93.210526,"18":-96.726486,"19":-93.900192,"20":-92.288368,"21":-98.268082,"22":-99.784012,"23":-99.438828,"24":-86.79113,"25":-92.373123,"26":-81.686783,"27":-83.643074,"28":-84.670067,"29":-91.867805,"30":-89.678696,"31":-79.806419,"32":-80.945007,"33":-86.692345,"34":-78.169968,"35":-80.954453,"36":-111.431221,"37":-106.248482,"38":-96.928917,"39":-97.563461,"40":-105.311104,"41":-114.478828,"42":-110.454353,"43":-111.862434,"44":-107.30249,"45":-152.404419,"46":-119.681564,"47":-157.498337,"48":-117.055374,"49":-122.070938,"50":-121.490494,"51":-77.209755,"52":-122.070938}} | |
| // d3.csv("bea_fdi_employment.csv", function(data) { | |
| var All_Industries_Total = d3.values(data_json.All_Industries_Total); | |
| var Finance_and_insurance = d3.values(data_json.Finance_and_insurance); | |
| var Information = d3.values(data_json.Information); | |
| var Other_Industries = d3.values(data_json.Other_Industries); | |
| var Professional_scientific_and_technical_services = d3.values(data_json.Professional_scientific_and_technical_services); | |
| var Real_estate_and_rental_and_leasing = d3.values(data_json.Real_estate_and_rental_and_leasing); | |
| var Region = d3.values(data_json.Region); | |
| var Retail_Trade = d3.values(data_json.Retail_Trade); | |
| var Total_Manufacturing = d3.values(data_json.Total_Manufacturing); | |
| var Wholesale_Trade = d3.values(data_json.Wholesale_Trade); | |
| var Color = d3.values(data_json.Color); | |
| var Latitude = d3.values(data_json.Latitude); | |
| var Longitude = d3.values(data_json.Longitude); | |
| var width = 960, | |
| height = 500, | |
| active; | |
| var projection = d3.geo.albersUsa(); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("#us-states").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var g = svg.append("g"); | |
| d3.json("us.json", function(error, us) { | |
| // console.log(topojson.feature(us, us.objects["state"]).features); | |
| g.selectAll("path") | |
| .data(topojson.feature(us, us.objects["state"]).features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("class", "feature") | |
| .attr("id", function(d) { | |
| return d.properties.NAME10 | |
| }) | |
| // .style('stroke', 'black') | |
| // .style('stroke-width', '1') | |
| .attr('stroke', '#fff') | |
| .attr('fill', 'black') | |
| .attr('opacity', 1) | |
| // .attr("title", function(d,i) { return d.properties.NAME10; }) | |
| for (i=0;i<All_Industries_Total.length;i++){ | |
| var xy = projection([parseInt(Longitude[i]), parseInt(Latitude[i])]) | |
| svg.append("circle") | |
| .attr("cx", xy[0]) | |
| .attr("cy", xy[1]) | |
| .attr("fill", Color[i]) | |
| .attr("r", 10) | |
| .append('title').html("Region : "+Region[i]+"<br>"+"All_Industries_Total : "+All_Industries_Total[i]+"<br>"+"Finance_and_insurance : "+Finance_and_insurance[i]+"<br>"+"Information : "+Information[i]+"<br>"+"Other_Industries : "+Other_Industries[i]+"<br>"+"Professional_scientific_and_technical_services : "+Professional_scientific_and_technical_services[i]+"<br>"+"Real_estate_and_rental_and_leasing "+Real_estate_and_rental_and_leasing[i]+"<br>"+"Retail_Trade : "+Retail_Trade[i]+"<br>"+"Total_Manufacturing : "+Total_Manufacturing[i]+"<br>"+"Wholesale_Trade : "+Wholesale_Trade[i]); | |
| } | |
| }); | |
| // }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment