All examples By author By category About

juzkev

Full window Github gist

Bar Chart and Line Chart on Same D3 Plot

New Mexico Oil & Gas Employment

This visualization shows employment for the oil, gas & mining sector for New Mexico state and counties in 2010 through 2014 including a Y/Y change (bar chart). In addition, the 2014 data shown in the pie chart compares sector employment to total employment in the geography. The goal of this visualization is for the viewer to answer their own questions and draw their own conclusions. Standards of good graph making (as presented by Tufte) have been followed in an attempt to not influence viewers opinions.
What's nice about this code is it is driven off of CSV files. By changing the names of the CSV files in the index.html file, I can change the plots entirely. The math behind it makes the charts adapt given that you zero fill missing geographies. This was a fun plot to make. Not only is their an interactive pie chart showing employment in the Oil & Gas sector, but the graph has 2 different scales going on. Ultimately because of how d3 works, scaling to this to include many more secors or geographies is easy. I created this as a set, one for each 2 digit NAICS industry code.
The data behind this chart is from the quarterly census of employment and wages, a Bureau of Labor Statistics program. I created this for work on a website, BBER.UNM.EDU, check out this and many more over there.

forked from ndobie's block: Bar Chart and Line Chart on Same D3 Plot

<!DOCTYPE html>
<html>
<head>
    <title>New Mexico Employment in NAICS Sector 21</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        @import url('//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic');

body {
            font-family: 'Lato', Arial, Helvetica, sans-serif;
            font-size: 16px;
            position: relative;
        }

h3 {
            margin-left: 4px;
        }

/*         .arc text {
            text-anchor: middle;
        }

.arc path {
            stroke: #fff;
        }

#pie-chart {
            background-color: #ffffff;
            height: 370px;
            text-shadow: none;
            margin-right: 0;
        }

#pie-chart .total {
                font-size: 18px;
                font-weight: bold;
            }

#pie-chart .units {
                fill: gray;
                font-size: 12px;
            }

#pie-chart .label {
                fill: #CCC;
                font-size: 12px;
                font-weight: bold;
            }

#pie-chart .value {
                font-size: 18px;
                font-weight: bold;
            } */

.toolTip {
            position: absolute;
            display: none;
            width: auto;
            height: auto;
            background: none repeat scroll 0 0 white;
            border: 0 none;
            border-radius: 8px 8px 8px 8px;
            box-shadow: -3px 3px 15px #888888;
            color: black;
            font: 12px sans-serif;
            padding: 5px;
            text-align: center;
        }

.bar text {
            font-size: 1em;
            font-weight: 300;
            cursor: default;
        }

.axis line {
            stroke: #AAA;
            stroke-width: 1;
        }

line.median {
            stroke: #777;
            stroke-width: 1;
        }

.grid .tick {
            stroke: lightgrey;
            opacity: 0.7;
        }

.grid path {
            stroke-width: 0;
        }

.bar {
            fill: #74c476;
        }

.bar:hover {
                fill: #a1d99b;
            }

.axisR {
            font: 0.625em sans-serif;
        }

.axisL {
            font: 0.625em sans-serif;
        }

.axis {
            font: 0.625em sans-serif;
        }

.axisR path,
        .axisR line,
        .axisL path,
        .axisL line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

.x.axis path {
            display: none;
        }

.chartLine {
            fill: red;
            stroke: red;
        }

.chartLineText {
            font: 0.625em sans-serif;
            pointer-events: none;
        }

.barText {
            font: 0.7em sans-serif;
            font-weight: 500;
            color: lightgray;
            visibility: hidden;
        }

a {
            color: dimgray;
        }

.source {
            font-size: 0.625em;
            color: grey;
            line-height: 80%;
        }

.prepaired {
            font-size: 0.625em;
            color: grey;
            line-height: 80%;
        }

.update {
            font-size: 0.625em;
            color: grey;
            line-height: 80%;
        }

.notes {
            font-size: 0.625em;
            color: grey;
            line-height: 80%;
        }

.def {
            font-size: .75em;
            color: grey;
        }
    </style>
</head>
<body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <form>
        <span style="color:dimgrey" id="title">Oil & Gas + Mining Employment: </span><select id="geo" style="width:200px;">
            <option value='00'>New Mexico</option>
            <option value='01'>Bernalillo</option>
            <option value='03'>Catron</option>
            <option value='05'>Chaves</option>
            <option value='06'>Cibola</option>
            <option value='07'>Colfax</option>
            <option disabled value='09'>Curry</option>
            <option disabled value='11'>De Baca</option>
            <option value='13'>Do&ntilde;a Ana</option>
            <option value='15'>Eddy</option>
            <option value='17'>Grant</option>
            <option disabled value='19'>Guadalupe</option>
            <option disabled value='21'>Harding</option>
            <option disabled value='23'>Hidalgo</option>
            <option value='25'>Lea</option>
            <option value='27'>Lincoln</option>
            <option disabled value='28'>Los Alamos</option>
            <option value='29'>Luna</option>
            <option value='31'>Mckinley</option>
            <option disabled value='33'>Mora</option>
            <option value='35'>Otero</option>
            <option disabled value='37'>Quay</option>
            <option value='39'>Rio Arriba</option>
            <option disabled value='41'>Roosevelt</option>
            <option value='43'>Sandoval</option>
            <option value='45'>San Juan</option>
            <option value='47'>San Miguel</option>
            <option value='49'>Santa Fe</option>
            <option value='51'>Sierra</option>
            <option disabled value='53'>Socorro</option>
            <option value='55'>Taos</option>
            <option disabled value='57'>Torrance</option>
            <option disabled value='59'>Union</option>
            <option value='61'>Valencia</option>
        </select>
    </form>
    <div id="wrap" style="max-width:960px;">
        <div id="pie-chart" style="float: left; width:510px;margin:0;"></div>
        <div id="graph" style="float: left; width:450px;margin:0;"></div>
        <span class="prepaired" style='color:grey;font-size:0.625em;'>Prepared by: Nathan Dobie for UNM Bureau of Business and Economic Research</span>
        <br />
        <span id='source' style='display:block;color:grey;font-size:0.625em;'>Source: Annual 2014 Quarterly Census of Employment and Wages, New Mexico Department of Workforce Solutions. Numbers reflect only persons covered under unemployment insurance, not all employment is covered under unemployment insurance law. Change y/y calculated from data.</span>
    </div>
    <script type="text/javascript">

d3.select(self.frameElement).attr("height", "480px")

var div = d3.select("body").append("div").attr("class", "toolTip");

var w = 800;
        var h = 390;
        var r = 130;
        var ir = 78;
        var textOffset = 24;
        var tweenDuration = 1050;

//OBJECTS TO BE POPULATED WITH DATA LATER
        var lines, valueLabels, nameLabels;
        var pieData = [];
        var oldPieData = [];
        var filteredPieData = [];

//         //D3 helper function to populate pie slice parameters from array data
//         var donut = d3.layout.pie().value(function (d) {
//             return d.emp;
//         }).sort(null);

//         ////D3 helper function to create colors from an ordinal scale
//         //var color = d3.scale.category20c();
//         var color = d3.scale.ordinal()
//             .range(['#6baed6', '#aaa']);

//         //D3 helper function to draw arcs, populates parameter "d" in path object
//         var arc = d3.svg.arc()
//           .startAngle(function (d) { return d.startAngle; })
//           .endAngle(function (d) { return d.endAngle; })
//           .innerRadius(ir)
//           .outerRadius(r);

function formatMoney(num) {
            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
        };

//         var vis = d3.select("#pie-chart").append("svg:svg")
//           .attr("width", w)
//           .attr("height", h);

//         //GROUP FOR ARCS/PATHS
//         var arc_group = vis.append("svg:g")
//           .attr("class", "arc")
//           .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

//         //GROUP FOR LABELS
//         var label_group = vis.append("svg:g")
//           .attr("class", "label_group")
//           .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

//         //GROUP FOR CENTER TEXT
//         var center_group = vis.append("svg:g")
//           .attr("class", "center_group")
//           .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

//         //WHITE CIRCLE BEHIND LABELS
//         var whiteCircle = center_group.append("svg:circle")
//           .attr("fill", "white")
//           .attr("r", ir);

//         function type(d) {
//             d.wage = +d.wage;
//             d.emp = +d.emp;
//             d.gdp = +d.gdp;
//             return d;
//         };
/*
        d3.csv("sector_21.csv", type, function (error, dataI) {
            d3.selectAll("#geo")
               .on("change", update);

function update() {
                dataI.value = dataI.emp

var I = document.getElementById('geo').selectedIndex
                    , select = document.getElementById('geo')[I].value;

data = dataI.filter(function (d) { return d.area == select });

oldPieData = filteredPieData;
                pieData = donut(data);

var sliceProportion = 0; //size of this slice
                filteredPieData = pieData.filter(filterData);

function filterData(element, index, array) {
                    element.emp = data[index].emp;
                    element.wage = data[index].wage;
                    element.ind = data[index].ind;
                    element.label = data[index].label;
                    sliceProportion += element.emp;
                    return (element.wage >= 0)
                }

//DRAW ARC PATHS
                paths = arc_group.selectAll("path").data(filteredPieData);
                paths.enter().append("svg:path")
                  .attr("stroke", "white")
                  .attr("stroke-width", 0.5)
                  .attr("fill", function (d, i) { return color(i); })
                  .transition()
                    .duration(tweenDuration)
                    .attrTween("d", pieTween);
                paths
                  .transition()
                    .duration(tweenDuration)
                    .attrTween("d", pieTween);
                paths.exit()
                  .transition()
                    .duration(tweenDuration)
                    .attrTween("d", removePieTween)
                  .remove();

paths.on("mousemove", function (d) {
                    div.style("left", d3.event.pageX + 10 + "px");
                    div.style("top", d3.event.pageY - 25 + "px");
                    div.style("display", "inline-block");
                    div.html(d.label + ': ' + (d.ind) + "<br>" + 'Covered Employment: ' + (formatMoney(d.emp)));
                });

paths.on("mouseout", function (d) {
                    div.style("display", "none");
                });

//DRAW TICK MARK LINES FOR LABELS
                lines = label_group.selectAll("line").data(filteredPieData);
                lines.enter().append("svg:line")
                  .attr("x1", 0)
                  .attr("x2", 0)
                  .attr("y1", -r - 3)
                  .attr("y2", -r - 15)
                  .attr("stroke", "gray")
                  .attr("transform", function (d) {
                      return "rotate(" + (d.startAngle + d.endAngle) / 2 * (180 / Math.PI) + ")";
                  });
                lines.transition()
                  .duration(tweenDuration)
                  .attr("transform", function (d) {
                      return "rotate(" + (d.startAngle + d.endAngle) / 2 * (180 / Math.PI) + ")";
                  });
                lines.exit().remove();

//DRAW LABELS WITH PERCENTAGE VALUES
                valueLabels = label_group.selectAll("text.value").data(filteredPieData)
                  .attr("dy", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 > Math.PI / 2 && (d.startAngle + d.endAngle) / 2 < Math.PI * 1.5) {
                          return 5;
                      } else {
                          return -7;
                      }
                  })
                  .attr("text-anchor", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
                          return "beginning";
                      } else {
                          return "end";
                      }
                  })
                  .text(function (d) {
                      var percentage = (d.value / sliceProportion) * 100;
                      return percentage.toFixed(1) + "%";
                  });

valueLabels.enter().append("svg:text")
                  .attr("class", "value")
                  .attr("transform", function (d) {
                      return "translate(" + Math.cos(((d.startAngle + d.endAngle - Math.PI) / 2)) * (r + textOffset) + "," + Math.sin((d.startAngle + d.endAngle - Math.PI) / 2) * (r + textOffset) + ")";
                  })
                  .attr("dy", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 > Math.PI / 2 && (d.startAngle + d.endAngle) / 2 < Math.PI * 1.5) {
                          return 5;
                      } else {
                          return -7;
                      }
                  })
                  .attr("text-anchor", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
                          return "beginning";
                      } else {
                          return "end";
                      }
                  }).text(function (d) {
                      var percentage = (d.value / sliceProportion) * 100;
                      return percentage.toFixed(1) + "%";
                  });

valueLabels.transition().duration(tweenDuration).attrTween("transform", textTween);

valueLabels.exit().remove();

//DRAW LABELS WITH ENTITY NAMES
                nameLabels = label_group.selectAll("text.units").data(filteredPieData)
                  .attr("dy", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 > Math.PI / 2 && (d.startAngle + d.endAngle) / 2 < Math.PI * 1.5) {
                          return 17;
                      } else {
                          return 5;
                      }
                  })
                  .attr("text-anchor", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
                          return "beginning";
                      } else {
                          return "end";
                      }
                  }).text(function (d) {
                      return d.ind;
                  });

nameLabels.enter().append("svg:text")
                  .attr("class", "units")
                  .attr("transform", function (d) {
                      return "translate(" + Math.cos(((d.startAngle + d.endAngle - Math.PI) / 2)) * (r + textOffset) + "," + Math.sin((d.startAngle + d.endAngle - Math.PI) / 2) * (r + textOffset) + ")";
                  })
                  .attr("dy", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 > Math.PI / 2 && (d.startAngle + d.endAngle) / 2 < Math.PI * 1.5) {
                          return 17;
                      } else {
                          return 5;
                      }
                  })
                  .attr("text-anchor", function (d) {
                      if ((d.startAngle + d.endAngle) / 2 < Math.PI) {
                          return "beginning";
                      } else {
                          return "end";
                      }
                  }).text(function (d) {
                      return d.ind;
                  });

nameLabels.transition().duration(tweenDuration).attrTween("transform", textTween);

nameLabels.exit().remove();
                updateBars(); //Notice the bar update gets called here and later, this actually works to create the neat into animation that only occurs on page load, easier than righting a custom delay function
            }

// Interpolate the arcs in data space.
            function pieTween(d, i) {
                var s0;
                var e0;
                if (oldPieData[i]) {
                    s0 = oldPieData[i].startAngle;
                    e0 = oldPieData[i].endAngle;
                } else if (!(oldPieData[i]) && oldPieData[i - 1]) {
                    s0 = oldPieData[i - 1].endAngle;
                    e0 = oldPieData[i - 1].endAngle;
                } else if (!(oldPieData[i - 1]) && oldPieData.length > 0) {
                    s0 = oldPieData[oldPieData.length - 1].endAngle;
                    e0 = oldPieData[oldPieData.length - 1].endAngle;
                } else {
                    s0 = 0;
                    e0 = 0;
                }
                var i = d3.interpolate({ startAngle: s0, endAngle: e0 }, { startAngle: d.startAngle, endAngle: d.endAngle });
                return function (t) {
                    var b = i(t);
                    return arc(b);
                };
            }

var fn = d3.interpolateNumber(a, b);
                return function (t) {
                    var val = fn(t);
                    return "translate(" + Math.cos(val) * (r + textOffset) + "," + Math.sin(val) * (r + textOffset) + ")";
                };
            }
            update();//calls the above code to run,
        });
*/

//Start the bar graph code

var margin = { top: 10, right: 40, bottom: 20, left: 50 },
            width = 900 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .2);

var y = d3.scale.linear()
            .range([height, 0]);

var y2 = d3.scale.linear()
            .range([height, 0]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(5);

var y2Axis = d3.svg.axis()
            .scale(y2)
            .orient("right")
            .ticks(4, "%");

var svg = d3.select("#graph").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
            .x(function (d) { return x2(d.Feature); })
            .y(function (d) { return y2(d.FeatureCountAvg); });

function roundToOne(num) {//Ensures numbers always display the given number of digits after the decimal
            return +(Math.round(num + "e+1") + "e-1");
        };

updateBars();

function updateBars() {
            d3.csv("bar.csv", type, function (error, data) {
                if (error) throw error;

if (min < 1) {//sets axis automatically, but uses zero if the min would be close to 0 anyway
                    var min = 0
                };
                if (min2 >= 0) {
                    var min2 = -.01
                };
                if (max2 <= 0) {
                    var max2 = .01
                };
                //Tufte would be proud of this, if he ever saw it. The economic data
                //of y/y change in employment can take on negitive values, thus we need to
                // ensure the axis always include negitive and positive values

x.domain(data.map(function (d) { return d.Feature; }));
                y2.domain([min2, max2]);
                y.domain([min, ((d3.max(data, function (d) { return d.FeatureCount / 100; }) * 100) + (.11 * d3.mean(data, function (d) { return d.FeatureCount; })))]);
                //Sets the domain based on the average, making the max .11 times the average greater than the max value, for asthetics only essentually

if (svg.selectAll(".x.axis")[0].length < 1) {//This stuff only occurs the first time the code is looped through, not subsiquent calls
                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);

svg.append('g')
                        .attr("class", "y axisL")
                        .call(yAxis)
                      .append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", 4)
                        .attr("dy", ".71em")
                        .style("text-anchor", "end")
                        .text("Annual Avg. Employment");

svg.append("g")
                        .attr("class", "y axisR")
                        .call(y2Axis)
                        .attr("transform", "translate(" + width + ",0)")
                      .append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", -11)
                        .attr("dy", ".71em")
                        .style("text-anchor", "end")
                        .text("Y/Y Change");

svg.selectAll(".bar")
                        .data(data)
                      .enter()
                        .append("rect")
                        .attr("class", "bar")
                        .attr("x", function (d) { return x(d.Feature); })
                        .attr("width", x.rangeBand())
                        .attr("y", function (d) { return y(10e-6); })
                        .attr("height", function (d) { return y(10e-6) })
                      .transition()
                        .duration(1050)
                        .attr("y", function (d) { return y(d.FeatureCount); })
                        .attr("height", function (d) { return height - y(d.FeatureCount); });

svg.selectAll(".chartLine")
                        .data(data)
                      .enter()
                        .append("rect")
                        .attr("class", "chartLine")
                        .attr("transform", "translate(" + 20 + ",0)")
                        .attr("width", x.rangeBand() - 40)
                        .attr("x", function (d) { return x(d.Feature); })
                        .attr("y", function (d) { return d3.min(data, function (d) { return y2(d.FeatureCountAvg); }) })
                        .attr("height", function (d) { return 1 })
                      .transition()
                        .duration(1050)
                        .attr("y", function (d) { return y2(d.FeatureCountAvg); });

svg.selectAll(".chartLineText")
                        .data(data)
                      .enter()
                        .append('text')
                        .attr("class", "chartLineText")
                        .style("color", "#000")
                        .style("text-anchor", "middle")
                        .attr("transform", "translate(" + 30 + ",-2)")
                        .attr("x", function (d) { return x(d.Feature); })
                        .attr("y", function (d) { return d3.min(data, function (d) { return y2(d.FeatureCountAvg); }) })
                        .text(function (d) { return roundToOne(d.FeatureCountAvg * 100) + "%" })
                      .transition()
                        .duration(1050)
                        .attr("y", function (d) { return y2(d.FeatureCountAvg); });

svg.selectAll(".barText")
                        .data(data)
                      .enter()
                        .append("text")
                        .attr("class", "barText")
                        .attr("text-anchor", "middle")
                        .attr("transform", "translate(" + x.rangeBand() / 2 + ",-3)")
                        .attr("x", function (d) { return x(d.Feature); })
                        .text(function (d) { return formatMoney(+d.FeatureCount) })
                        .attr("y", function (d) { return y(d.FeatureCount) - 10; });

} else {//This is what is called when the code is called to update by a change in the drop downs.
                    svg.selectAll(".y.axisL").transition().duration(1500).call(yAxis);
                    svg.selectAll(".y.axisR").transition().duration(1500).call(y2Axis);

svg.selectAll(".chartLineText").
                        data(data)
                        .transition()
                        .duration(1500)
                        .attr("y", function (d) { return y2(d.FeatureCountAvg); })
                        .text(function (d) { return roundToOne(d.FeatureCountAvg * 100) + "%" });

svg.selectAll(".chartLine")
                        .data(data)
                    .transition()
                        .duration(1500)
                        .attr("y", function (d) { return y2(d.FeatureCountAvg); });

svg.selectAll(".bar")
                        .data(data)
                    .transition()
                        .duration(1500)
                        .delay(function (d) { return 100 + (d.Feature - 2010) * 100 })
                    //Notice this delay function, it allows the eye to see all of the changes in the graph without needing to run the animation again,
                    //but it's suttle enough it's hard to notice, but it really makes a difference, your mind is fast but only holds so many things in
                        //short term memory, this delay helps avoid mental hurt, but also by limiting the years to 4 makes it much better
                        // Also the green bars draw in the focus while changing more than the small red lines, this is to mentally make it easier again. (I read to many theory books on this stuff, sorry those that are color blind)
                        .attr("y", function (d) { return y(d.FeatureCount); })
                        .attr("height", function (d) { return height - y(d.FeatureCount); });

svg.selectAll(".barText")
                        .data(data)
                        .transition()
                        .duration(500)
                        .attr("y", function (d) { return y(d.FeatureCount); })
                        .text(function (d) { return formatMoney(+d.FeatureCount) });
                };

d3.selectAll(".bar")
                .on("mouseover", function (d) {
                    d3.selectAll(".barText").transition()
                        .duration(500)
                        .delay(80)
                        //This makes the text lables mostly prevent overlap, it's not perfect, but solves more cases than it breaks, and the values are generally always visable
                        .attr("y", function (d) { if (Math.abs(y2(d.FeatureCountAvg) - y(d.FeatureCount)) < 10) { if (y(d.FeatureCount) - 10 - (y2(d.FeatureCountAvg)) >= 2) { return y(d.FeatureCount) - 10 } else { return y(d.FeatureCount) + 15 } } else { return y(d.FeatureCount) } })
                        .style("visibility", "visible");
                })
                .on("mouseout", function (d) {
                    d3.selectAll(".barText").transition()
                        .duration(500)
                        .delay(150)
                        .attr("y", function (d) { return y(d.FeatureCount) - 10; })
                        .style("visibility", "hidden");
                })
            });

function type(d) {
//                 d.Feature = d.Feature;
                d.FeatureCountAvg = +d.FeatureCountAvg / 100;
                d.FeatureCount = +d.FeatureCount;
                return d;
            }
        };
    </script>
</body>
</html>

Modified http://code.jquery.com/jquery-1.9.1.js to a secure url

Modified http://code.jquery.com/ui/1.10.3/jquery-ui.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-1.9.1.js

https://code.jquery.com/ui/1.10.3/jquery-ui.js