D3 Examples - jquery combined with selectize

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
    
  </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.v4.min.js"></script>
</head>
<body>
 
​
   
<script>
  var data = ["Cat", "Dog", "Turtle"];
  
  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; });
 
  function onchange() {
    selectValue = d3.select('select').property('value')
    d3.select('body')
        .append('p')
        .text(selectValue + ' is the last selected option.')
    };
  
  // Feel free to change or delete any of the code you see in this editor!
  var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 50)
​
​
  svg.append("text")
    .text("dog")
    .attr("y", 20)
    .attr("x", 120)
    .attr("font-size", 36)
    .attr("font-family", "monospace")  
  
  
function displayVals() {
var multipleValues = $( "#select" ).val() || [];
​
// $( "p" ).html( "Multiple: " + multipleValues.join( ", " ) );
​
console.log(multipleValues);
}
  
$( "select" ).change( displayVals );
displayVals();
  
// selectize input  
​
$(function() {    
​
  $('#select').selectize({
    delimiter: ',',
    persist: false,
    plugins: ['remove_button'],
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
​
});
  
  
</script>
 
</body>
</html>
    