.hostTest

test

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");
    }


}

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;
}

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"
}
]

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>

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;
	}
	

tipsy.js

// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// 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);