Skip to content

Instantly share code, notes, and snippets.

@a10k

a10k/.hostTest2

Created February 15, 2016 07:28
Show Gist options
  • Save a10k/88b9a33ced3ab47537fd to your computer and use it in GitHub Desktop.
Save a10k/88b9a33ced3ab47537fd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.hostTest2
hosting map viz
Raw
index.html
<!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>
Display the source blob
Display the rendered blob
Raw
us.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment