D3 Examples - Bootstrap + D3

xxxxxxxxxx
 
<html>
​
<head>
  <title>My Exo-cortex Bootstrap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- External JavaScript! -->
  <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>
​
<style>    
    [class*="col-"], header, footer, nav, aside, section, div[role="main"] {
 padding-top: 15px;
 padding-bottom: 15px;
 background-color: #f5f5f5;
 background-color: rgba(86,61,124,.15);
 border: 1px solid #ddd;
 border: 1px solid rgba(86,61,124,.2);
 text-align: center;
}
    </style>
    
<body>
​
<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>
​
<script>
 function scatterplot() {
window.alert("Scatterplot charged!")    ;
    
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("#scatterplot_graf1").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_scatterplot.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", "dot")
      .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); });
  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; });
});
};
 function histogram2(){         
     
var selec = d3.select("#demo1") ;
// Generate a log-normal distribution with a median of 30 minutes.
var values = d3.range(1000).map(d3.random.logNormal(Math.log(30), .4));
// Formatters for counts and times (converting numbers to Dates).
var formatCount = d3.format(",.0f"),
    formatTime = d3.time.format("%H:%M"),
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
    .domain([0, 120])
    .range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
    .bins(x.ticks(20))
    (values);
var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatMinutes);
var svg = d3.select("#scatterplot_graf2").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 bar = svg.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
    .attr("x", 1)
    .attr("width", x(data[0].dx) - 1)
    .attr("height", function(d) { return height - y(d.y); });
bar.append("text")
    .attr("dy", ".75em")
    .attr("y", 6)
    .attr("x", x(data[0].dx) / 2)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatCount(d.y); });
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    }    ;
 function histogram(){          
     
// Generate a log-normal distribution with a median of 30 minutes.
var values = d3.range(1000).map(d3.random.logNormal(Math.log(30), .4));
// Formatters for counts and times (converting numbers to Dates).
var formatCount = d3.format(",.0f"),
    formatTime = d3.time.format("%H:%M"),
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
    .domain([0, 120])
    .range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
    .bins(x.ticks(20))
    (values);
var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatMinutes);
    
//var svg = d3.select("#demo2").append("svg")
var svg = d3.select("#histogram_graf1").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 bar = svg.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
    .attr("x", 1)
    .attr("width", x(data[0].dx) - 1)
    .attr("height", function(d) { return height - y(d.y); });
bar.append("text")
    .attr("dy", ".75em")
    .attr("y", 6)
    .attr("x", x(data[0].dx) / 2)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatCount(d.y); });
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    }    ;
 function barchart() {
    window.alert("Barchart charged")    ;
    
   var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960- margin.left - margin.right,
    //height = +svg.attr("height") - margin.top - margin.bottom;
    height = 500- margin.top - margin.bottom;
var formatPercent=d3.format(".o%");
        
//var x = d3.scale.band().rangeRound([0, width]).padding(0.1),
 var x = d3.scale.ordinal().rangeRoundBands([0, width], .1),
        y = d3.scale.linear().range([height, 0]);
var xAxis=d3.svg.axis().scale(x).orient("bottom");
var yAxis=d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
var svg = d3.select("#barchart_graf1").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_barchart.tsv", function(error,data) {
  
data.forEach(function(d){
    d.frequency = +d.frequency;
});
    
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
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("Frequency");
    
svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });
    
  
   
});
       }     ;
 function Basic_Chart_Bar_Chart_WithNegativeValues(){
    
    
var margin = {top: 20, right: 30, bottom: 40, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;    
    
var barPad=0.1;
var barOuterPad=0.2;    
var x = d3.scale.linear()
    .range([0, width]);
    
var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], barPad, barOuterPad);
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
    
    
    
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(0)
    .tickPadding(6);    
    
var svg = d3.select("#barchartNegativeValues").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_barchartNegative_Values.tsv", type, function(error, data) {
  x.domain(d3.extent(data, function(d) { return d.value; })).nice();
  y.domain(data.map(function(d) { return d.name; }));
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
      .attr("x", function(d) { return x(Math.min(0, d.value)); })
      .attr("y", function(d) { return y(d.name); })
      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
      .attr("height", y.rangeBand());
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + x(0) + ",0)")
      .call(yAxis);
});
function type(d) {
  d.value = +d.value;
  return d;
    
}
}
 function AreaChart(){
    
   
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
    .range([0, width]);
    
var y = d3.scale.linear()
    .range([height, 0]);    
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");    
    
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");    
    
var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });
    
var svg = d3.select("#AreaChart_graf").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_areachart.tsv",function(erro,data) {
    
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});
    
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area);
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("Price ($)");
    
})
    
}
 function GroupedBarChart(){
    
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
    
    var x1 = d3.scale.ordinal();
    
    var y = d3.scale.linear()
    .range([height, 0]);
    
    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
    
    var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");
    
    
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));
    
    
    var svg = d3.select("#GroupedBarChart").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_groupedbarchart.csv",function(error,data){
    
    var ageNames=d3.keys(data[0]).filter(function(key){return key !=="State"})
    
    data.forEach(function(d) {
      d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]};});
    });
    
    x0.domain(data.map(function(d) { return d.State; }));
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
    
    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(" + x0(d.State) + ",0)"; });
    
    state.selectAll("rect")
    .data(function(d) { return d.ages; })
  .enter().append("rect")
     .attr("width", x1.rangeBand())
     .attr("x", function(d) { return x1(d.name); })
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .style("fill", function(d) { return color(d.name); });
    
    var legend = svg.selectAll(".legend")
    .data(ageNames.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; });
    
    
    }); //end d3.csv
    
    
    }// end function GroupedBarChart
 function StackedBarChart(){
    
    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.ordinal()
    .rangeRoundBands([0, width], .1);
    
    var y = d3.scale.linear()
    .rangeRound([height, 0]);
    
    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
​
    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);
}
​
function mouseout() {
    div.style("opacity", 1e-6);
}     
    
    
});
};
 function SVG_TransitionAnimations(){
     
    d3.select("#SVG_Transition").append("svg").append("rect").attr("class", "rect_one").style("color","black");
    d3.select(".rect_one").attr("x","25").attr("y","25").attr("width","50").attr("height","100");
     
    d3.select(".rect_one").transition().attr("height","300").style("fill","blue").duration(10000);      
     
     
 }
 function SVG_RectanglesAnimation(){
    var svgSelection = d3.select("#SVG_Transition").append("svg");
​
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(); };
}   
​
function stackLayout(){
    
    var margin = {top: 80, right: 30, bottom: 30, left: 30},
        width = 300 - margin.left - margin.right,                
        height = 300 - margin.top - margin.bottom;   
    
    
    
    var fruitConsumption = [ {"season": "spring", "apple": 1, "kiwi": 4, "grape": 1},
                         {"season": "summer", "apple": 2, "kiwi": 1, "grape": 2},
                         {"season": "fall",   "apple": 3, "kiwi": 3, "grape": 1},
                         {"season": "winter", "apple": 2, "kiwi": 2, "grape": 2}];
    
    
    var seasonNames = fruitConsumption.map( function(d) { 
    return d.season;
    });
    
    
    var fruitNames = d3.keys(fruitConsumption[0]).filter(function(key) { return key !== "season"; });
​
    
    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");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
    
    var svgViewport = d3.select("#StackLayout_graf")
    .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 + ")");
    
        
    
    
    svgViewport.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
    svgViewport.append("g")
    .attr("class", "y axis")
    .call(yAxis);
    
    
    var layers = fruitNames.map(function(fruitName) { return fruitConsumption.map(function(d) { return { "x": x(d.season), "y": d[fruitName], "fruitName":fruitName}; }); });
    
    var stack = d3.layout.stack();
    
    var svgLayer = svgViewport.selectAll(".layer")
    .data(layers)
  .enter().append("g")
    .attr("class", "layer");
    
    var rect = svgLayer.selectAll("rect")    // ** HIGHLIGHT **
    .data(function(d) { return d; })     // ** HIGHLIGHT **
    .enter().append("rect")                // ** HIGHLIGHT **
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return y(d.y + d.y0); })
    .attr("width", x.rangeBand())
    .attr("height", function(d, i) { return height - y(d.y); })
    .style("fill", function(d, i) { return color(d.fruitName); });
    
    
    var rect = svgLayer.selectAll("rect")      
    .data(function(d) { return d; })       
    .enter().append("rect")                          
    .attr("x", function(d) { return d.x; })                       
    .attr("width", x.rangeBand())                                   
    .attr("height", function(d, i) { return height - y(d.y); })     
    .style("fill", function(d, i) { return color(d.fruitName); }); 
    
    var legend = d3.select("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 + margin.left - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);
    
    legend.append("text")
    .attr("x", width + margin.left - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });
    
    
} 
change = false
indicador=0
function dynamic_data(){
    
    /*data_1 = [{"name": "Shanghai"        , "population": 18, "rank":  1},
              {"name": "Guangzhou"       , "population": 11, "rank": 10},
              {"name": "Dongguan"        , "population":  8, "rank": 20},
              {"name": "Cairo"           , "population":  7, "rank": 30},
              {"name": "Saint Petersburg", "population":  5, "rank": 40},
              {"name": "New Taipei"      , "population":  4, "rank": 50}];
    
    
    data_2 = [{"name": "Shanghai"  , "population": 9, "rank":  1},
                     {"name": "Guangzhou" , "population": 5, "rank": 10},
                     {"name": "Dongguan"  , "population": 4, "rank": 20},
                     {"name": "New Taipei", "population": 2, "rank": 50}]; */
    
    
    /*console.log("change_in:" + change)
    data_now = change ? data_1 : data_2  ;
    console.log("data_now:" + data_now)
​
    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");
​
    
    
   
var circleAttributes = circles
    .attr("cx", function(d,i) { return xAxisScale(d.population); })
    .attr("cy", function(d,i) { return yAxisScale(d.rank      ); })
    .attr("r",5)
    .attr("fill", function(d,i) {return d.color});
​
//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>  ☺
    