albertleng/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Plotting functions in JavaScript using the
    function plot library</title>
  <meta charset="utf-8"/>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
<style id="jsbin-css">
section {
  border:4px solid grey;
  border-radius:15px;
  box-shadow: 5px 5px 5px grey;
  float:left;
  height:360px;
  padding: 20px;
  margin:10px;
}

#plotSettings {
  width:120px;
}

#plot {
  width:550px;
}
</style>
</head>
<body onload="plot();">
  <h2>Interactive function plotter</h2>
  <section id="plotSettings">
  <label for="xMin">xMin: </label>
  value: <input type=number id="xMin" value=0 step=0.5
                oninput="plot();">
    <p></p>
  <label for="xMax">xMax: </label>
  value: <input type=number id="xMax" value=6.28 step=0.5
                oninput="plot();">

  <p></p>
 <label for="yMin">yMin: </label>
  value: <input type=number id="yMin" value=-1 step=0.5
                oninput="plot();">
    <p></p>
  <label for="yMax">yMax: </label>
  value: <input type=number id="yMax" value=1 step=0.5
                oninput="plot();">
    <p></p>
  <label for="color">Color: </label>
  value: <input type=color id="color"
                onchange="plot();">
    <p></p>
      <label for="function">Function to plot: </label>
  <input id="function" type="text"
         value="sin(x)"
         onchange="plot();">
    <p></p>
  <button onclick="plot();">Plot it!</button>

  </section>

  <section id="plot">
     <div id="myFunction"></div>
  </section>

<script id="jsbin-javascript">
var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)',
    color: 'red'
 }],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};

function plot() {
  var f = document.querySelector("#function").value;
  var xMin = document.querySelector("#xMin").value;
  var xMax = document.querySelector("#xMax").value;
  var yMin = document.querySelector("#yMin").value;
  var yMax = document.querySelector("#yMax").value;
  var color = document.querySelector("#color").value;

  parameters.data[0].fn = f;
  parameters.xAxis.domain = [xMin, xMax];
  parameters.yAxis.domain = [yMin, yMax];
  parameters.data[0].color = color;

  functionPlot(parameters);
}
</script>


<script id="jsbin-source-css" type="text/css">section {
  border:4px solid grey;
  border-radius:15px;
  box-shadow: 5px 5px 5px grey;
  float:left;
  height:360px;
  padding: 20px;
  margin:10px;
}

#plotSettings {
  width:120px;
}

#plot {
  width:550px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)',
    color: 'red'
 }],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};

function plot() {
  var f = document.querySelector("#function").value;
  var xMin = document.querySelector("#xMin").value;
  var xMax = document.querySelector("#xMax").value;
  var yMin = document.querySelector("#yMin").value;
  var yMax = document.querySelector("#yMax").value;
  var color = document.querySelector("#color").value;

  parameters.data[0].fn = f;
  parameters.xAxis.domain = [xMin, xMax];
  parameters.yAxis.domain = [yMin, yMax];
  parameters.data[0].color = color;

  functionPlot(parameters);
}
</script></body>
</html>

## jsbin.wuxubal.css
section {
  border:4px solid grey;
  border-radius:15px;
  box-shadow: 5px 5px 5px grey;
  float:left;
  height:360px;
  padding: 20px;
  margin:10px;
}

#plotSettings {
  width:120px;
}

#plot {
  width:550px;
}

## jsbin.wuxubal.js
var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)',
    color: 'red'
 }],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};

function plot() {
  var f = document.querySelector("#function").value;
  var xMin = document.querySelector("#xMin").value;
  var xMax = document.querySelector("#xMax").value;
  var yMin = document.querySelector("#yMin").value;
  var yMax = document.querySelector("#yMax").value;
  var color = document.querySelector("#color").value;

  parameters.data[0].fn = f;
  parameters.xAxis.domain = [xMin, xMax];
  parameters.yAxis.domain = [yMin, yMax];
  parameters.data[0].color = color;

  functionPlot(parameters);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Plotting functions in JavaScript using the
	function plot library</title>
	<meta charset="utf-8"/>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
	<style id="jsbin-css">
	section {
	border:4px solid grey;
	border-radius:15px;
	box-shadow: 5px 5px 5px grey;
	float:left;
	height:360px;
	padding: 20px;
	margin:10px;
	}

	#plotSettings {
	width:120px;
	}

	#plot {
	width:550px;
	}
	</style>
	</head>
	<body onload="plot();">
	<h2>Interactive function plotter</h2>
	<section id="plotSettings">
	<label for="xMin">xMin: </label>
	value: <input type=number id="xMin" value=0 step=0.5
	oninput="plot();">
	<p></p>
	<label for="xMax">xMax: </label>
	value: <input type=number id="xMax" value=6.28 step=0.5
	oninput="plot();">

	<p></p>
	<label for="yMin">yMin: </label>
	value: <input type=number id="yMin" value=-1 step=0.5
	oninput="plot();">
	<p></p>
	<label for="yMax">yMax: </label>
	value: <input type=number id="yMax" value=1 step=0.5
	oninput="plot();">
	<p></p>
	<label for="color">Color: </label>
	value: <input type=color id="color"
	onchange="plot();">
	<p></p>
	<label for="function">Function to plot: </label>
	<input id="function" type="text"
	value="sin(x)"
	onchange="plot();">
	<p></p>
	<button onclick="plot();">Plot it!</button>

	</section>

	<section id="plot">
	<div id="myFunction"></div>
	</section>

	<script id="jsbin-javascript">
	var parameters = {
	target: '#myFunction',
	data: [{
	fn: 'sin(x)',
	color: 'red'
	}],
	grid: true,
	yAxis: {domain: [-1, 1]},
	xAxis: {domain: [0, 2*Math.PI]}
	};

	function plot() {
	var f = document.querySelector("#function").value;
	var xMin = document.querySelector("#xMin").value;
	var xMax = document.querySelector("#xMax").value;
	var yMin = document.querySelector("#yMin").value;
	var yMax = document.querySelector("#yMax").value;
	var color = document.querySelector("#color").value;

	parameters.data[0].fn = f;
	parameters.xAxis.domain = [xMin, xMax];
	parameters.yAxis.domain = [yMin, yMax];
	parameters.data[0].color = color;

	functionPlot(parameters);
	}
	</script>


	<script id="jsbin-source-css" type="text/css">section {
	border:4px solid grey;
	border-radius:15px;
	box-shadow: 5px 5px 5px grey;
	float:left;
	height:360px;
	padding: 20px;
	margin:10px;
	}

	#plotSettings {
	width:120px;
	}

	#plot {
	width:550px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var parameters = {
	target: '#myFunction',
	data: [{
	fn: 'sin(x)',
	color: 'red'
	}],
	grid: true,
	yAxis: {domain: [-1, 1]},
	xAxis: {domain: [0, 2*Math.PI]}
	};

	function plot() {
	var f = document.querySelector("#function").value;
	var xMin = document.querySelector("#xMin").value;
	var xMax = document.querySelector("#xMax").value;
	var yMin = document.querySelector("#yMin").value;
	var yMax = document.querySelector("#yMax").value;
	var color = document.querySelector("#color").value;

	parameters.data[0].fn = f;
	parameters.xAxis.domain = [xMin, xMax];
	parameters.yAxis.domain = [yMin, yMax];
	parameters.data[0].color = color;

	functionPlot(parameters);
	}
	</script></body>
	</html>