Built with blockbuilder.org
Created
October 1, 2015 22:24
-
-
Save anonymous/64f617acf7630fc47fac to your computer and use it in GitHub Desktop.
Self-Create
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> | |
<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> | |
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
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment