Self-Create

forked from anonymous's block: Self-Create

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js