Plots the first ten Hermite polynomials (physicists' definition), defined using the recursion relation.
Last active
April 4, 2016 17:45
-
-
Save tpogden/0189bc1f2d5ed0f342dbab730b7aaee5 to your computer and use it in GitHub Desktop.
Hermite Polynomials
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <title>Hermite Polynomials</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| body { | |
| font-family: "Helvetica", sans-serif; | |
| font-size: 10px; | |
| margin: 8px; | |
| } | |
| .axis { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .path { | |
| fill: none; | |
| stroke: rgba(189,54,19,1); | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| (function() { | |
| var margin = {top: 20, right: 20, bottom: 40, left: 40}, | |
| width = 944 - margin.left - margin.right, | |
| height = 480 - margin.top - margin.bottom; | |
| var xMin = -5; | |
| var xMax = 5; | |
| var yMin = -200; | |
| var yMax = 200; | |
| var drawDelay = 1000; | |
| var nMax = 6; | |
| var xSteps = 101; | |
| var xRange = d3.range(xMin, xMax, (xMax-xMin)/xSteps); | |
| // recursive definition | |
| function hermite(x, n) { | |
| switch(n) { | |
| case 0: | |
| return 1; | |
| case 1: | |
| return 2*x; | |
| default: | |
| return 2.*x*hermite(x, n-1) - 2.*(n-1)*hermite(x, n-2); | |
| } | |
| } | |
| // X scale | |
| var xScale = d3.scale.linear() | |
| .domain([xMin, xMax]) | |
| .range([0, width]); | |
| // Y scale | |
| var yScale = d3.scale.linear() | |
| .domain([yMin, yMax]) | |
| .range([height, 0]); | |
| // Draw SVG | |
| 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 + ")"); | |
| // Draw axes | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .ticks(5) | |
| .orient("bottom"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| var yAxis = d3.svg.axis() | |
| .scale(yScale) | |
| .ticks(3) | |
| .orient("left"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| var nText = svg.append("text") | |
| .attr("id", "n-text") | |
| .attr("class", "svg-small-text") | |
| .style("text-anchor", "start") | |
| .attr("x", 20) | |
| .attr("y", 4); | |
| var hermite_path = svg.append("path") | |
| .attr("class", "path"); | |
| var lineFunction = d3.svg.line() | |
| .x(function(d) { return xScale(d[0]); }) | |
| .y(function(d) { return yScale(d[1]); }) | |
| .interpolate("cardinal"); | |
| function drawHermites(n) { | |
| setTimeout(function() { | |
| d3.select('#n-text').text("n: " + (n)); | |
| path_xy = xRange.map(function(i) { return [i, hermite(i, n)]; }); | |
| hermite_path | |
| .datum(path_xy) | |
| .transition() | |
| .attr("class", "path") | |
| .attr("d", lineFunction); | |
| n++; | |
| if (n < nMax) { | |
| drawHermites(n); | |
| } | |
| else { | |
| drawHermites(0); | |
| } | |
| }, drawDelay); | |
| } | |
| drawHermites(0); | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment