dansabo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: Self-Create

  
## index.html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <section>
      <h1 id="demo-title">"Live" Demo</h1>
      <div id="demo-chart"></div>
      <div id="live-demo"></div>
		</section>
    <script>
var openComment, styles, time, writeStyleChar, writeStyles, total = "";
var writeDemoChar, writeDemoCode, demoIndex = 0, demoCode, demoTotal = "";

styles =
    "/* \n " +
    "* Inspired by pen#PwLXXP\n " +
    "*/\n\n" +
    "pre { \n  " +
    "position: fixed; width: 48%;\n  " +
    "top: 30px; bottom: 50px; left: 26%;\n  " +
    "transition: left 500ms;\n  " +
    "background-color: #313744; color: #a6c3d4;\n  " +
    "border: 1px solid rgba(0,0,0,0.2);\n  " +
    "padding: 24px 12px;\n  " +
    "box-sizing: border-box;\n  " +
    "border-radius: 3px;\n  " +
    "box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);\n" +
    "}\n\n\n" +
    "\/* \n " +
    "* Syntax highlighting \n " +
    "*\/\n\n" +
    "pre em:not(.comment) { font-style: normal; }\n\n" +
    ".comment       { color: #707e84; }\n" +
    ".selector      { color: #c66c75; }\n" +
    ".selector .key { color: #c66c75; }\n" +
    ".key           { color: #c7ccd4; }\n" +
    ".keyword       { color: #b48ead; }\n" +
    ".operand       { color: #ebcb8b; }\n" +
    ".method        { color: #38b6ad; }\n" +
    ".string        { color: #a3be8c; }\n" +
    ".digit         { color: #dbdbdb; }\n" +
    ".d3            { color: #9b65a1; }\n" +
    ".value         { color: #d5927b; }\n\n\n" +
    "pre { left: 50%; }\n\n\n" +

    "#live-demo {\n  " +
    "color: #fff;\n  " +
    "font-size: 13px; line-height: 1.4;\n  " +
    "-webkit-font-smoothing: subpixel-antialiased;\n" +
    "}\n\n" +

    "\/* \n " +
    "* Let's start the D3 code!\n " +
    "*\/\n\n" +
    "";

demoCode = [" var barchart_data = [63, 39, 31, 53, 25, 32, 99, 69, 51];\n " +
"\n ",
"var barchart_m = [200, 60, 200, 60],\n " +
"    barchart_w = 640 - barchart_m[1] - barchart_m[3],\n " +
"    barchart_h = 800 - barchart_m[0] - barchart_m[2];\n " +
"\n ",
"var barchart_svg = d3.select(\"#demo-chart\").append(\"svg:svg\");\n ",
"    barchart_svg.style(\"background-color\", \"#1a1c24\");\n ",
"    barchart_svg.attr(\"width\", barchart_w + barchart_m[1] + barchart_m[3]);\n " +
"    barchart_svg.attr(\"height\", barchart_h + barchart_m[0] + barchart_m[2]);\n ",
"\n " +
"var barchart_g = barchart_svg.append(\"svg:g\");\n ",
"    barchart_g.attr(\"transform\", \"translate(\" + barchart_m[3] + \",\" + barchart_m[0] + \")\");\n " +
"\n ",
"var barchart_bar = barchart_g.selectAll(\"g.bar\")\n " +
"    .data(barchart_data);\n " +
"    barchart_bar.enter().append(\"svg:g\");\n " +
"    barchart_bar.attr(\"class\", \"bar\")\n " +
"    .attr(\"transform\", \nfunction(d, i) { return \"translate(\" + i * 60 + \")\"; });\n " +
"\n " ,
"var barchart_x = d3.scale.linear()\n " +
"    .domain([0, d3.max(barchart_data)])\n " +
"    .range([0, barchart_w]);\n " +
"\n ",
"var barchart_y = d3.scale.ordinal()\n " +
"    .domain(d3.range(barchart_data.length))\n " +
"    .rangeRoundBands([0, barchart_h], .2);\n " +
"\n ",
"barchart_bar.append(\"svg:rect\")\n " +
"    .attr(\"width\", 60)\n " +
"    .attr(\"height\", barchart_y.rangeBand())\n " +
"    .style(\"fill\", \"white\")\n " +
"    .style(\"stroke\", \"black\");\n " +
"\n ",
"barchart_bar.append(\"svg:text\")\n " +
"    .attr(\"x\", 60)\n " +
"    .attr(\"y\", barchart_y.rangeBand() \/ 2)\n " +
"    .attr(\"dx\", -20)\n " +
"    .attr(\"dy\", \".35em\")\n " +
"    .attr(\"text-anchor\", \"end\")\n " +
"    .style(\"fill\", \"black\")\n " +
"    .style(\"font-size\", \"24px\")\n " +
"    .text(function(d) { return d; });\n " +
"\n ",
"function dataToBar() {\n " +
"    d3.select(\"#demo-chart\").on(\"click\", barToData);\n " +
"        \n " +
"    barchart_bar.transition()\n " +
"        .delay(function(d, i) { return i * 50; })\n " +
"        .duration(1000)\n " +
"        .attr(\"transform\", \nfunction(d, i) { return \"translate(0,\" + barchart_y(i) + \")\"; })\n " +
"        .each(\"end\", toBars);\n " +
"        \n " +
"    function toBars(d, i) {\n " +
"        var transition = d3.select(this).transition()\n " +
"            .duration(1000)\n " +
"            .delay(250);\n " +
"            \n " +
"        transition.select(\"rect\")\n " +
"            .attr(\"width\", barchart_x)\n " +
"            .style(\"fill\", \"steelblue\")\n " +
"            .style(\"stroke-opacity\", 0);\n " +
"            \n " +
"        transition.select(\"text\")\n " +
"            .attr(\"x\", barchart_x)\n " +
"            .style(\"fill\", \"white\");\n " +
"    }\n " +
"}\n " +
"\n ",
"function barToData() {\n " +
"    d3.select(\"#demo-chart\").on(\"click\", dataToBar);\n " +
"        \n " +
"    var move_transition = barchart_bar.transition()\n " +
"        .delay(function(d, i) { return i * 50; })\n " +
"        .duration(1000)\n " +
"        .attr(\"transform\", \nfunction(d, i) { return \"translate(\" + i * 60 + \")\"; });\n " +
"        \n " +
"    move_transition.select(\"rect\")\n " +
"        .attr(\"width\", 60)\n " +
"        .style(\"fill\", \"white\")\n " +
"        .style(\"stroke-opacity\", 1);\n " +
"\n " +
"    move_transition.select(\"text\")\n " +
"       .attr(\"x\", 60)\n " +
"       .style(\"fill\", \"black\");\n " +
"}\n ",
"d3.select(\"#demo-chart\").on(\"click\", dataToBar);\n " +
"\n "];

openComment = false;

writeStyleChar = function(which) {
    if (which === '/' && openComment === false) {
        openComment = true;
        styles = d3.select('#style-text').html() + which;
    } else if (which === '/' && openComment === true) {
        openComment = false;
        styles = d3.select('#style-text').html().replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>');
    } else if (which === ':') {
        styles = d3.select('#style-text').html().replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:');
    } else if (which === ';') {
        styles = d3.select('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>;');
    } else if (which === '{') {
        styles = d3.select('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{');
    } else {
        styles = d3.select('#style-text').html() + which;
    }
    total += which;
    d3.select('#style-text').html(styles);
    if(false) {
        var parent = d3.select('#live-demo');
        parent.select('#script-tag').remove();
        parent.append('script').attr("id", "script-tag").html(total);
    }else {
        d3.select('#style-tag').html(total);
    }
    return;
};

writeStyles = function(message, index, interval) {
    var pre;
    if (index < message.length) {
        pre = document.getElementById('style-text');
        pre.scrollTop = pre.scrollHeight;
        writeStyleChar(message[index++]);
        return setTimeout((function() {
            return writeStyles(message, index, interval);
        }), interval);
    }
    d3.select("#style-text").on("click", function() { writeDemoCode(demoCode[demoIndex++], 0, time); });
};

openString = false;

writeDemoChar = function(which) {
    if (which === '"' && openString === false) {
        openString = true;
        styles = d3.select('#style-text').html() + which;
    } else if (which === '"' && openString === true) {
        openString = false;
        styles = d3.select('#style-text').html().replace(/(\"[a-zA-Z0-9\-\:\#\(\)\.\,]*)$/, function(found) { return '<em class="string">' + found; }) + which + '</em>';
    } else if(openString === false) {
        if (which === '+' || which === '-' || which === ',' || which === '*' || which === '=' || which === '/' || which === ';' || which === '.') {
            styles = d3.select('#style-text').html() + '<em class="operand">' + which + '</em>';
        } else if (which === '0' || which === '1' || which === '2' || which === '3' || which === '4' || which === '5' || which === '6' || which === '7' || which === '8' || which === '9') {
            if (which === '3') {
                var isD3 = false;
                styles = d3.select('#style-text').html().replace(/(d)$/, function(found) { isD3 = true; return '<em class="d3">' + found + '3</em>'; });
                if(isD3 === false) {
                    styles = d3.select('#style-text').html() + '<em class="digit">' + which + '</em>';
                }
            } else {
                styles = d3.select('#style-text').html() + '<em class="digit">' + which + '</em>';
            }
        } else if (which === '(') {
            styles = d3.select('#style-text').html().replace(/([a-zA-Z]*)$/, function(found) { return '<em class="method">' + found + '</em>' }) + which;
        } else if (which === ' ') {
            styles = d3.select('#style-text').html().replace(/(function|var|return)$/, function(found) { return '<em class="keyword">' + found + '</em>' }) + which;
        } else {
            styles = d3.select('#style-text').html() + which;
        }
    }
    else {
        styles = d3.select('#style-text').html() + which;
    }
    demoTotal += which;
    d3.select('#style-text').html(styles);

    return;
};

writeDemoCode = function(message, index, interval) {
    d3.select("#style-text").on("click",null);
    var pre;
    if (index < message.length) {
        pre = document.getElementById('style-text');
        pre.scrollTop = pre.scrollHeight;
        writeDemoChar(message[index++]);
        return setTimeout((function() {
            return writeDemoCode(message, index, interval);
        }), interval);
    }
    d3.select('#live-demo').append('script').attr("class", "script-tag").html(message);
    d3.select("#style-text").on("click", function() { writeDemoCode(demoCode[demoIndex++], 0, time); });
};

d3.select('#live-demo').html("  <style id=\"style-tag\"><\/style><script id=\"script-tag \"\><\/script>\n<div id=\"demo-chart\"></div>\n<pre id=\"style-text\"><\/pre>");

time = 10;

d3.select("#demo-title").on("click", function() {writeStyles(styles, 0, time, false); });

    </script>
  </body>


## style.css
@import url(http://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i);

section {
    background: #ddd;
    padding: 2em;
    font-family: "PT Serif", Baskerville, Georgia;
}

/*table {*/
    /*box-sizing: border-box;*/
    /*margin: 1.6em 0;*/
    /*width: 100%;*/
    /*max-width: 100%;*/
    /*font: 14px sans-serif;*/
    /*background-color: transparent;*/
/*}*/
#follow {
    background: none;
}

.grey {
    color: #777;
}

a:link,
a:visited {
    color: orange;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


.anscombe {
    font: 14px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

text {
    fill: #000;
}

.regression {
    stroke: #CC9933;
}

body {
    background: #ddd;
    color: #ddd;
    font: 300 36px "Helvetica Neue";
    height: 640px;
    margin: 80px 160px 80px 160px;
    overflow: hidden;
    position: relative;
    width: 960px;
}

a:link, a:visited {
    color: #777;
    text-decoration: none;
}

a:hover {
    color: #666;
}

blockquote {
    margin: 0;
}

blockquote:before {
    content: "“";
    position: absolute;
    left: -.4em;
}

blockquote:after {
    content: "”";
    position: absolute;
}

body > ul {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 64px !important;
    padding-bottom: 30px !important;
    text-align: center !important;
}

h1, h2, h3 {
    font-weight: inherit;
    margin: 0;
}

h2, h3 {
    text-align: right;
    font-size: inherit;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

h2 {
    font-size: 24px;
    position: absolute;
}

h3 {
    bottom: -20px;
    font-size: 18px;
}

.invert {
    background: #1f1f1f;
    color: #dcdccc;
}

.invert h2, .invert h3 {
    color: #7f9f7f;
}

.string, .regexp {
    color: #f39;
}

.keyword {
    color: #00c;
}

.comment {
    color: #777;
    font-style: oblique;
}

.number {
    color: #369;
}

.class, .special {
    color: #1181B8;
}

body > svg {
    position: absolute;
    top: -80px;
    left: -160px;
}

#encodings div {
    display: inline-block;
}
.transitions {
    font-size: 20px;
}
.transitions path {
    stroke: #000;
    fill: transparent;
}

iframe {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 90%;
}

.label {
    fill: #777;
}

#nations-chart .year.label {
    font: 500 196px "Helvetica Neue";
    fill: #7e7e7e;
}

#nations-chart .year.label.active {
    fill: #7e7e7e;
}

.overlay {
    fill: none;
    pointer-events: all;
    cursor: ew-resize;
}

#nations-chart {
    margin-left: -40px;
    height: 506px;
}

#nations-chart text {
    font: 10px sans-serif;
}

#nations-chart .dot {
    stroke: #000;
}

#nations-chart .axis path, #nations-chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.graf--pre {
    font-family: Menlo,Monaco,"Courier New",Courier,monospace;
    font-size: 16px;
    background: rgba(0,0,0,0.05);
    margin-bottom: 20px;
    padding: 20px;
    white-space: pre-wrap;
}

#style-text {
    font-size: 15px;
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; }
	</style>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<section>
	<h1 id="demo-title">"Live" Demo</h1>
	<div id="demo-chart"></div>
	<div id="live-demo"></div>
	</section>
	<script>
	var openComment, styles, time, writeStyleChar, writeStyles, total = "";
	var writeDemoChar, writeDemoCode, demoIndex = 0, demoCode, demoTotal = "";

	styles =
	"/* \n " +
	"* Inspired by pen#PwLXXP\n " +
	"*/\n\n" +
	"pre { \n " +
	"position: fixed; width: 48%;\n " +
	"top: 30px; bottom: 50px; left: 26%;\n " +
	"transition: left 500ms;\n " +
	"background-color: #313744; color: #a6c3d4;\n " +
	"border: 1px solid rgba(0,0,0,0.2);\n " +
	"padding: 24px 12px;\n " +
	"box-sizing: border-box;\n " +
	"border-radius: 3px;\n " +
	"box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);\n" +
	"}\n\n\n" +
	"\/* \n " +
	"* Syntax highlighting \n " +
	"*\/\n\n" +
	"pre em:not(.comment) { font-style: normal; }\n\n" +
	".comment { color: #707e84; }\n" +
	".selector { color: #c66c75; }\n" +
	".selector .key { color: #c66c75; }\n" +
	".key { color: #c7ccd4; }\n" +
	".keyword { color: #b48ead; }\n" +
	".operand { color: #ebcb8b; }\n" +
	".method { color: #38b6ad; }\n" +
	".string { color: #a3be8c; }\n" +
	".digit { color: #dbdbdb; }\n" +
	".d3 { color: #9b65a1; }\n" +
	".value { color: #d5927b; }\n\n\n" +
	"pre { left: 50%; }\n\n\n" +

	"#live-demo {\n " +
	"color: #fff;\n " +
	"font-size: 13px; line-height: 1.4;\n " +
	"-webkit-font-smoothing: subpixel-antialiased;\n" +
	"}\n\n" +

	"\/* \n " +
	"* Let's start the D3 code!\n " +
	"*\/\n\n" +
	"";

	demoCode = [" var barchart_data = [63, 39, 31, 53, 25, 32, 99, 69, 51];\n " +
	"\n ",
	"var barchart_m = [200, 60, 200, 60],\n " +
	" barchart_w = 640 - barchart_m[1] - barchart_m[3],\n " +
	" barchart_h = 800 - barchart_m[0] - barchart_m[2];\n " +
	"\n ",
	"var barchart_svg = d3.select(\"#demo-chart\").append(\"svg:svg\");\n ",
	" barchart_svg.style(\"background-color\", \"#1a1c24\");\n ",
	" barchart_svg.attr(\"width\", barchart_w + barchart_m[1] + barchart_m[3]);\n " +
	" barchart_svg.attr(\"height\", barchart_h + barchart_m[0] + barchart_m[2]);\n ",
	"\n " +
	"var barchart_g = barchart_svg.append(\"svg:g\");\n ",
	" barchart_g.attr(\"transform\", \"translate(\" + barchart_m[3] + \",\" + barchart_m[0] + \")\");\n " +
	"\n ",
	"var barchart_bar = barchart_g.selectAll(\"g.bar\")\n " +
	" .data(barchart_data);\n " +
	" barchart_bar.enter().append(\"svg:g\");\n " +
	" barchart_bar.attr(\"class\", \"bar\")\n " +
	" .attr(\"transform\", \nfunction(d, i) { return \"translate(\" + i * 60 + \")\"; });\n " +
	"\n " ,
	"var barchart_x = d3.scale.linear()\n " +
	" .domain([0, d3.max(barchart_data)])\n " +
	" .range([0, barchart_w]);\n " +
	"\n ",
	"var barchart_y = d3.scale.ordinal()\n " +
	" .domain(d3.range(barchart_data.length))\n " +
	" .rangeRoundBands([0, barchart_h], .2);\n " +
	"\n ",
	"barchart_bar.append(\"svg:rect\")\n " +
	" .attr(\"width\", 60)\n " +
	" .attr(\"height\", barchart_y.rangeBand())\n " +
	" .style(\"fill\", \"white\")\n " +
	" .style(\"stroke\", \"black\");\n " +
	"\n ",
	"barchart_bar.append(\"svg:text\")\n " +
	" .attr(\"x\", 60)\n " +
	" .attr(\"y\", barchart_y.rangeBand() \/ 2)\n " +
	" .attr(\"dx\", -20)\n " +
	" .attr(\"dy\", \".35em\")\n " +
	" .attr(\"text-anchor\", \"end\")\n " +
	" .style(\"fill\", \"black\")\n " +
	" .style(\"font-size\", \"24px\")\n " +
	" .text(function(d) { return d; });\n " +
	"\n ",
	"function dataToBar() {\n " +
	" d3.select(\"#demo-chart\").on(\"click\", barToData);\n " +
	" \n " +
	" barchart_bar.transition()\n " +
	" .delay(function(d, i) { return i * 50; })\n " +
	" .duration(1000)\n " +
	" .attr(\"transform\", \nfunction(d, i) { return \"translate(0,\" + barchart_y(i) + \")\"; })\n " +
	" .each(\"end\", toBars);\n " +
	" \n " +
	" function toBars(d, i) {\n " +
	" var transition = d3.select(this).transition()\n " +
	" .duration(1000)\n " +
	" .delay(250);\n " +
	" \n " +
	" transition.select(\"rect\")\n " +
	" .attr(\"width\", barchart_x)\n " +
	" .style(\"fill\", \"steelblue\")\n " +
	" .style(\"stroke-opacity\", 0);\n " +
	" \n " +
	" transition.select(\"text\")\n " +
	" .attr(\"x\", barchart_x)\n " +
	" .style(\"fill\", \"white\");\n " +
	" }\n " +
	"}\n " +
	"\n ",
	"function barToData() {\n " +
	" d3.select(\"#demo-chart\").on(\"click\", dataToBar);\n " +
	" \n " +
	" var move_transition = barchart_bar.transition()\n " +
	" .delay(function(d, i) { return i * 50; })\n " +
	" .duration(1000)\n " +
	" .attr(\"transform\", \nfunction(d, i) { return \"translate(\" + i * 60 + \")\"; });\n " +
	" \n " +
	" move_transition.select(\"rect\")\n " +
	" .attr(\"width\", 60)\n " +
	" .style(\"fill\", \"white\")\n " +
	" .style(\"stroke-opacity\", 1);\n " +
	"\n " +
	" move_transition.select(\"text\")\n " +
	" .attr(\"x\", 60)\n " +
	" .style(\"fill\", \"black\");\n " +
	"}\n ",
	"d3.select(\"#demo-chart\").on(\"click\", dataToBar);\n " +
	"\n "];

	openComment = false;

	writeStyleChar = function(which) {
	if (which === '/' && openComment === false) {
	openComment = true;
	styles = d3.select('#style-text').html() + which;
	} else if (which === '/' && openComment === true) {
	openComment = false;
	styles = d3.select('#style-text').html().replace(/(\/[^\/]\)$/, '<em class="comment">$1/</em>');
	} else if (which === ':') {
	styles = d3.select('#style-text').html().replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:');
	} else if (which === ';') {
	styles = d3.select('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>;');
	} else if (which === '{') {
	styles = d3.select('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{');
	} else {
	styles = d3.select('#style-text').html() + which;
	}
	total += which;
	d3.select('#style-text').html(styles);
	if(false) {
	var parent = d3.select('#live-demo');
	parent.select('#script-tag').remove();
	parent.append('script').attr("id", "script-tag").html(total);
	}else {
	d3.select('#style-tag').html(total);
	}
	return;
	};

	writeStyles = function(message, index, interval) {
	var pre;
	if (index < message.length) {
	pre = document.getElementById('style-text');
	pre.scrollTop = pre.scrollHeight;
	writeStyleChar(message[index++]);
	return setTimeout((function() {
	return writeStyles(message, index, interval);
	}), interval);
	}
	d3.select("#style-text").on("click", function() { writeDemoCode(demoCode[demoIndex++], 0, time); });
	};

	openString = false;

	writeDemoChar = function(which) {
	if (which === '"' && openString === false) {
	openString = true;
	styles = d3.select('#style-text').html() + which;
	} else if (which === '"' && openString === true) {
	openString = false;
	styles = d3.select('#style-text').html().replace(/(\"[a-zA-Z0-9\-\:\#\(\)\.\,]*)$/, function(found) { return '<em class="string">' + found; }) + which + '</em>';
	} else if(openString === false) {
	if (which === '+' \|\| which === '-' \|\| which === ',' \|\| which === '*' \|\| which === '=' \|\| which === '/' \|\| which === ';' \|\| which === '.') {
	styles = d3.select('#style-text').html() + '<em class="operand">' + which + '</em>';
	} else if (which === '0' \|\| which === '1' \|\| which === '2' \|\| which === '3' \|\| which === '4' \|\| which === '5' \|\| which === '6' \|\| which === '7' \|\| which === '8' \|\| which === '9') {
	if (which === '3') {
	var isD3 = false;
	styles = d3.select('#style-text').html().replace(/(d)$/, function(found) { isD3 = true; return '<em class="d3">' + found + '3</em>'; });
	if(isD3 === false) {
	styles = d3.select('#style-text').html() + '<em class="digit">' + which + '</em>';
	}
	} else {
	styles = d3.select('#style-text').html() + '<em class="digit">' + which + '</em>';
	}
	} else if (which === '(') {
	styles = d3.select('#style-text').html().replace(/([a-zA-Z]*)$/, function(found) { return '<em class="method">' + found + '</em>' }) + which;
	} else if (which === ' ') {
	styles = d3.select('#style-text').html().replace(/(function\|var\|return)$/, function(found) { return '<em class="keyword">' + found + '</em>' }) + which;
	} else {
	styles = d3.select('#style-text').html() + which;
	}
	}
	else {
	styles = d3.select('#style-text').html() + which;
	}
	demoTotal += which;
	d3.select('#style-text').html(styles);

	return;
	};

	writeDemoCode = function(message, index, interval) {
	d3.select("#style-text").on("click",null);
	var pre;
	if (index < message.length) {
	pre = document.getElementById('style-text');
	pre.scrollTop = pre.scrollHeight;
	writeDemoChar(message[index++]);
	return setTimeout((function() {
	return writeDemoCode(message, index, interval);
	}), interval);
	}
	d3.select('#live-demo').append('script').attr("class", "script-tag").html(message);
	d3.select("#style-text").on("click", function() { writeDemoCode(demoCode[demoIndex++], 0, time); });
	};

	d3.select('#live-demo').html(" <style id=\"style-tag\"><\/style><script id=\"script-tag \"\><\/script>\n<div id=\"demo-chart\"></div>\n<pre id=\"style-text\"><\/pre>");

	time = 10;

	d3.select("#demo-title").on("click", function() {writeStyles(styles, 0, time, false); });

	</script>
	</body>
	@import url(http://fonts.googleapis.com/css?family=PT+Serif\|PT+Serif:b\|PT+Serif:i);

	section {
	background: #ddd;
	padding: 2em;
	font-family: "PT Serif", Baskerville, Georgia;
	}

	/table {/
	/box-sizing: border-box;/
	/margin: 1.6em 0;/
	/width: 100%;/
	/max-width: 100%;/
	/font: 14px sans-serif;/
	/background-color: transparent;/
	/}/
	#follow {
	background: none;
	}

	.grey {
	color: #777;
	}

	a:link,
	a:visited {
	color: orange;
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	}


	.anscombe {
	font: 14px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	text {
	fill: #000;
	}

	.regression {
	stroke: #CC9933;
	}

	body {
	background: #ddd;
	color: #ddd;
	font: 300 36px "Helvetica Neue";
	height: 640px;
	margin: 80px 160px 80px 160px;
	overflow: hidden;
	position: relative;
	width: 960px;
	}

	a:link, a:visited {
	color: #777;
	text-decoration: none;
	}

	a:hover {
	color: #666;
	}

	blockquote {
	margin: 0;
	}

	blockquote:before {
	content: "“";
	position: absolute;
	left: -.4em;
	}

	blockquote:after {
	content: "”";
	position: absolute;
	}

	body > ul {
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 64px !important;
	padding-bottom: 30px !important;
	text-align: center !important;
	}

	h1, h2, h3 {
	font-weight: inherit;
	margin: 0;
	}

	h2, h3 {
	text-align: right;
	font-size: inherit;
	position: absolute;
	bottom: 50px;
	right: 50px;
	}

	h2 {
	font-size: 24px;
	position: absolute;
	}

	h3 {
	bottom: -20px;
	font-size: 18px;
	}

	.invert {
	background: #1f1f1f;
	color: #dcdccc;
	}

	.invert h2, .invert h3 {
	color: #7f9f7f;
	}

	.string, .regexp {
	color: #f39;
	}

	.keyword {
	color: #00c;
	}

	.comment {
	color: #777;
	font-style: oblique;
	}

	.number {
	color: #369;
	}

	.class, .special {
	color: #1181B8;
	}

	body > svg {
	position: absolute;
	top: -80px;
	left: -160px;
	}

	#encodings div {
	display: inline-block;
	}
	.transitions {
	font-size: 20px;
	}
	.transitions path {
	stroke: #000;
	fill: transparent;
	}

	iframe {
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 90%;
	}

	.label {
	fill: #777;
	}

	#nations-chart .year.label {
	font: 500 196px "Helvetica Neue";
	fill: #7e7e7e;
	}

	#nations-chart .year.label.active {
	fill: #7e7e7e;
	}

	.overlay {
	fill: none;
	pointer-events: all;
	cursor: ew-resize;
	}

	#nations-chart {
	margin-left: -40px;
	height: 506px;
	}

	#nations-chart text {
	font: 10px sans-serif;
	}

	#nations-chart .dot {
	stroke: #000;
	}

	#nations-chart .axis path, #nations-chart .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.graf--pre {
	font-family: Menlo,Monaco,"Courier New",Courier,monospace;
	font-size: 16px;
	background: rgba(0,0,0,0.05);
	margin-bottom: 20px;
	padding: 20px;
	white-space: pre-wrap;
	}

	#style-text {
	font-size: 15px;
	}