Bootstrap + D3

<html>

<head>
  <title>My Exo-cortex Bootstrap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<div class="container">
  <h2>Dashing D3-Graphs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#scatterplot">scatterplot</a></li>
    <li><a data-toggle="tab" href="#histogram">Histogram</a></li>
    <li><a data-toggle="tab" href="#barchart">Barchart</a></li>
    <li><a data-toggle="tab" href="#barchartNegativeVal">barchartNegativeVal</a></li>  
    <li><a data-toggle="tab" href="#AreaChart">AreaChart</a></li>   
    <li><a data-toggle="tab" href="#GroupedBar">GroupedBar</a></li>
    <li><a data-toggle="tab" href="#StackedGroupedBar">StackedChart</a></li>
    <li><a data-toggle="tab" href="#MultiSeriesLine">MultiSeriesLine</a></li>
    <li><a data-toggle="tab" href="#SVG_Transition">SVG Transition</a></li>  
    <li><a data-toggle="tab" href="#Transition_Events">Transition Events</a></li> 
    <li><a data-toggle="tab" href="#D3_HTML_Forms">D3 and HTML Forms</a></li>
    <li><a data-toggle="tab" href="#Dynamic_Data">Dynamic Data</a></li>
    
      
    <li><a data-toggle="tab" href="#StackLayout">StackLayout</a></li>
      
        
    <li><a data-toggle="tab" href="#SVG">SVG</a></li>   
    <li><a data-toggle="tab" href="#OUTROS">OUTROS</a></li>   
      
        
      
  </ul>

<div class="tab-content">
    
    <div id="scatterplot" class="tab-pane fade in active">
    <h3>HOME</h3>
        <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
    
    <div id="scatterplot_graf1"  role="main">
     </div>    
    <div id="scatterplotChart_tooltip"  role="main">
	<h4>Graph with tooltip</h4>
     </div>        
        
    </div>
    <div id="histogram" class="tab-pane fade">
      <div id="histogram_graf1"  role="main">  </div>
        
        
      
      </div>
    <div id="barchart" class="tab-pane fade">
      
      
        <div id="barchart_graf1"  role="main">  </div>
     
       </div>
    <div id="barchartNegativeVal" class="tab-pane fade">
        <div id="barchartNegativeValues"  role="main">
        </div>
     </div>  
    <div id="AreaChart" class="tab-pane fade">
        <div id="AreaChart_graf"  role="main">
        </div>
     </div>    
    <div id="GroupedBar" class="tab-pane fade">
        <div id="GroupedBarChart"  role="main">
        </div>
     </div>    
    <div id="StackedGroupedBar" class="tab-pane fade">
        <div id="StackedGroupedBarChart"  role="main">
        </div>
     </div>  
    <div id="MultiSeriesLine" class="tab-pane fade">
        <div id="MultiSeriesLineChart"  role="main">
        </div>
     </div>    
    <div id="SVG_Transition" class="tab-pane fade">
        <div class="container">
        <button type="button"  onclick=SVG_TransitionAnimations() class="btn btn-info" value="Submit Button">
            Rectangle Animation Example 1</button>
        <button type="button"  onclick=SVG_RectanglesAnimation() class="btn btn-info" value="Submit Button">
            Two Rectangle Animation </button>
            
            
        </div>
     </div>    
    <div id="Transition_Events" class="tab-pane fade">
       <div class="container">
        <div id="d3_event1"  role="main">
          <button type="button"  onclick=d3_events() class="btn btn-info" value="Submit Button">
            Event 1</button>
 
            <button type="button"  onclick=crazy_balls() class="btn btn-info" value="Submit Button">
            Crazy Balls</button>
 
            
        </div> 
       </div> 
    </div>
    <div id="D3_HTML_Forms" class="tab-pane fade">
        <div  class="container">
          <form>
              <label>
                  <input type="radio" name="radio_b" value="width" />
                  Width
              </label>
              <br>
              <label>
                  <input type="radio" name="radio_b" value="height" />
                  Height
              </label>
          </form>
           <div id="visualization">
           </div> 
            
        </div>    
    </div>    
      
    <div id="StackLayout" class="tab-pane fade">
        <div id="StackLayout_graf"  role="main">
            
            
        </div>
    
      
    </div>
      
    <div id="Dynamic_Data" class="tab-pane fade">
        <div id="Dynamic_Data_graf"  role="main">
            
            
        </div>
    
      
    </div>  
      
      
      
      
      
        
  </div>

</div>

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
    
    var svg = d3.select("#StackedGroupedBarChart").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 + ")");

d3.csv("data_stackedbarchart.csv",function(erro, data){
 color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
  
    
    data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.ages[d.ages.length - 1].y1;
});
    
    data.sort(function(a, b) { return b.total - a.total; });

x.domain(data.map(function(d) { return d.State; }));
    y.domain([0, d3.max(data, function(d) { return d.total; })]);
    
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Population");
    
    
    var state = svg.selectAll(".state")
    .data(data)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
    
    
    state.selectAll("rect")
    .data(function(d) { return d.ages; })
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .style("fill", function(d) { return color(d.name); });
    
    
    var legend = svg.selectAll(".legend")
    .data(color.domain().slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
    
    legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
    
    legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });
    
});

}    
 function MultiSeriesLineChart(){
     
     var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
     
     var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);
     
     var y = d3.scale.linear()
    .range([height, 0]);
     
     
     var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
     
     var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
     
     
     var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
     
     
     
     var svg = d3.select("#MultiSeriesLineChart").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 + ")");

d3.tsv("data_multiseries.tsv",function(error, data){
         
      color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
   
         data.forEach(function(d) {
            d.date = parseDate(d.date);
         })
         
         var cities = color.domain().map(function(name) {
         return {
         name: name,
         values: data.map(function(d) {
            return {date: d.date, temperature: +d[name]};
                })
              };
            });
         
         
        x.domain(d3.extent(data, function(d) { return d.date; }));
         y.domain([
            d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
            d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
                ]);
         
         
        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Temperature (ºF)");
         
        var city = svg.selectAll(".city")
        .data(cities)
        .enter().append("g")
        .attr("class", "city"); 
         
         city.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke", function(d) { return color(d.name); })
         .style("fill","none");
         
         city.append("text")
        .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; })
         .attr("class","city_text");

}) //end d3.tsv
     
     
     
 }    
 function scatterplot_tooltips() {
    
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
var svg = d3.select("#scatterplotChart_tooltip").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 + ")");
     
d3.tsv("data_scatterplo_tooltip.tsv", function(error, data) {
  if (error) throw error;
  data.forEach(function(d) {
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
  });
  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)")
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot2")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.sepalWidth); })
      .attr("cy", function(d) { return y(d.sepalLength); })
      .style("fill", function(d) { return color(d.species); })
	.append("title")
        .text("Value vs Date Graph");
    
    
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
    
    var div = d3.select("#scatterplotChart_tooltip").append("div")   
    .style("position", "absolute")
    .style("text-align", "center")
    .style("width", "240px")
    .style("height", "2.5em")
    .style("font", "1.5em sans-serif")
    .style("color","yellow")
    .style("background", "black")
    .style("border-radius", "8px")
    .style("border", "solid 1px green")
    .style("opacity", 0);
    
    d3.selectAll(".dot2")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);
    
    
    function mouseover(d) {
    div.html("Sepal Width: " + d.sepalWidth + '' + "Sepal Length: " + d.sepalLength)
    .style("left", (d3.event.pageX + 9) + "px")
    .style("top",  (d3.event.pageY - 43) + "px")
    .style("opacity", 1);
}

var rect1Selection = svgSelection.append("rect").attr("class", "rectan");

var rect2Selection = svgSelection.append("rect").attr("class", "rectan");

rect1Selection.attr("x","5").attr("y", "5").attr("width", "20").attr("height", "20").style("fill","red");

rect2Selection.attr("x","25").attr("y","25").attr("width","50").attr("height","100").style("fill", "green");
    
d3.selectAll(".rectan").transition().attr("y", "105").delay(function(d,i){
    if (i === 0) {
        return 2000;
    } else {
        return 4000;
    };
});

d3.selectAll(".rectan")
    .transition()
        .attr("y", "5")
        .duration(function(d,i){
            if (i === 0) {
                return 5000;
            } else {
                return 2000;
            };
        });

}    
 
 function d3_events(){

d3.select("#Transition_Events").append("svg").append("rect").attr("class", "rectan_event");

d3.select(".rectan_event")
    .attr("x", "25")
    .attr("y", "25")
    .attr("width", "50")
    .attr("height", "100");

d3.select(".rectan_event").transition().attr("height","300").duration(3000);     
     
     
     
     
 }   
    
 function crazy_balls(){
      var circleData = [ {"cx": "25", "cy": "25", "r": "5"},
                   {"cx": "50", "cy": "50", "r": "5"},
                   {"cx": "75", "cy": "75", "r": "5"}];  
      d3.select("#Transition_Events").append("svg").attr("class","svg1");   
        
        d3.select(".svg1")
        .selectAll(".crazy_ball")
        .data(circleData)
        .enter()
        .append("circle").attr("class", "crazy_ball")
        
        
       d3.selectAll(".crazy_ball")
    .attr("cx", function(d, i) { return (i * 25) + 25; })
    .attr("cy", function(d, i) { return (i * 25) + 25; })
    .attr("r",  function(d, i) { return 5 });
 
       d3.selectAll(".crazy_ball").on("mouseover", crazyFunction); 
      
    }
 
 function crazyFunction(d, i) { 
    d3.select(this)
        .transition().attr("r", "25").attr("fill", "yellow")      
        .transition().attr("r", "5").attr("fill", "black")
        .transition().attr("cx", "100")
        .transition().attr("cy", "100")
        .transition()
            .attr("cx", function(d, i) { return d.cx })
            .attr("cy", function(d, i) { return d.cy })
            .attr("fill", "blue")
        .transition()
            .attr("stroke-width", "2")
            .attr("stroke","red");
}  
    
 function d3_htmlForms(){
	 var inputElems = d3.selectAll("input");
   var svg = d3.select("#visualization")
    .append("svg")
    .attr("class","svg2")
    .attr("width", "300")
    .attr("height", "300")    ;  
     
     var rectData = [{"x": 5,   "y": 25,  "height": 50, "width": 50},
                {"x": 85,  "y": 105, "height": 50, "width": 50},
                {"x": 165, "y": 185, "height": 50, "width": 50}];

rects = d3.select(".svg2").selectAll(".rect_forms").data(rectData).enter().append("rect").attr("class","rect_forms");     
     
     rects
    .attr("x",      function(d, i) { return d.x;         })
    .attr("y",      function(d, i) { return d.y;         })
    .attr("width",  function(d, i) { return d.width;     })
    .attr("height", function(d, i) { return d.height;    })
    .attr("id",     function(d, i) { return "rect-" + i; });
     
     inputElems.on("change", inputChange);
     
 }    
    
function changeWidth() {
    rects
        .transition()
            .duration(3000)
            .attr("width", "300")
        .transition()
            .duration(3000)
            .attr("width", "50");
};    
    
function changeHeight() {
    rects
        .transition()
            .duration(3000)
            .attr("height", "300")
        .transition()
            .duration(3000)
            .attr("height", "50");
}

function inputChange() {
    var inputValue = this.value;

if      (inputValue === "width" ) { changeWidth();  }
    else if (inputValue === "height") { changeHeight(); };
}

var x = d3.scale.ordinal()
    .domain(seasonNames)
    .rangeRoundBands([0, width], 0.1);
    
    fruitConsumption.forEach(function(d) {

d.fruitsConsumed = fruitNames.map(function(name) {
        return {
            "fruitName": name,
            "consumedCount": d[name]
        };
    });

d.totalFruit = d3.sum( d.fruitsConsumed, function(d) {
        return d.consumedCount;
    });        
    });
    
    
    var y = d3.scale.linear()
    .domain([0, d3.max(fruitConsumption, function(d) { return d.totalFruit; })])
    .range([height, 0]);
    
    var color = d3.scale.ordinal()
    .domain(fruitNames)
    .range(["#d62728", "#2ca02c", "#9467bd"]);
    
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

if (change===true) {change=false} 
    else if (change===false){change=true} ;
    
    console.log("change_now:" + change)

//updateData(change)
    console.log("change_inicial"+change)*/
    
  data_now= [{"name": "Shanghai"        , "population": 18, "rank":  1,"color": "purple"},
              {"name": "Guangzhou"       , "population": 11, "rank": 10,"color": "blue"},
              {"name": "Dongguan"        , "population":  8, "rank": 20,"color": "red"},
              {"name": "Cairo"           , "population":  7, "rank": 30,"color": "yellow"},
              {"name": "Saint Petersburg", "population":  5, "rank": 40,"color": "green"},
              {"name": "New Taipei"      , "population":  4, "rank": 50,"color": "purple"}];
    
tempo=["2014","2015","2016"] 
    svgViewport = d3.select("#Dynamic_Data_graf")
  .append("svg")
    .attr("width",700)
    .attr("height",1000);
    
margin = {top: 50, right: 110, bottom: 50, left: 50},
    width  = 800 - margin.left - margin.right,           
    height = 600 - margin.top  - margin.bottom;
    
    
 innerSpace = svgViewport.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

/*margin2=margin.right-20
    textArea=svgViewport.append("g")
    .attr("transform", "translate(" + margin2 + "," + margin.top + ")")
    .attr("id","text_date").text(null)   ;	*/
//d3.select("#svgViewport").append("div").attr("id", "x_var").text("X: ");

xAxisScale = d3.scale.linear().domain([0,20]).range([0,width]);
 yAxisScale = d3.scale.linear().domain([0,50]).range([0,height]);

myXAxis = d3.svg.axis().scale(xAxisScale).orient("top");
 myYAxis = d3.svg.axis().scale(yAxisScale).orient("left");
 axisXGroup = innerSpace.append("g").call( myXAxis ).attr("class", "x axis");
 axisyGroup = innerSpace.append("g").call( myYAxis ).attr("class", "y axis");
    
circles = innerSpace
  .append("g")
    .selectAll("circle")
    .data(data_now)
  .enter().append("circle");    
    
   
circleAttributes = circles
    .attr("cx", function(d,i) { return xAxisScale(d.population); })
    .attr("cy", function(d,i) { return yAxisScale(d.rank      ); })
    .attr("r",5)
    .attr("class","circle")
    .attr("fill", function(d,i) {return d.color}) 
    .style("font-size", function(d) { return xAxisScale(d.population) + "px"; });

text = innerSpace.append("g")
    .attr("class", "city-names")
    .selectAll("text")
    .data(data_now)
  .enter().append("text");

text_year = innerSpace.append("g")
    .attr("class", "text_year")
    .selectAll("text")
    .data(tempo)
  .enter().append("text");    
    
    
 textAttributes = text
    .attr("x", function(d,i) { return xAxisScale(d.population) + 10; })
    .attr("y", function(d,i) { return yAxisScale(d.rank)       + 10; })
    .text(function(d,i) { return d.name; })
    .style("fill", "red");
    
    
    
textAttributes2 = text_year
    .attr("x", function(d,i) { return xAxisScale(16) + 10; })
    .attr("y", function(d,i) { return yAxisScale(30)       + 10; })
    .text(function(d,i) { return tempo[indicador]; })
    .style("fill", "red");    
        
  
    
    
    
};
 //End function dynamic_data()   
    
function redraw(){
    
 tempo=["2014","2015","2016"]    
 data_1 = [{"name": "Shanghai"        , "population": 18, "rank":  1,"color": "purple"},
              {"name": "Guangzhou"       , "population": 11, "rank": 10,"color": "blue"},
              {"name": "Dongguan"        , "population":  8, "rank": 20,"color": "red"},
              {"name": "Cairo"           , "population":  7, "rank": 30,"color": "yellow"},
              {"name": "Saint Petersburg", "population":  5, "rank": 40,"color": "green"},
              {"name": "New Taipei"      , "population":  4, "rank": 50,"color": "purple"}];
    
    
 data_2 = [{"name": "Shanghai"  , "population": 9, "rank":  1,"color": "purple"},
                     {"name": "Guangzhou" , "population": 5, "rank": 10,"color": "blue"},
                     {"name": "Dongguan"  , "population": 4, "rank": 20,"color": "red"},
                     {"name": "New Taipei", "population": 2, "rank": 50,"color": "purple"}];
    
 data_3 = [{"name": "Shanghai"  , "population": 15, "rank":  1,"color": "purple"},
                     {"name": "Guangzhou" , "population": 10, "rank": 10,"color": "blue"},
                     {"name": "Dongguan"  , "population": 8, "rank": 20,"color": "red"},
                     {"name": "New Taipei", "population": 5, "rank": 50,"color": "purple"}];

/*var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width  = 300 - margin.left - margin.right,           
    height = 300 - margin.top  - margin.bottom;    */
    
    // 2) generate data
    /*console.log("change_in:" + change)*/
    
    //data_now = change ? data_1 : data_2  ;
    //console.log("data_now:" + data_now)
    
    
    
    var textAttributes2 = text_year
    //.attr("x", function(d,i) { return xAxisScale(18) + 10; })
    ///.attr("y", function(d,i) { return yAxisScale(35)       + 10; })
    .text(function(d,i) { return tempo[indicador]; })
    .style("font-size", function(d) { return 50 + "px"; });   
    
    
    
 circles.selectAll("circle").data(data_now).enter().append("circle");

//circles.exit().remove();
    
    
textAttributes.data(data_now)
    
    var textAttributes = text
    .attr("x", function(d,i) { return xAxisScale(d.population) + 10; })
    .attr("y", function(d,i) { return yAxisScale(d.rank)       + 10; })
    .text(function(d,i) { return d.name; })
    .style("fill", "red");

/*var text = innerSpace.append("g")
    .attr("class", "city-names")
    .selectAll("text")
    .data(data_now) */
  
//text.exit().remove();    
//text.enter().append("text");    
    
circles.exit().remove();        
    
    
if (indicador ===0) {data_now=data_2; indicador ++} 
    //else if (change===false){change=true} ;
    else if(indicador===1) {data_now=data_3; indicador ++}
    else if(indicador===2) {data_now=data_1 ; indicador=0}

}
    
function updateData(change) {

inputValue = change;

if      (inputValue == true ) {change=false} 
    else if (inputValue == false) {change=true} ;
    
    
        
    console.log("change_in:" + change)
    data_now = change ? data_1 : data_2  ;
    /*if (change===true) {change=false} 
    else if (change===false){change=true} ;*/
    
    console.log("change_now:" + change) 
    return [{data_now,change}]
    
    
    
}

setInterval(function() {  redraw(); }, 2000);    
    
function start() {
	
    scatterplot();
    histogram2();
    histogram();
    barchart();
    Basic_Chart_Bar_Chart_WithNegativeValues();
    AreaChart();
    GroupedBarChart();
    StackedBarChart();
    MultiSeriesLineChart();
    scatterplot_tooltips();
    d3_htmlForms();
    stackLayout();
    dynamic_data();
	    
};
    
window.onload = start;    
	</script>    
    
    
</script>>
 
</body>
</html>  ☺

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

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

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