Skip to content

Instantly share code, notes, and snippets.

@a10k

a10k/.hostTest

Last active February 10, 2016 14:09
Show Gist options
  • Save a10k/0d93e1dfe8d1e03ca71f to your computer and use it in GitHub Desktop.
Save a10k/0d93e1dfe8d1e03ca71f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap.js
/**
* Author: Rizwan.Khan
* File used for rdraw chart
*/
var global = {};
function bootstrap() {
global.dataProvider = new clsDataProvider({});
global.dataProvider.loadData(handleOnLoadData);
}
function handleOnLoadData() {
//Add combo box
var select = d3.select("#combo-box-cntnr")
.append("select")
.attr("id", "dept-combo-box")
.on("change", function () { return getTest(); })
var sectors = ["---Select Sector---","Total_Manufacturing", "Wholesale_Trade", "Retail_Trade", "Information", "Finance_and_insurance", "Real_estate_and_rental_and_leasing", "Professional_scientific_and_technical_services", "Other_Industries"];
var select23 = d3.select("#combotext")
.text("Color");
options = select.selectAll("option")
.data(sectors)
.enter()
.append("option")
.attr("value", function (d) { return d })
.attr("class", "drop-title")
.text(function (d) { return d.replace(/[_]/g,' ') });
comboSelectedValue = document.getElementById("dept-combo-box").options[0].value;
$("#dept-combo-box").select2()
$("#dept-combo-box")
.on("change", function () {
selectedValue = document.getElementById("dept-combo-box").value;
if(selectedValue!="---Select Sector---"){
DrawScatterChart(selectedValue);
}
});
function DrawScatterChart(seletctedItem) {
//for removing existing svg data
d3.select("svg").remove();
//load data
var data=global.dataProvider.getDepartmentData()
//Check invaid Data and replace invaid data with 1, so that graph will render perfectly
data.forEach(function (d) {
if(isNaN(d[seletctedItem])){
d[seletctedItem]=0.1;
}
});
var selectedDepartmentData = [];
data.forEach(function (d) {
selectedDepartmentData.push({
seletctedItem: d[seletctedItem],
"All_Industries_Total": d.All_Industries_Total,
"Total_Manufacturing": d.Total_Manufacturing,
"Region": d.Region,
"cy":d[seletctedItem],
"cx":d.All_Industries_Total
})
});
data=selectedDepartmentData;
var margin = {t:30, r:20, b:20, l:40 },
w = 1020 - margin.l - margin.r,
h = 520 - margin.t - margin.b,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h - 60, 0]),
//colors scale for bubbles
color = d3.scale.category10();
var wid=w + margin.l + margin.r;
var hig=h + margin.t + margin.b;
var svg = d3.select("#chart").append("svg")
.attr("width",wid)
.attr("height", hig)
//.attr("viewBox",'0 0 '+800+' '+800) /* viewbox element so svg is responsive */
// .attr("preserveAspectRatio", "xMinYMin meet")
// set axes, as well as details on their ticks
var xAxis = d3.svg.axis()
.scale(x)
.ticks(20)
.tickSubdivide(true)
.tickSize(6, 3, 0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(20)
.tickSubdivide(true)
.tickSize(6, 3, 0)
.orient("left");
// group that will contain all of the plots
var groups = svg.append("g").attr("transform", "translate(" + margin.l + "," + margin.t + ")");
// sort data by slected item
data.sort(function (a, b) {
return b.seletctedItem - a.seletctedItem;
});
x.domain([0, data[0].All_Industries_Total]);
y.domain([0, data[0].seletctedItem])
// style the circles, set their locations based on data
var circles =
groups.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "circles")
.attr({
cx: function(d) { return x(+d.cx); },
cy: function(d) { return y(+d.cy); },
r: 8
})
.style("fill", function(d) { return color(d.Region); });
// mouse over event of bubble
var mouseOn = function() {
var circle = d3.select(this);
// transition to increase size/opacity of bubble
circle.transition()
.duration(800).style("opacity", 1)
.attr("r", 12).ease("elastic");
// append lines to bubbles that will be used to show the precise data points.
// translate their location based on margins
svg.append("g")
.attr("class", "guide")
.append("line")
.attr("x1", circle.attr("cx"))
.attr("x2", circle.attr("cx"))
.attr("y1", +circle.attr("cy") + 26)
.attr("y2", h - margin.t - margin.b)
.attr("transform", "translate(40,20)")
.style("stroke", circle.style("fill"))
.transition().delay(200).duration(400).styleTween("opacity",
function() { return d3.interpolate(0, .5); })
svg.append("g")
.attr("class", "guide")
.append("line")
.attr("x1", +circle.attr("cx") - 16)
.attr("x2", 0)
.attr("y1", circle.attr("cy"))
.attr("y2", circle.attr("cy"))
.attr("transform", "translate(40,30)")
.style("stroke", circle.style("fill"))
.transition().delay(200).duration(400).styleTween("opacity",
function() { return d3.interpolate(0, .5); });
// function to move mouseover item to front of SVG stage, in case
// another bubble overlaps it
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
// skip this functionality for IE9, which doesn't like it
if (!$.browser.msie) {
circle.moveToFront();
}
};
// Mouse off event
var mouseOff = function() {
var circle = d3.select(this);
// go back to original size and opacity
circle.transition()
.duration(800).style("opacity", .5)
.attr("r", 8).ease("elastic");
// fade out guide lines, then remove them
d3.selectAll(".guide").transition().duration(100).styleTween("opacity",
function() { return d3.interpolate(.5, 0); })
.remove()
};
//mouseon/out functions
circles.on("mouseover", mouseOn);
circles.on("mouseout", mouseOff);
//tooltips (using jQuery plugin tipsy)
circles.append("title")
.text(function(d) {
return "Region: "+d.Region+" ("+seletctedItem.replace("/[_]/g", " ")+" Sector: "+d.seletctedItem+",All Department Total: "+d.All_Industries_Total+")"; })
$(".circles").tipsy({ gravity: 's', });
// draw axes and axis labels
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margin.l + "," + (h - 60 + margin.t) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.l + "," + margin.t + ")")
.call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", w + 50)
.attr("y", h - margin.t - 5)
.text("All Industries Total");
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("x", -20)
.attr("y", 45)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Sector");
}
}
Raw
clsDataProvider.js
/**
* Author: Rizwan.Khan
* File used for loading the data
*/
function clsDataProvider(pConfig) {
var me = this;
//-----------------------------------------------------------------------//
me.constructor = function (pConfig) {
for (pName in pConfig) {
me[pName] = pConfig[pName];
}
};
//-----------------------------------------------------------------------//
me.loadData = function (pCallBack) {
d3.json("data.json", function (departmentData) {
me.departmentData = departmentData;
pCallBack(me);
});
};
//-----------------------------------------------------------------------//
me.getDepartmentData = function () {
return me.departmentData;
};
me.constructor(pConfig);
return me;
}
Raw
data.json
[
{
"Region": "Connecticut",
"All_Industries_Total": "100.2",
"Total_Manufacturing": "31.9",
"Wholesale_Trade": "10.0",
"Retail_Trade": "17.9",
"Information": "2.8",
"Finance_and_insurance": "13.0",
"Real_estate_and_rental_and_leasing": "0.3",
"Professional_scientific_and_technical_services": "4.1",
"Other_Industries": "20.3"
},
{
"Region": "Maine",
"All_Industries_Total": "32.5",
"Total_Manufacturing": "8.6",
"Wholesale_Trade": "1.2",
"Retail_Trade": "1",
"Information": "1.0",
"Finance_and_insurance": "3.7",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.6",
"Other_Industries": "I"
},
{
"Region": "Massachusetts",
"All_Industries_Total": "193.2",
"Total_Manufacturing": "48.9",
"Wholesale_Trade": "16.8",
"Retail_Trade": "36.3",
"Information": "9.3",
"Finance_and_insurance": "24.7",
"Real_estate_and_rental_and_leasing": "2.3",
"Professional_scientific_and_technical_services": "10.3",
"Other_Industries": "44.6"
},
{
"Region": "New Hampshire",
"All_Industries_Total": "38.6",
"Total_Manufacturing": "17.4",
"Wholesale_Trade": "2.4",
"Retail_Trade": "7.8",
"Information": "0.5",
"Finance_and_insurance": "3.0",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "0.8",
"Other_Industries": "6.6"
},
{
"Region": "Rhode Island",
"All_Industries_Total": "27.3",
"Total_Manufacturing": "3.6",
"Wholesale_Trade": "1.6",
"Retail_Trade": "4.6",
"Information": "0.7",
"Finance_and_insurance": "6.8",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "G",
"Other_Industries": "I"
},
{
"Region": "Vermont",
"All_Industries_Total": "11.9",
"Total_Manufacturing": "2.7",
"Wholesale_Trade": "0.4",
"Retail_Trade": "2.6",
"Information": "0.5",
"Finance_and_insurance": "0.9",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.4",
"Other_Industries": "4.3"
},
{
"Region": "Delaware",
"All_Industries_Total": "26.5",
"Total_Manufacturing": "10.5",
"Wholesale_Trade": "1.0",
"Retail_Trade": "2.4",
"Information": "0.9",
"Finance_and_insurance": "4.2",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "1.9",
"Other_Industries": "5.7"
},
{
"Region": "District of Columbia",
"All_Industries_Total": "23.4",
"Total_Manufacturing": "1.4",
"Wholesale_Trade": "0.8",
"Retail_Trade": "1.4",
"Information": "2.1",
"Finance_and_insurance": "0.7",
"Real_estate_and_rental_and_leasing": "0.3",
"Professional_scientific_and_technical_services": "4.0",
"Other_Industries": "12.7"
},
{
"Region": "Maryland",
"All_Industries_Total": "106.1",
"Total_Manufacturing": "28.9",
"Wholesale_Trade": "6.3",
"Retail_Trade": "30.1",
"Information": "4.5",
"Finance_and_insurance": "3.8",
"Real_estate_and_rental_and_leasing": "1.3",
"Professional_scientific_and_technical_services": "4.1",
"Other_Industries": "27.1"
},
{
"Region": "New Jersey",
"All_Industries_Total": "225.1",
"Total_Manufacturing": "70.8",
"Wholesale_Trade": "28.4",
"Retail_Trade": "20.2",
"Information": "10.4",
"Finance_and_insurance": "30.9",
"Real_estate_and_rental_and_leasing": "2.2",
"Professional_scientific_and_technical_services": "11.8",
"Other_Industries": "50.5"
},
{
"Region": "New York",
"All_Industries_Total": "405.4",
"Total_Manufacturing": "62.5",
"Wholesale_Trade": "34.5",
"Retail_Trade": "43.8",
"Information": "27.8",
"Finance_and_insurance": "82.3",
"Real_estate_and_rental_and_leasing": "3.9",
"Professional_scientific_and_technical_services": "33.3",
"Other_Industries": "117.5"
},
{
"Region": "Pennsylvania",
"All_Industries_Total": "275.3",
"Total_Manufacturing": "111.0",
"Wholesale_Trade": "17.3",
"Retail_Trade": "35.7",
"Information": "7.5",
"Finance_and_insurance": "15.8",
"Real_estate_and_rental_and_leasing": "1.6",
"Professional_scientific_and_technical_services": "17.9",
"Other_Industries": "68.6"
},
{
"Region": "Illinois",
"All_Industries_Total": "272.8",
"Total_Manufacturing": "101.4",
"Wholesale_Trade": "30.1",
"Retail_Trade": "15.7",
"Information": "10.4",
"Finance_and_insurance": "20.8",
"Real_estate_and_rental_and_leasing": "1.4",
"Professional_scientific_and_technical_services": "20.9",
"Other_Industries": "72.0"
},
{
"Region": "Indiana",
"All_Industries_Total": "152.7",
"Total_Manufacturing": "97.9",
"Wholesale_Trade": "13.3",
"Retail_Trade": "6.1",
"Information": "5.8",
"Finance_and_insurance": "1.5",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "2.1",
"Other_Industries": "25.8"
},
{
"Region": "Michigan",
"All_Industries_Total": "187.6",
"Total_Manufacturing": "115.8",
"Wholesale_Trade": "13.8",
"Retail_Trade": "5.1",
"Information": "5.3",
"Finance_and_insurance": "4.7",
"Real_estate_and_rental_and_leasing": "0.3",
"Professional_scientific_and_technical_services": "8.6",
"Other_Industries": "34.1"
},
{
"Region": "Ohio",
"All_Industries_Total": "224.0",
"Total_Manufacturing": "123.6",
"Wholesale_Trade": "14.4",
"Retail_Trade": "16.5",
"Information": "6.0",
"Finance_and_insurance": "5.9",
"Real_estate_and_rental_and_leasing": "0.6",
"Professional_scientific_and_technical_services": "9.3",
"Other_Industries": "47.7"
},
{
"Region": "Wisconsin",
"All_Industries_Total": "85.6",
"Total_Manufacturing": "41.1",
"Wholesale_Trade": "6.0",
"Retail_Trade": "3.5",
"Information": "2.3",
"Finance_and_insurance": "7.5",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "1.4",
"Other_Industries": "23.6"
},
{
"Region": "Iowa",
"All_Industries_Total": "51.2",
"Total_Manufacturing": "24.4",
"Wholesale_Trade": "2.8",
"Retail_Trade": "1.3",
"Information": "2.9",
"Finance_and_insurance": "7.9",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "1.0",
"Other_Industries": "10.9"
},
{
"Region": "Kansas",
"All_Industries_Total": "58.4",
"Total_Manufacturing": "31.3",
"Wholesale_Trade": "7.2",
"Retail_Trade": "1.7",
"Information": "2.8",
"Finance_and_insurance": "2.3",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "1.3",
"Other_Industries": "11.5"
},
{
"Region": "Minnesota",
"All_Industries_Total": "97.9",
"Total_Manufacturing": "32.5",
"Wholesale_Trade": "9.2",
"Retail_Trade": "4.1",
"Information": "13.3",
"Finance_and_insurance": "6.8",
"Real_estate_and_rental_and_leasing": "0.7",
"Professional_scientific_and_technical_services": "4.8",
"Other_Industries": "26.4"
},
{
"Region": "Missouri",
"All_Industries_Total": "89.6",
"Total_Manufacturing": "47.3",
"Wholesale_Trade": "6.5",
"Retail_Trade": "3.8",
"Information": "3.0",
"Finance_and_insurance": "2.5",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "3.7",
"Other_Industries": "22.7"
},
{
"Region": "Nebraska",
"All_Industries_Total": "27.0",
"Total_Manufacturing": "15.3",
"Wholesale_Trade": "1.3",
"Retail_Trade": "0.8",
"Information": "0.3",
"Finance_and_insurance": "2.6",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.7",
"Other_Industries": "6.0"
},
{
"Region": "North Dakota",
"All_Industries_Total": "15.3",
"Total_Manufacturing": "7.1",
"Wholesale_Trade": "1.0",
"Retail_Trade": "0.2",
"Information": "0.1",
"Finance_and_insurance": "0.7",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.2",
"Other_Industries": "5.9"
},
{
"Region": "South Dakota",
"All_Industries_Total": "9.6",
"Total_Manufacturing": "5.0",
"Wholesale_Trade": "0.6",
"Retail_Trade": "0.1",
"Information": "A",
"Finance_and_insurance": "0.7",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.2",
"Other_Industries": "H"
},
{
"Region": "Alabama",
"All_Industries_Total": "86.4",
"Total_Manufacturing": "51.4",
"Wholesale_Trade": "9.0",
"Retail_Trade": "2.0",
"Information": "1.7",
"Finance_and_insurance": "H",
"Real_estate_and_rental_and_leasing": "0.4",
"Professional_scientific_and_technical_services": "3.6",
"Other_Industries": "J"
},
{
"Region": "Arkansas",
"All_Industries_Total": "41.5",
"Total_Manufacturing": "28.5",
"Wholesale_Trade": "2.1",
"Retail_Trade": "0.7",
"Information": "0.6",
"Finance_and_insurance": "0.8",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "1.5",
"Other_Industries": "7.5"
},
{
"Region": "Florida",
"All_Industries_Total": "245.8",
"Total_Manufacturing": "58.6",
"Wholesale_Trade": "20.5",
"Retail_Trade": "27.7",
"Information": "12.5",
"Finance_and_insurance": "18.4",
"Real_estate_and_rental_and_leasing": "10.4",
"Professional_scientific_and_technical_services": "8.5",
"Other_Industries": "89.3"
},
{
"Region": "Georgia",
"All_Industries_Total": "196.3",
"Total_Manufacturing": "75.5",
"Wholesale_Trade": "31.0",
"Retail_Trade": "11.3",
"Information": "7.6",
"Finance_and_insurance": "5.5",
"Real_estate_and_rental_and_leasing": "2.3",
"Professional_scientific_and_technical_services": "10.4",
"Other_Industries": "52.7"
},
{
"Region": "Kentucky",
"All_Industries_Total": "95.4",
"Total_Manufacturing": "53.9",
"Wholesale_Trade": "15.8",
"Retail_Trade": "2.7",
"Information": "2.4",
"Finance_and_insurance": "1.5",
"Real_estate_and_rental_and_leasing": "0.3",
"Professional_scientific_and_technical_services": "1.7",
"Other_Industries": "17.2"
},
{
"Region": "Louisiana",
"All_Industries_Total": "58.3",
"Total_Manufacturing": "19.3",
"Wholesale_Trade": "3.9",
"Retail_Trade": "2.6",
"Information": "0.4",
"Finance_and_insurance": "0.5",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "5.5",
"Other_Industries": "26.0"
},
{
"Region": "Mississippi",
"All_Industries_Total": "34.1",
"Total_Manufacturing": "13.3",
"Wholesale_Trade": "8.1",
"Retail_Trade": "0.7",
"Information": "0.2",
"Finance_and_insurance": "0.3",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "1.0",
"Other_Industries": "10.6"
},
{
"Region": "North Carolina",
"All_Industries_Total": "203.4",
"Total_Manufacturing": "99.2",
"Wholesale_Trade": "14.6",
"Retail_Trade": "38.0",
"Information": "3.0",
"Finance_and_insurance": "4.7",
"Real_estate_and_rental_and_leasing": "0.6",
"Professional_scientific_and_technical_services": "5.0",
"Other_Industries": "38.2"
},
{
"Region": "South Carolina",
"All_Industries_Total": "115.9",
"Total_Manufacturing": "65.6",
"Wholesale_Trade": "10.9",
"Retail_Trade": "9.4",
"Information": "1.6",
"Finance_and_insurance": "2.2",
"Real_estate_and_rental_and_leasing": "0.6",
"Professional_scientific_and_technical_services": "3.9",
"Other_Industries": "21.8"
},
{
"Region": "Tennessee",
"All_Industries_Total": "125.7",
"Total_Manufacturing": "62.2",
"Wholesale_Trade": "18.8",
"Retail_Trade": "5.6",
"Information": "3.0",
"Finance_and_insurance": "2.5",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "3.4",
"Other_Industries": "29.9"
},
{
"Region": "Virginia:",
"All_Industries_Total": "154.4",
"Total_Manufacturing": "44.5",
"Wholesale_Trade": "15.4",
"Retail_Trade": "37.4",
"Information": "5.3",
"Finance_and_insurance": "2.5",
"Real_estate_and_rental_and_leasing": "0.9",
"Professional_scientific_and_technical_services": "16.1",
"Other_Industries": "32.3"
},
{
"Region": "West Virginia",
"All_Industries_Total": "29.3",
"Total_Manufacturing": "14.4",
"Wholesale_Trade": "2.3",
"Retail_Trade": "2.7",
"Information": "0.1",
"Finance_and_insurance": "0.1",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.5",
"Other_Industries": "9.2"
},
{
"Region": "Arizona",
"All_Industries_Total": "83.0",
"Total_Manufacturing": "23.2",
"Wholesale_Trade": "8.0",
"Retail_Trade": "10.2",
"Information": "2.4",
"Finance_and_insurance": "4.3",
"Real_estate_and_rental_and_leasing": "1.1",
"Professional_scientific_and_technical_services": "3.0",
"Other_Industries": "30.7"
},
{
"Region": "New Mexico",
"All_Industries_Total": "20.2",
"Total_Manufacturing": "6.7",
"Wholesale_Trade": "1.4",
"Retail_Trade": "1.1",
"Information": "1.9",
"Finance_and_insurance": "0.5",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "G",
"Other_Industries": "I"
},
{
"Region": "Oklahoma",
"All_Industries_Total": "48.2",
"Total_Manufacturing": "24.8",
"Wholesale_Trade": "2.9",
"Retail_Trade": "1.3",
"Information": "0.6",
"Finance_and_insurance": "0.7",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "1.4",
"Other_Industries": "16.5"
},
{
"Region": "Texas",
"All_Industries_Total": "476.4",
"Total_Manufacturing": "175.6",
"Wholesale_Trade": "53.3",
"Retail_Trade": "15.7",
"Information": "14.9",
"Finance_and_insurance": "18.4",
"Real_estate_and_rental_and_leasing": "7.0",
"Professional_scientific_and_technical_services": "35.3",
"Other_Industries": "156.3"
},
{
"Region": "Colorado",
"All_Industries_Total": "83.6",
"Total_Manufacturing": "30.0",
"Wholesale_Trade": "7.1",
"Retail_Trade": "4.4",
"Information": "5.8",
"Finance_and_insurance": "6.9",
"Real_estate_and_rental_and_leasing": "0.3",
"Professional_scientific_and_technical_services": "4.1",
"Other_Industries": "25.0"
},
{
"Region": "Idaho",
"All_Industries_Total": "13.9",
"Total_Manufacturing": "5.5",
"Wholesale_Trade": "0.8",
"Retail_Trade": "0.7",
"Information": "G",
"Finance_and_insurance": "0.2",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.6",
"Other_Industries": "I"
},
{
"Region": "Montana",
"All_Industries_Total": "7.2",
"Total_Manufacturing": "1.8",
"Wholesale_Trade": "0.7",
"Retail_Trade": "0.2",
"Information": "0.1",
"Finance_and_insurance": "0.5",
"Real_estate_and_rental_and_leasing": "0.1",
"Professional_scientific_and_technical_services": "0.3",
"Other_Industries": "3.4"
},
{
"Region": "Utah",
"All_Industries_Total": "35.6",
"Total_Manufacturing": "13.5",
"Wholesale_Trade": "3.0",
"Retail_Trade": "1.3",
"Information": "1.0",
"Finance_and_insurance": "1.7",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "0.8",
"Other_Industries": "14.1"
},
{
"Region": "Wyoming",
"All_Industries_Total": "9.0",
"Total_Manufacturing": "2.9",
"Wholesale_Trade": "0.2",
"Retail_Trade": "0.3",
"Information": "0.1",
"Finance_and_insurance": "0.4",
"Real_estate_and_rental_and_leasing": "(*)",
"Professional_scientific_and_technical_services": "0.4",
"Other_Industries": "4.6"
},
{
"Region": "Alaska",
"All_Industries_Total": "14.4",
"Total_Manufacturing": "5.9",
"Wholesale_Trade": "0.4",
"Retail_Trade": "1.3",
"Information": "0.1",
"Finance_and_insurance": "0.1",
"Real_estate_and_rental_and_leasing": "A",
"Professional_scientific_and_technical_services": "0.2",
"Other_Industries": "I"
},
{
"Region": "California",
"All_Industries_Total": "602.8",
"Total_Manufacturing": "182.7",
"Wholesale_Trade": "86.8",
"Retail_Trade": "49.9",
"Information": "37.8",
"Finance_and_insurance": "42.4",
"Real_estate_and_rental_and_leasing": "5.8",
"Professional_scientific_and_technical_services": "31.2",
"Other_Industries": "166.1"
},
{
"Region": "Hawaii",
"All_Industries_Total": "32.1",
"Total_Manufacturing": "3.0",
"Wholesale_Trade": "1.0",
"Retail_Trade": "5.6",
"Information": "0.4",
"Finance_and_insurance": "2.9",
"Real_estate_and_rental_and_leasing": "G",
"Professional_scientific_and_technical_services": "0.2",
"Other_Industries": "J"
},
{
"Region": "Nevada",
"All_Industries_Total": "40.0",
"Total_Manufacturing": "8.7",
"Wholesale_Trade": "2.3",
"Retail_Trade": "3.6",
"Information": "1.1",
"Finance_and_insurance": "H",
"Real_estate_and_rental_and_leasing": "1.3",
"Professional_scientific_and_technical_services": "1.3",
"Other_Industries": "J"
},
{
"Region": "Oregon",
"All_Industries_Total": "46.3",
"Total_Manufacturing": "15.8",
"Wholesale_Trade": "9.3",
"Retail_Trade": "2.6",
"Information": "2.7",
"Finance_and_insurance": "1.3",
"Real_estate_and_rental_and_leasing": "0.2",
"Professional_scientific_and_technical_services": "0.7",
"Other_Industries": "13.6"
},
{
"Region": "Washington",
"All_Industries_Total": "97.9",
"Total_Manufacturing": "33.2",
"Wholesale_Trade": "13.2",
"Retail_Trade": "4.7",
"Information": "9.4",
"Finance_and_insurance": "2.7",
"Real_estate_and_rental_and_leasing": "0.6",
"Professional_scientific_and_technical_services": "6.4",
"Other_Industries": "27.6"
},
{
"Region": "Puerto Rico",
"All_Industries_Total": "18.2",
"Total_Manufacturing": "7.3",
"Wholesale_Trade": "0.8",
"Retail_Trade": "0.6",
"Information": "0.7",
"Finance_and_insurance": "4.8",
"Real_estate_and_rental_and_leasing": "A",
"Professional_scientific_and_technical_services": "0.1",
"Other_Industries": "H"
},
{
"Region": "Other U.S. areas",
"All_Industries_Total": "17.2",
"Total_Manufacturing": "5.3",
"Wholesale_Trade": "0.1",
"Retail_Trade": "1",
"Information": "0.7",
"Finance_and_insurance": "0.4",
"Real_estate_and_rental_and_leasing": "A",
"Professional_scientific_and_technical_services": "0.2",
"Other_Industries": "I"
}
]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sector Data Analysis </title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" type="text/css" rel="stylesheet" />
<!--<link href="css/main.css" type="text/css" rel="stylesheet"/>-->
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script src="clsDataProvider.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tipsy.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css"
type="text/css" title="no title" charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
</head>
<body>
<div id="viz">
<br />
<div class="content-inner">
<div>
<h1>
Industry Sectors Data Analysis by Region</h1>
</div>
</div>
<div class="content-inner">
<div class="picker">
<label class="lblRight">
Select Sector:</label>
<div id="combo-box-cntnr">
</div>
</div>
<br />
<br />
<hr class="shadow">
<div id="chart">
</div>
<script>
bootstrap();
</script>
</body>
</html>
Raw
style.css
body{
margin:0;
padding:0;
font-family: 'Strait', Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6,div{
margin:0;
padding: 0
}
a{text-decoration: none}
<!---->
#logo{
width:10%;
height:10%;
margin-bottom:10px;
float:left;
}
#header{
height:100px;
margin: 0 auto;
width: 75%;
margin-bottom:1.5em
}
#header-inner{
color:#666;
padding:0 auto;
margin:4em 0 2em 0;
}
#title{
float:left;
margin-left:.5em;
padding-top:.5em;
}
#intro{
clear:left;
margin: 0 auto;
width: 75%;
}
#intro #slogan {
margin-bottom:1em;
}
#viz{
position:relative;
}
.content-inner{
margin:0 auto;
clear:left;
margin: 0 auto;
width: 75%;
margin-bottom: 1em;
}
.light{
color:#666;
}
.light p{
width:70%;
}
#viz .content-inner img{
width:100%;
}
hr{
clear:both
}
hr.shadow{
height:12px;
border:0;
box-shadow:inset 0 12px 12px -12px rgba(0,0,0,.5);
margin-bottom:2em;
margin-top: 1em;
}
/*from original*/
.right {
float: left;
text-align: left;
margin: -83px 429px;
display: inline;
width: 748px;
font-family: 'Strait', sans-serif;
}
li.key12 {
border-top-width: 15px;
border-top-style: solid;
font-size: .75em;
width: 20%;
}
.list-inline {
list-style: none outside none;
padding:0;
margin:0;
}
.list-inline > li {
display: inline-block;
padding-left: 0px;
padding-right: 0px;
}
.picker{
float:left;
}
.legend{
margin-top:10px;
width: 30%;
float: right;
height:50px;
clear:right
}
.right2 {
float: left;
display: inline;
font-size:.8em;
}
.left2 {
float: right;
text-align: right;
font-size:.8em;
}
div.ex {
position: relative;
margin-top: 3em;
/* right: 0; */
float: right;
width: 390px;
height: 500px;
/*background-color: rgba(255,255,255,.2);*/
/* position: fixed; */
/* margin-left: -236px; */
/* margin-top: -224px; */
/* top: 50%; */
/* left: 77%; */
/*border-left: 5px solid #DDDDDD;*/
/* border-width: 1px; */
overflow: auto;
}
.bubbleClass {
/* width: 1000px;
padding: 10px;
border: 5px solid gray;
margin: 0px;*/
/* background-color:#d9d9d9;
position:fixed;
margin-left:-150px;
margin-top:-221px;
top:50%;
left:77%;*/
position:fixed;
margin-left:-1296px;
margin-top:-221px;
top:40%;
left:77%;
}
.bubbleClass123 {
color:#78C9EC;
list-style-type: none;
}
.bubbleClass123 li{
margin-bottom:.5em;
}
.bubbleClass123 li:hover{
color:orange;
}
.UILable {
margin-left:2px;
margin-top:-17px;
top:50%;
left:77%;
font-weight: bold;
font-family: 'Strait', sans-serif;
color:#78C9EC;
font-size:30px;
list-style-type: none;
}
#tooltipforLI{
background-color: #FFFFFF;
/*border : 1px solid #999999;*/
/*border-radius: 5px;*/
padding : 10px;
position: absolute;
/*width: 200px;*/
z-index: 99999;
visibility: hidden;
opacity: 0.9;
cursor:pointer;
width:400px;
border-style:solid;
border-width:1px;
border-color:#DDDDDD;
}
#tooltipLI{
color : #000000;
font-weight: normal;
font-size : 15px;
line-height: 20px;
font-family: 'Strait', sans-serif;
}
#tooltip{
background-color: #FFFFFF;
/*border : 1px solid #999999;*/
/*border-radius: 5px;*/
padding : 10px;
position: absolute;
/*width: 200px;*/
z-index: 99999;
visibility: hidden;
opacity: 0.9;
cursor:pointer;
}
#bubbleChart{
float:left;
width:500px;
overflow: visible;
}
#bubbleChart g{
overflow:visible;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 1;
}
.axis text { font-size:10px; }
.circles { opacity: .5; }
.tipsy { font-size:11px; margin-top:-10px;}
.guide line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 0;
}
Raw
tipsy.js
// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [[email protected]]
// released under the MIT license
(function($) {
function maybeCall(thing, ctx) {
return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
}
// CAUTION the current implementation does not allow for tipsied elements to stay out of DOM (in between events)
// i.e. don't remove, store, then re-insert tipsied elements (and why would you want to do that anyway?)
var garbageCollect = (function() {
var currentInterval;
var to = null;
var tipsies = [];
function _do() {
for (var i = 0; i < tipsies.length;) {
var t = tipsies[i];
// FIXME? the 2nd (non-paranoid) check is from the link below, it should be replaced if a better way is found
// http://stackoverflow.com/questions/4040715/check-if-cached-jquery-object-is-still-in-dom
if (t.options.gcInterval === 0 || t.$element.closest('body').length === 0) {
t.hoverState = 'out';
t.hide();
tipsies.splice(i,1);
} else {
i++;
}
}
}
function _loop() {
to = setTimeout(function() { _do(); _loop(); }, currentInterval);
}
return function(t) {
if (t.options.gcInterval === 0) return;
if (to && t.options.gcInterval < currentInterval) {
clearTimeout(to); to = null;
currentInterval = t.options.gcInterval;
}
tipsies.push(t);
if (!to) _loop();
};
})();
function Tipsy(element, options) {
this.$element = $(element);
this.options = options;
this.enabled = true;
this.fixTitle();
garbageCollect(this);
}
Tipsy.prototype = {
show: function() {
var title = this.getTitle();
if (title && this.enabled) {
var $tip = this.tip();
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth || 0,
height: this.$element[0].offsetHeight || 0
});
if (typeof this.$element[0].nearestViewportElement == 'object') {
// SVG
var el = this.$element[0];
var rect = el.getBoundingClientRect();
pos.width = rect.width;
pos.height = rect.height;
}
var actualWidth = $tip[0].offsetWidth,
actualHeight = $tip[0].offsetHeight,
gravity = maybeCall(this.options.gravity, this.$element[0]);
var tp;
switch (gravity.charAt(0)) {
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 's':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'e':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
break;
case 'w':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
break;
}
if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left + pos.width / 2 - 15;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
$tip.css(tp).addClass('tipsy-' + gravity);
$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
if (this.options.className) {
$tip.addClass(maybeCall(this.options.className, this.$element[0]));
}
if (this.options.fade) {
$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
var t = this;
var set_hovered = function(set_hover){
return function(){
t.$tip.stop();
t.tipHovered = set_hover;
if (!set_hover){
if (t.options.delayOut === 0 && t.options.trigger != 'manual') {
t.hide();
} else {
setTimeout(function() {
if (t.hoverState == 'out') t.hide(); }, t.options.delayOut);
}
}
};
};
$tip.hover(set_hovered(true), set_hovered(false));
}
},
hide: function() {
if (this.options.fade) {
this.tip().stop().fadeOut(function() { $(this).remove(); });
} else {
this.tip().remove();
}
},
fixTitle: function() {
var $e = this.$element;
if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
$e.attr('original-title', $e.attr('title') || '').removeAttr('title');
}
if (typeof $e.context.nearestViewportElement == 'object'){
if ($e.children('title').length){
$e.append('<original-title>' + ($e.children('title').text() || '') + '</original-title>')
.children('title').remove();
}
}
},
getTitle: function() {
var title, $e = this.$element, o = this.options;
this.fixTitle();
if (typeof o.title == 'string') {
var title_name = o.title == 'title' ? 'original-title' : o.title;
if ($e.children(title_name).length){
title = $e.children(title_name).html();
} else{
title = $e.attr(title_name);
if (typeof title == 'undefined') title = ''
}
} else if (typeof o.title == 'function') {
title = o.title.call($e[0]);
}
title = ('' + title).replace(/(^\s*|\s*$)/, "");
return title || o.fallback;
},
tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
}
return this.$tip;
},
validate: function() {
if (!this.$element[0].parentNode) {
this.hide();
this.$element = null;
this.options = null;
}
},
enable: function() { this.enabled = true; },
disable: function() { this.enabled = false; },
toggleEnabled: function() { this.enabled = !this.enabled; }
};
$.fn.tipsy = function(options) {
if (options === true) {
return this.data('tipsy');
} else if (typeof options == 'string') {
$(this).each(function(i,el){
if ($(el).data('tipsy')) {
tipsy = $(el).data('tipsy')
tipsy[options]();
}
});
return this;
}
options = $.extend({}, $.fn.tipsy.defaults, options);
if (options.hoverlock && options.delayOut === 0) {
options.delayOut = 100;
}
function get(ele) {
var tipsy = $.data(ele, 'tipsy');
if (!tipsy) {
tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
$.data(ele, 'tipsy', tipsy);
}
return tipsy;
}
function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn === 0) {
tipsy.show();
} else {
tipsy.fixTitle();
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
}
function leave() {
var tipsy = get(this);
tipsy.hoverState = 'out';
if (options.delayOut === 0) {
tipsy.hide();
} else {
var to = function() {
if (!tipsy.tipHovered || !options.hoverlock){
if (tipsy.hoverState == 'out') tipsy.hide();
}
};
setTimeout(to, options.delayOut);
}
}
if (!options.live) this.each(function() { get(this); });
if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}
return this;
};
$.fn.tipsy.defaults = {
className: null,
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gcInterval: 0,
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover',
hoverlock: false
};
// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};
$.fn.tipsy.autoNS = function() {
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};
$.fn.tipsy.autoWE = function() {
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};
/**
* yields a closure of the supplied parameters, producing a function that takes
* no arguments and is suitable for use as an autogravity function like so:
*
* @param margin (int) - distance from the viewable region edge that an
* element should be before setting its tooltip's gravity to be away
* from that edge.
* @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
* if there are no viewable region edges effecting the tooltip's
* gravity. It will try to vary from this minimally, for example,
* if 'sw' is preferred and an element is near the right viewable
* region edge, but not the top edge, it will set the gravity for
* that element's tooltip to be 'se', preserving the southern
* component.
*/
$.fn.tipsy.autoBounds = function(margin, prefer) {
return function() {
var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
boundTop = $(document).scrollTop() + margin,
boundLeft = $(document).scrollLeft() + margin,
$this = $(this);
if ($this.offset().top < boundTop) dir.ns = 'n';
if ($this.offset().left < boundLeft) dir.ew = 'w';
if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
return dir.ns + (dir.ew ? dir.ew : '');
};
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment