Last active
August 26, 2015 23:35
-
-
Save enjalot/a372513ec3227d0da393 to your computer and use it in GitHub Desktop.
regexplanation
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <body> | |
| <svg></svg> | |
| <script> | |
| /* | |
| I originally wrote this in 2011, wish there was http://www.regexr.com/ back then... | |
| */ | |
| var w = 950 | |
| var h = 500 | |
| wait = 700; | |
| tests = [ "-1.5", "0", "42", "+50.00" , "-.2", ".5" ] | |
| regex = [ "[+-]?", "\\d*", "(\\.\\d+)?", ["([eE]", "[+-]?", "\\d+)?"] ] | |
| numbers = [] | |
| numbers.push( [ "", "8", ".31432", ["e", "-", "3"]]) | |
| numbers.push( [ "", "6", ".674", ["e", "-", "11"]]) | |
| numbers.push( [ "+", "1", "", ["e", "", "100"]]) | |
| numbers.push( [ "", "4", ".6692", "" ]) | |
| numbers.push( [ "-", "2", ".7182818284", "" ]) | |
| numbers.push( [ "-", "3", ".14159265358979", "" ]) | |
| numbers.push( [ "", "2", ".5029", "" ]) | |
| numbers.push( [ "", "1", ".618", "" ]) | |
| numbers.push( [ "", "42", "", "" ]) | |
| numbers.push( [ "", "0", "", "" ]) | |
| var update_fonts = function() | |
| { | |
| d3.selectAll("text") | |
| .attr("font-family", font) | |
| .attr("font-size", font_size); | |
| } | |
| var fi = 0; | |
| var fonts = ["Courier New", "Verdana", "Fredericka the Great", "Quantico", "Overlock SC"]; | |
| var font_size = 30; | |
| var font = fonts[fi]; | |
| var range_color = d3.scale.linear() | |
| .domain([0, 3]) | |
| .interpolate(d3.interpolateRgb) | |
| .range(['#96b1d5', '#ef2929']) | |
| var colors = [ '#d3d7cf', '#8ae234', '#fce94f']//, '#999'] '#eeeeec', '#ad7fa8', '#8ae234' | |
| var color = function(i) | |
| { | |
| return colors[i] | |
| } | |
| var translate = function(d,i) | |
| { | |
| return "translate(" + [w / 2, 100 + i * 40 ] + ")"; | |
| } | |
| var svg = d3.select("svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| var defs = svg.append("svg:defs") | |
| function make_radial(id, c, f, r, color, opacity) | |
| { | |
| var gradient = defs.append("svg:radialGradient") | |
| .attr("id", id) | |
| .attr("cx", c.x) | |
| .attr("cy", c.y) | |
| .attr("fx", f.x) | |
| .attr("fy", f.y) | |
| .attr("r", r) | |
| gradient.append("svg:stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", color) | |
| .attr("stop-opacity", opacity) | |
| gradient.append("svg:stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", color) | |
| .attr("stop-opacity", 1e-6) | |
| } | |
| var wrid = "white_radial"; | |
| var gr = .5; | |
| var c = { "x": .5, "y": .5 }; | |
| //f = { "x": "50%", "y": "50%" }; | |
| make_radial(wrid, c, c, gr, "#fff", .2) | |
| svg.append("rect") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .attr("fill", "#2f2f2f") | |
| /* | |
| svg.append("svg:rect") | |
| .attr("class", "background_rect") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .attr("stroke", "none") | |
| .attr("fill", "url(#" + wrid + ")") | |
| .attr("fill-opacity", .3) | |
| */ | |
| var vis = svg.append("svg:g") | |
| .attr("class", "vis") | |
| var make_inner = function(d,i) { | |
| if(typeof(d) === "string") | |
| { | |
| d3.select(this).text(d); | |
| } | |
| else | |
| { | |
| d3.select(this.parentNode) | |
| .selectAll("tspan.inner") | |
| .data(d) | |
| .enter() | |
| .append("svg:tspan") | |
| .text(function(e,j){return e;}) | |
| .attr("fill", function(e,j) {return range_color(j)}) | |
| .attr("dx", ".25em") | |
| } | |
| } | |
| var regext = vis.append("text") | |
| .attr("transform", "translate(" + [w / 2, 50] + ")") | |
| .attr("text-anchor", "middle") | |
| .selectAll("tspan.regex") | |
| .data(regex) | |
| .enter() | |
| .append("svg:tspan") | |
| .attr("class", "regex") | |
| .each(make_inner) | |
| .attr("fill", function(d,i) {return color(i)}) | |
| .attr("dx", ".25em") | |
| var make_numbers = function(classname, data) | |
| { | |
| //console.log("data", data) | |
| gnums = vis.selectAll("g."+classname) | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", classname) | |
| //.attr("transform", "translate(100, 100)") | |
| .attr("transform", translate) | |
| cnums = gnums.append("text") | |
| .attr("text-anchor", "middle") | |
| .each(function(dnumber,i) { | |
| //console.log("dnumber", dnumber) | |
| d3.select(this) | |
| .selectAll("tspan") | |
| .data(dnumber) | |
| .enter() | |
| .append("tspan") | |
| .each(make_inner) | |
| .attr("fill", function(d,i) { | |
| //console.log("color",i, color(i)); | |
| return color(i) | |
| }) | |
| .attr("dx", ".25em") | |
| }) | |
| update_fonts(); | |
| } | |
| make_numbers("numbers", numbers); | |
| </script> | |
| </body> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment