D3 Examples - selectize on side with line chart

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
​
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.x.axis path {
  display: none;
}
​
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
}
​
  
  
</style>
​
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js></script>  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap2.min.css" />
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
​
   
<script>
  
// drop down selectize menu
var data = ["New York", "San Francisco",    "Austin"];  
​
d3.select('body')
    .append('p')
    .attr("id", "info")  
  
var select = d3.select('body')
  .append('select')
  .attr('class','select')
  .attr('id','select')  
  .attr('multiple','multiple') 
  .on('change',onchange)
  
var options = select
  .selectAll('option')
    .data(data).enter()
    .append('option')
    .text(function (d) { return d; });
​
  
    var startArray = []; // empty start array 
function onchange() {
      
    var updateArray = $( "#select" ).val() || [];
        
    if(startArray.length < updateArray.length) {
        var name = updateArray.filter(f => !startArray.includes(f));  
        startArray = updateArray;
      console.log(name);
    } else {
        var name = startArray.filter(f => !updateArray.includes(f));
            startArray = updateArray;
      console.log(name);      
    }
  
  reDraw(name);
  
  var multipleValues = $( "#select" ).val() || [];
    
  // show current value at top
  d3.select('p')
    .attr("id", "info")
    .text('current value: ' + multipleValues)
​
  };
​
// selectize input  
​
$(function() {    
​
  $('#select').selectize({
    delimiter: ',',
    persist: false,
    plugins: ['remove_button'],
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
​
});
  
// Start line chart
  
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("body").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 + ")");
​
// start chart 
  
var filterData={"Austin":false,"New York":false,"San Francisco":false};//cities to be shown
​
function drawChart(filterData){
​
d3.tsv("data.tsv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
​
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.selectAll("*").remove();
​
//LEGEND
var legend = svg.selectAll('g')
    .data(cities)
    .enter()
    .append('g')
    .attr('class', 'legend');
    
legend.append('rect')
    .attr('x', width - 20)
    .attr('y', function(d, i){ return i *  20;})
    .attr('width', 10)
    .attr('height', 10)
    .style('fill', function(d) { 
    return color(d.name);
    });
      
legend.append('text')
    .attr('x', width - 8)
    .attr('y', function(d, i){ return (i *  20) + 9;})
    .text(function(d){ return d.name; });
​
legend
    .on("click",function(d){
    reDraw(d.name);
});
​
  
  
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.filter(function(d){return filterData[d.name]==true;})) 
  .enter().append("g");
        
svg.selectAll(".city")
  .data(cities.filter(function(d){return filterData[d.name]==true;}))
  .append("g")
  .attr("class", "city");
      
svg.selectAll(".city")
    .data(cities.filter(function(d){return filterData[d.name]==true;}))
    .exit()
    .remove();
  
city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });
​
  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; });
    svg.selectAll(".city")
      .data(cities.filter(function(d){return filterData[d.name]==true;}))
      .exit()
      .remove();
});
} // end draw chart function
  
​
drawChart(filterData); // finally draw the chart 
​
function reDraw(name){
    filterData[name]=!filterData[name];
  drawChart(filterData);
}  
  
  
  
// function displayVals() {
// var multipleValues = $( "#select" ).val() || [];
​
// $( "p" ).html( "Multiple: " + multipleValues.join( ", " ) );
​
// console.log(multipleValues);
// }
  
// $( "select" ).change( displayVals );
// displayVals();
  
  
  
</script>
 
</body>
</html>
    