jhnwllr/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap2.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>

<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
select {
  max-width:10%;
}
</style>

</head>
<body>


<!--
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div id = "input" class="col-sm-4" style="background-color:lavender;">
    .col-sm-4
    <div id = "chart" class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>
</div>
-->
  <script>

d3.select("body")
	.append("div")
	.attr("class","row")
	.attr("id","row")

d3.select("#row")
	.append("div")
	.attr("class","col-sm-4")
	.attr("id","input")
  .attr("style","background-color:lavender;")
  .text("input")


d3.select("#row")
	.append("div")
	.attr("class","col-sm-8")
	.text("chart")
	.attr("style","background-color:lavenderblush;")


var data = ["New York",	"San Francisco",	"Austin"];

var select = d3.select('#input')
	.attr("id", "input")
	.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; });

d3.select("#chart")
    .append('p')
  	.text("dog")

$(function() {

  $('#select').selectize({
    delimiter: ',',
    persist: false,
    plugins: ['remove_button'],
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });

});


	</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Bootstrap Example</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">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap2.min.css" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<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>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	select {
	max-width:10%;
	}
	</style>

	</head>
	<body>


	<!--
	<div class="container-fluid">
	<h1>Hello World!</h1>
	<p>Resize the browser window to see the effect.</p>
	<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
	<div class="row">
	<div id = "input" class="col-sm-4" style="background-color:lavender;">
	.col-sm-4
	<div id = "chart" class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
	</div>
	</div>
	-->
	<script>

	d3.select("body")
	.append("div")
	.attr("class","row")
	.attr("id","row")

	d3.select("#row")
	.append("div")
	.attr("class","col-sm-4")
	.attr("id","input")
	.attr("style","background-color:lavender;")
	.text("input")


	d3.select("#row")
	.append("div")
	.attr("class","col-sm-8")
	.text("chart")
	.attr("style","background-color:lavenderblush;")


	var data = ["New York", "San Francisco", "Austin"];

	var select = d3.select('#input')
	.attr("id", "input")
	.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; });

	d3.select("#chart")
	.append('p')
	.text("dog")

	$(function() {

	$('#select').selectize({
	delimiter: ',',
	persist: false,
	plugins: ['remove_button'],
	create: function(input) {
	return {
	value: input,
	text: input
	}
	}
	});

	});



	</script>

	</body>
	</html>