A playground for working with d3 nesting.
Last active
November 28, 2019 02:01
-
-
Save shancarter/4748131 to your computer and use it in GitHub Desktop.
Mister Nester
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
license: mit | |
height: 700 |
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
html { | |
font-family: "Helvetica", Arial; | |
} | |
body { | |
margin: 10px 20px; | |
background: #f0f0f0; | |
font-family: "Helvetica"; | |
color: #666; | |
font-weight: 200; | |
} | |
a { | |
color: #004276; | |
} | |
p { | |
font-size: 15px; | |
line-height: 1.5em; | |
margin: 0 0 10px; | |
} | |
h1 { | |
font-family: "ratio", sans-serif; | |
font-size: 60px; | |
line-height: 1em; | |
font-weight: 200; | |
margin-bottom: 8px; | |
} | |
button { | |
background-color: #004276; | |
color: white; | |
border: none; | |
border-radius: 2px; | |
padding: 4px 8px; | |
font-size: 12px; | |
} | |
/* Header */ | |
.header { | |
width: 840px; | |
margin: 0 auto; | |
text-align: center; | |
} | |
.description { | |
font-size: 15px; | |
} | |
/* Converter */ | |
#converter { | |
position: relative; | |
width: 100%; | |
border-top: solid 1px #aaa; | |
border-bottom: solid 1px #aaa; | |
margin: 30px 0; | |
padding: 0 0 20px; | |
overflow: hidden; | |
} | |
.left { | |
position: relative; | |
float: left; | |
width: 49%; | |
/*border-right: solid 1px #ccc;*/ | |
} | |
.right { | |
position: relative; | |
float: right; | |
width: 49%; | |
/*border-left: solid 1px #ccc;*/ | |
} | |
#converter textarea, #converter pre { | |
border: solid 1px #ddd; | |
border-radius: 4px; | |
background: #fff; | |
width: 100%; | |
height: 400px; | |
margin: 0; | |
padding: 0px; | |
font-size: 12px; | |
overflow-y: scroll; | |
font-family: monospace; | |
} | |
#converter .input textarea { | |
height: 185px; | |
} | |
#converter .code textarea { | |
height: 185px; | |
} | |
#converter .output pre { | |
height: 429px; | |
} | |
.snippets { | |
position: absolute; | |
right: 0; | |
} | |
.snippet { | |
font-size: 12px; | |
float: left; | |
margin-left: 10px; | |
} | |
.output button { | |
display: block; | |
margin: 17px 0 | |
/* position: absolute; | |
right: 0; | |
top: 18px;*/ | |
} | |
.controls { | |
width: 100%; | |
height: 40px; | |
} | |
#converter h3 { | |
font-family: "Helvetica"; | |
color: #666; | |
font-weight: 200; | |
font-size: 16px; | |
line-height: 1em; | |
margin: 20px 0; | |
} | |
.output .controls select { | |
width: 150px; | |
} | |
.output .controls h3 { | |
} | |
/* Details */ | |
.details { | |
width: 720px; | |
margin: 0 auto 20px; | |
} |
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
/* | |
github.com style (c) Vasily Polovnyov <vast@whiteants.net> | |
*/ | |
pre code { | |
display: block; padding: 0.5em; | |
color: #333; | |
background: #f8f8ff | |
} | |
pre .comment, | |
pre .template_comment, | |
pre .diff .header, | |
pre .javadoc { | |
color: #998; | |
font-style: italic | |
} | |
pre .keyword, | |
pre .css .rule .keyword, | |
pre .winutils, | |
pre .javascript .title, | |
pre .nginx .title, | |
pre .subst, | |
pre .request, | |
pre .status { | |
color: #333; | |
font-weight: bold | |
} | |
pre .number, | |
pre .hexcolor, | |
pre .ruby .constant { | |
color: #099; | |
} | |
pre .string, | |
pre .tag .value, | |
pre .phpdoc, | |
pre .tex .formula { | |
color: #d14 | |
} | |
pre .title, | |
pre .id { | |
color: #900; | |
font-weight: bold | |
} | |
pre .javascript .title, | |
pre .lisp .title, | |
pre .clojure .title, | |
pre .subst { | |
font-weight: normal | |
} | |
pre .class .title, | |
pre .haskell .type, | |
pre .vhdl .literal, | |
pre .tex .command { | |
color: #458; | |
font-weight: bold | |
} | |
pre .tag, | |
pre .tag .title, | |
pre .rules .property, | |
pre .django .tag .keyword { | |
color: #000080; | |
font-weight: normal | |
} | |
pre .attribute, | |
pre .variable, | |
pre .lisp .body { | |
color: #008080 | |
} | |
pre .regexp { | |
color: #009926 | |
} | |
pre .class { | |
color: #458; | |
font-weight: bold | |
} | |
pre .symbol, | |
pre .ruby .symbol .string, | |
pre .lisp .keyword, | |
pre .tex .special, | |
pre .prompt { | |
color: #990073 | |
} | |
pre .built_in, | |
pre .lisp .title, | |
pre .clojure .built_in { | |
color: #0086b3 | |
} | |
pre .preprocessor, | |
pre .pi, | |
pre .doctype, | |
pre .shebang, | |
pre .cdata { | |
color: #999; | |
font-weight: bold | |
} | |
pre .deletion { | |
background: #fdd | |
} | |
pre .addition { | |
background: #dfd | |
} | |
pre .diff .change { | |
background: #0086b3 | |
} | |
pre .chunk { | |
color: #aaa | |
} |
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
var hljs=new function(){function l(o){return o.replace(/&/gm,"&").replace(/</gm,"<").replace(/>/gm,">")}function b(p){for(var o=p.firstChild;o;o=o.nextSibling){if(o.nodeName=="CODE"){return o}if(!(o.nodeType==3&&o.nodeValue.match(/\s+/))){break}}}function h(p,o){return Array.prototype.map.call(p.childNodes,function(q){if(q.nodeType==3){return o?q.nodeValue.replace(/\n/g,""):q.nodeValue}if(q.nodeName=="BR"){return"\n"}return h(q,o)}).join("")}function a(q){var p=(q.className+" "+q.parentNode.className).split(/\s+/);p=p.map(function(r){return r.replace(/^language-/,"")});for(var o=0;o<p.length;o++){if(e[p[o]]||p[o]=="no-highlight"){return p[o]}}}function c(q){var o=[];(function p(r,s){for(var t=r.firstChild;t;t=t.nextSibling){if(t.nodeType==3){s+=t.nodeValue.length}else{if(t.nodeName=="BR"){s+=1}else{if(t.nodeType==1){o.push({event:"start",offset:s,node:t});s=p(t,s);o.push({event:"stop",offset:s,node:t})}}}}return s})(q,0);return o}function j(x,v,w){var p=0;var y="";var r=[];function t(){if(x.length&&v.length){if(x[0].offset!=v[0].offset){return(x[0].offset<v[0].offset)?x:v}else{return v[0].event=="start"?x:v}}else{return x.length?x:v}}function s(A){function z(B){return" "+B.nodeName+'="'+l(B.value)+'"'}return"<"+A.nodeName+Array.prototype.map.call(A.attributes,z).join("")+">"}while(x.length||v.length){var u=t().splice(0,1)[0];y+=l(w.substr(p,u.offset-p));p=u.offset;if(u.event=="start"){y+=s(u.node);r.push(u.node)}else{if(u.event=="stop"){var o,q=r.length;do{q--;o=r[q];y+=("</"+o.nodeName.toLowerCase()+">")}while(o!=u.node);r.splice(q,1);while(q<r.length){y+=s(r[q]);q++}}}}return y+l(w.substr(p))}function f(q){function o(s,r){return RegExp(s,"m"+(q.cI?"i":"")+(r?"g":""))}function p(y,w){if(y.compiled){return}y.compiled=true;var s=[];if(y.k){var r={};function z(A,t){t.split(" ").forEach(function(B){var C=B.split("|");r[C[0]]=[A,C[1]?Number(C[1]):1];s.push(C[0])})}y.lR=o(y.l||hljs.IR,true);if(typeof y.k=="string"){z("keyword",y.k)}else{for(var x in y.k){if(!y.k.hasOwnProperty(x)){continue}z(x,y.k[x])}}y.k=r}if(w){if(y.bWK){y.b="\\b("+s.join("|")+")\\s"}y.bR=o(y.b?y.b:"\\B|\\b");if(!y.e&&!y.eW){y.e="\\B|\\b"}if(y.e){y.eR=o(y.e)}y.tE=y.e||"";if(y.eW&&w.tE){y.tE+=(y.e?"|":"")+w.tE}}if(y.i){y.iR=o(y.i)}if(y.r===undefined){y.r=1}if(!y.c){y.c=[]}for(var v=0;v<y.c.length;v++){if(y.c[v]=="self"){y.c[v]=y}p(y.c[v],y)}if(y.starts){p(y.starts,w)}var u=[];for(var v=0;v<y.c.length;v++){u.push(y.c[v].b)}if(y.tE){u.push(y.tE)}if(y.i){u.push(y.i)}y.t=u.length?o(u.join("|"),true):{exec:function(t){return null}}}p(q)}function d(D,E){function o(r,M){for(var L=0;L<M.c.length;L++){var K=M.c[L].bR.exec(r);if(K&&K.index==0){return M.c[L]}}}function s(K,r){if(K.e&&K.eR.test(r)){return K}if(K.eW){return s(K.parent,r)}}function t(r,K){return K.i&&K.iR.test(r)}function y(L,r){var K=F.cI?r[0].toLowerCase():r[0];return L.k.hasOwnProperty(K)&&L.k[K]}function G(){var K=l(w);if(!A.k){return K}var r="";var N=0;A.lR.lastIndex=0;var L=A.lR.exec(K);while(L){r+=K.substr(N,L.index-N);var M=y(A,L);if(M){v+=M[1];r+='<span class="'+M[0]+'">'+L[0]+"</span>"}else{r+=L[0]}N=A.lR.lastIndex;L=A.lR.exec(K)}return r+K.substr(N)}function z(){if(A.sL&&!e[A.sL]){return l(w)}var r=A.sL?d(A.sL,w):g(w);if(A.r>0){v+=r.keyword_count;B+=r.r}return'<span class="'+r.language+'">'+r.value+"</span>"}function J(){return A.sL!==undefined?z():G()}function I(L,r){var K=L.cN?'<span class="'+L.cN+'">':"";if(L.rB){x+=K;w=""}else{if(L.eB){x+=l(r)+K;w=""}else{x+=K;w=r}}A=Object.create(L,{parent:{value:A}});B+=L.r}function C(K,r){w+=K;if(r===undefined){x+=J();return 0}var L=o(r,A);if(L){x+=J();I(L,r);return L.rB?0:r.length}var M=s(A,r);if(M){if(!(M.rE||M.eE)){w+=r}x+=J();do{if(A.cN){x+="</span>"}A=A.parent}while(A!=M.parent);if(M.eE){x+=l(r)}w="";if(M.starts){I(M.starts,"")}return M.rE?0:r.length}if(t(r,A)){throw"Illegal"}w+=r;return r.length||1}var F=e[D];f(F);var A=F;var w="";var B=0;var v=0;var x="";try{var u,q,p=0;while(true){A.t.lastIndex=p;u=A.t.exec(E);if(!u){break}q=C(E.substr(p,u.index-p),u[0]);p=u.index+q}C(E.substr(p));return{r:B,keyword_count:v,value:x,language:D}}catch(H){if(H=="Illegal"){return{r:0,keyword_count:0,value:l(E)}}else{throw H}}}function g(s){var o={keyword_count:0,r:0,value:l(s)};var q=o;for(var p in e){if(!e.hasOwnProperty(p)){continue}var r=d(p,s);r.language=p;if(r.keyword_count+r.r>q.keyword_count+q.r){q=r}if(r.keyword_count+r.r>o.keyword_count+o.r){q=o;o=r}}if(q.language){o.second_best=q}return o}function i(q,p,o){if(p){q=q.replace(/^((<[^>]+>|\t)+)/gm,function(r,v,u,t){return v.replace(/\t/g,p)})}if(o){q=q.replace(/\n/g,"<br>")}return q}function m(r,u,p){var v=h(r,p);var t=a(r);if(t=="no-highlight"){return}var w=t?d(t,v):g(v);t=w.language;var o=c(r);if(o.length){var q=document.createElement("pre");q.innerHTML=w.value;w.value=j(o,c(q),v)}w.value=i(w.value,u,p);var s=r.className;if(!s.match("(\\s|^)(language-)?"+t+"(\\s|$)")){s=s?(s+" "+t):t}r.innerHTML=w.value;r.className=s;r.result={language:t,kw:w.keyword_count,re:w.r};if(w.second_best){r.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function n(){if(n.called){return}n.called=true;Array.prototype.map.call(document.getElementsByTagName("pre"),b).filter(Boolean).forEach(function(o){m(o,hljs.tabReplace)})}function k(){window.addEventListener("DOMContentLoaded",n,false);window.addEventListener("load",n,false)}var e={};this.LANGUAGES=e;this.highlight=d;this.highlightAuto=g;this.fixMarkup=i;this.highlightBlock=m;this.initHighlighting=n;this.initHighlightingOnLoad=k;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.inherit=function(q,r){var o={};for(var p in q){o[p]=q[p]}if(r){for(var p in r){o[p]=r[p]}}return o}}();hljs.LANGUAGES.javascript=function(a){return{k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const",literal:"true false null undefined NaN Infinity"},c:[a.ASM,a.QSM,a.CLCM,a.CBLCLM,a.CNM,{b:"("+a.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[a.CLCM,a.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",i:"\\n",c:[{b:"\\\\/"}]},{b:"<",e:">;",sL:"xml"}],r:0},{cN:"function",bWK:true,e:"{",k:"function",c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[a.CLCM,a.CBLCLM],i:"[\"'\\(]"}],i:"\\[|%"}]}}(hljs);hljs.LANGUAGES.xml=function(a){var c="[A-Za-z0-9\\._:-]+";var b={eW:true,c:[{cN:"attribute",b:c,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},b]}]}}(hljs);hljs.LANGUAGES.json=function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}}(hljs); |
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> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Mister Nester</title> | |
<link rel="stylesheet" href="github.css"> | |
<link rel="stylesheet" href="converter.css"> | |
</head> | |
<body> | |
<div class="header"> | |
<h1>Hello, I’m Mister Nester</h1> | |
<p class="description">I’m a simple console for learning and experimenting with <a href="http://d3js.org">d3.js</a> data <a href="http://bl.ocks.org/shancarter/4748131">View source</a></p> | |
</div> | |
<div id="converter"></div> | |
<div class="details"> | |
<p></p> | |
</div> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="highlight.js"></script> | |
<script src="main.js"></script> | |
</body> | |
</html> |
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
var dataSample = "fips\ttotalpop\tpctHispanic\tyear\n6001\t1510271\t0.225\t2010\n6003\t1175\t0.071\t2010\n6005\t38091\t0.125\t2010\n6007\t220000\t0.141\t2010\n6009\t45578\t0.103\t2010\n6011\t21419\t0.551\t2010\n6013\t1049025\t0.244\t2010\n6015\t28610\t0.178\t2010\n6017\t181058\t0.121\t2010\n6019\t930450\t0.503\t2010\n6021\t28122\t0.375\t2010\n6023\t134623\t0.098\t2010\n6025\t174528\t0.804\t2010\n6027\t18546\t0.194\t2010\n6029\t839631\t0.492\t2010\n6031\t152982\t0.509\t2010\n6033\t64665\t0.171\t2010\n6035\t34895\t0.175\t2010\n6037\t9818605\t0.477\t2010\n6039\t150865\t0.537\t2010\n6041\t252409\t0.155\t2010\n6043\t18251\t0.092\t2010\n6045\t87841\t0.222\t2010\n6047\t255793\t0.549\t2010\n6049\t9686\t0.139\t2010\n6051\t14202\t0.265\t2010\n6053\t415057\t0.554\t2010\n6055\t136484\t0.322\t2010\n6057\t98764\t0.085\t2010\n6059\t3010232\t0.337\t2010\n6061\t348432\t0.128\t2010\n6063\t20007\t0.080\t2010\n6065\t2189641\t0.455\t2010\n6067\t1418788\t0.216\t2010\n6069\t55269\t0.564\t2010\n6071\t2035210\t0.492\t2010\n6073\t3095313\t0.320\t2010\n6075\t805235\t0.151\t2010\n6077\t685306\t0.389\t2010\n6079\t269637\t0.208\t2010\n6081\t718451\t0.254\t2010\n6083\t423895\t0.429\t2010\n6085\t1781642\t0.269\t2010\n6087\t262382\t0.320\t2010\n6089\t177223\t0.084\t2010\n6091\t3240\t0.083\t2010\n6093\t44900\t0.103\t2010\n6095\t413344\t0.240\t2010\n6097\t483878\t0.249\t2010\n6099\t514453\t0.419\t2010\n6101\t94737\t0.288\t2010\n6103\t63463\t0.219\t2010\n6105\t13786\t0.070\t2010\n6107\t442179\t0.606\t2010\n6109\t55365\t0.107\t2010\n6111\t823318\t0.403\t2010\n6113\t200849\t0.303\t2010\n6115\t72155\t0.250\t2010\n6001\t1443741\t0.190\t2000\n6003\t1208\t0.078\t2000\n6005\t35100\t0.089\t2000\n6007\t203171\t0.105\t2000\n6009\t40554\t0.068\t2000\n6011\t18804\t0.465\t2000\n6013\t948816\t0.177\t2000\n6015\t27507\t0.139\t2000\n6017\t156299\t0.093\t2000\n6019\t799407\t0.440\t2000\n6021\t26453\t0.296\t2000\n6023\t126518\t0.065\t2000\n6025\t142361\t0.722\t2000\n6027\t17945\t0.126\t2000\n6029\t661645\t0.384\t2000\n6031\t129461\t0.436\t2000\n6033\t58309\t0.114\t2000\n6035\t33828\t0.138\t2000\n6037\t9519338\t0.446\t2000\n6039\t123109\t0.443\t2000\n6041\t247289\t0.111\t2000\n6043\t17130\t0.078\t2000\n6045\t86265\t0.165\t2000\n6047\t210554\t0.453\t2000\n6049\t9449\t0.115\t2000\n6051\t12853\t0.177\t2000\n6053\t401762\t0.468\t2000\n6055\t124279\t0.237\t2000\n6057\t92033\t0.057\t2000\n6059\t2846289\t0.308\t2000\n6061\t248399\t0.097\t2000\n6063\t20824\t0.057\t2000\n6065\t1545387\t0.362\t2000\n6067\t1223499\t0.160\t2000\n6069\t53234\t0.479\t2000\n6071\t1709434\t0.392\t2000\n6073\t2813833\t0.267\t2000\n6075\t776733\t0.141\t2000\n6077\t563598\t0.305\t2000\n6079\t246681\t0.163\t2000\n6081\t707161\t0.219\t2000\n6083\t399347\t0.342\t2000\n6085\t1682585\t0.240\t2000\n6087\t255602\t0.268\t2000\n6089\t163256\t0.055\t2000\n6091\t3555\t0.060\t2000\n6093\t44301\t0.076\t2000\n6095\t394542\t0.176\t2000\n6097\t458614\t0.173\t2000\n6099\t446997\t0.317\t2000\n6101\t78930\t0.222\t2000\n6103\t56039\t0.158\t2000\n6105\t13022\t0.040\t2000\n6107\t368021\t0.508\t2000\n6109\t54501\t0.082\t2000\n6111\t753197\t0.334\t2000\n6113\t168660\t0.259\t2000\n6115\t60219\t0.174\t2000\n6001\t1279182\t0.142\t1990\n6003\t1113\t0.066\t1990\n6005\t30039\t0.084\t1990\n6007\t182120\t0.075\t1990\n6009\t31998\t0.054\t1990\n6011\t16275\t0.333\t1990\n6013\t803732\t0.114\t1990\n6015\t23460\t0.103\t1990\n6017\t125995\t0.070\t1990\n6019\t667490\t0.355\t1990\n6021\t24798\t0.200\t1990\n6023\t119118\t0.042\t1990\n6025\t109303\t0.658\t1990\n6027\t18281\t0.084\t1990\n6029\t543477\t0.280\t1990\n6031\t101469\t0.341\t1990\n6033\t50631\t0.072\t1990\n6035\t27598\t0.104\t1990\n6037\t8863164\t0.378\t1990\n6039\t88090\t0.345\t1990\n6041\t230096\t0.078\t1990\n6043\t14302\t0.049\t1990\n6045\t80345\t0.103\t1990\n6047\t178403\t0.326\t1990\n6049\t9678\t0.072\t1990\n6051\t9956\t0.113\t1990\n6053\t355660\t0.336\t1990\n6055\t110765\t0.144\t1990\n6057\t78510\t0.042\t1990\n6059\t2410556\t0.234\t1990\n6061\t172796\t0.080\t1990\n6063\t19739\t0.046\t1990\n6065\t1170413\t0.263\t1990\n6067\t1041219\t0.117\t1990\n6069\t36697\t0.458\t1990\n6071\t1418380\t0.267\t1990\n6073\t2498016\t0.204\t1990\n6075\t723959\t0.139\t1990\n6077\t480628\t0.234\t1990\n6079\t217162\t0.133\t1990\n6081\t649623\t0.176\t1990\n6083\t369608\t0.266\t1990\n6085\t1497577\t0.210\t1990\n6087\t229734\t0.204\t1990\n6089\t147036\t0.038\t1990\n6091\t3318\t0.055\t1990\n6093\t43531\t0.059\t1990\n6095\t340421\t0.134\t1990\n6097\t388222\t0.106\t1990\n6099\t370522\t0.218\t1990\n6101\t64415\t0.164\t1990\n6103\t49625\t0.103\t1990\n6105\t13063\t0.033\t1990\n6107\t311921\t0.388\t1990\n6109\t48456\t0.077\t1990\n6111\t669016\t0.264\t1990\n6113\t141092\t0.200\t1990\n6115\t58228\t0.116\t1990\n6001\t1105379\t0.118\t1980\n6003\t1097\t0.038\t1980\n6005\t19314\t0.047\t1980\n6007\t143851\t0.052\t1980\n6009\t20710\t0.044\t1980\n6011\t12791\t0.195\t1980\n6013\t656380\t0.085\t1980\n6015\t18217\t0.056\t1980\n6017\t85812\t0.046\t1980\n6019\t514621\t0.293\t1980\n6021\t21350\t0.119\t1980\n6023\t108514\t0.034\t1980\n6025\t92110\t0.558\t1980\n6027\t17895\t0.061\t1980\n6029\t403089\t0.216\t1980\n6031\t73738\t0.269\t1980\n6033\t36366\t0.052\t1980\n6035\t21661\t0.065\t1980\n6037\t7477503\t0.276\t1980\n6039\t63116\t0.268\t1980\n6041\t222568\t0.041\t1980\n6043\t11108\t0.045\t1980\n6045\t66738\t0.055\t1980\n6047\t134560\t0.253\t1980\n6049\t8610\t0.041\t1980\n6051\t8577\t0.047\t1980\n6053\t290444\t0.259\t1980\n6055\t99199\t0.087\t1980\n6057\t51645\t0.030\t1980\n6059\t1932709\t0.148\t1980\n6061\t117247\t0.070\t1980\n6063\t17340\t0.037\t1980\n6065\t663166\t0.188\t1980\n6067\t783381\t0.095\t1980\n6069\t25005\t0.457\t1980\n6071\t895016\t0.185\t1980\n6073\t1861846\t0.148\t1980\n6075\t678974\t0.123\t1980\n6077\t347342\t0.192\t1980\n6079\t155435\t0.095\t1980\n6081\t587329\t0.125\t1980\n6083\t298694\t0.185\t1980\n6085\t1295071\t0.175\t1980\n6087\t188141\t0.147\t1980\n6089\t115715\t0.030\t1980\n6091\t3073\t0.064\t1980\n6093\t39732\t0.048\t1980\n6095\t235203\t0.105\t1980\n6097\t299681\t0.069\t1980\n6099\t265900\t0.150\t1980\n6101\t52246\t0.117\t1980\n6103\t38888\t0.055\t1980\n6105\t11858\t0.027\t1980\n6107\t245738\t0.298\t1980\n6109\t33928\t0.052\t1980\n6111\t529174\t0.214\t1980\n6113\t113374\t0.171\t1980\n6115\t49733\t0.088\t1980\n6001\t1073180\t0.126\t1970\n6003\t510\tNA\t1970\n6005\t11795\t0.076\t1970\n6007\t101969\t0.051\t1970\n6009\t13585\t0.057\t1970\n6011\t12430\t0.172\t1970\n6013\t558389\t0.093\t1970\n6015\t14580\t0.046\t1970\n6017\t43833\t0.044\t1970\n6019\t413053\t0.252\t1970\n6021\t17521\t0.106\t1970\n6023\t99692\t0.040\t1970\n6025\t74492\t0.460\t1970\n6027\t15571\t0.073\t1970\n6029\t329162\t0.168\t1970\n6031\t66019\t0.247\t1970\n6033\t19548\t0.045\t1970\n6035\t16796\t0.078\t1970\n6037\t7036457\t0.183\t1970\n6039\t41519\t0.240\t1970\n6041\t206038\t0.058\t1970\n6043\t6015\t0.026\t1970\n6045\t51101\t0.050\t1970\n6047\t104629\t0.229\t1970\n6049\t7469\t0.078\t1970\n6051\t4016\t0.012\t1970\n6053\t250071\t0.211\t1970\n6055\t79140\t0.075\t1970\n6057\t26346\t0.046\t1970\n6059\t1420386\t0.113\t1970\n6061\t77306\t0.093\t1970\n6063\t11707\t0.038\t1970\n6065\t459072\t0.173\t1970\n6067\t631498\t0.092\t1970\n6069\t18226\t0.449\t1970\n6071\t681092\t0.160\t1970\n6073\t1357387\t0.128\t1970\n6075\t715673\t0.142\t1970\n6077\t290207\t0.180\t1970\n6079\t105690\t0.111\t1970\n6081\t556234\t0.113\t1970\n6083\t264324\t0.173\t1970\n6085\t1064714\t0.175\t1970\n6087\t123788\t0.118\t1970\n6089\t77640\t0.038\t1970\n6091\t2359\t0.144\t1970\n6093\t33231\t0.054\t1970\n6095\t169941\t0.108\t1970\n6097\t204885\t0.074\t1970\n6099\t194506\t0.126\t1970\n6101\t41935\t0.092\t1970\n6103\t29517\t0.058\t1970\n6105\t7615\t0.022\t1970\n6107\t188322\t0.262\t1970\n6109\t22169\t0.070\t1970\n6111\t376430\t0.196\t1970\n6113\t91788\t0.167\t1970\n6115\t44736\t0.074\t1970"; | |
var codeSamples = [ | |
// Default | |
{ label: "By Year", code: "d3.nest()\n .key(function(d) { return d.year; })\n .map(data);"}, | |
{ label: "By Year, By County", code: "d3.nest()\n .key(function(d) { return d.year; })\n .key(function(d) { return d.fips; })\n .map(data);"}, | |
{ label: "Sum By Year", code: "d3.nest()\n .key(function(d) { return d.year; })\n .rollup(function(values) { return d3.sum(values, function(d) {return +d.totalpop; }) })\n .map(data);"}, | |
{ label: "Detailed Summaries", code: "d3.nest()\n .key(function(d) { return d.year; })\n .rollup(function(values) {\n return {\n totalHispanics: Math.round(d3.sum(values, function(d) { return d.totalpop * d.pctHispanic })),\n totalPop: d3.sum(values, function(d) { return d.totalpop })\n };\n })\n .map(data);"}, | |
{ label: "Arrays Instead of Maps", code: "d3.nest()\n .key(function(d) { return d.year; })\n .rollup(function(values) {\n return {\n totalHispanics: Math.round(d3.sum(values, function(d) { return d.totalpop * d.pctHispanic })),\n totalPop: d3.sum(values, function(d) { return d.totalpop })\n };\n })\n .entries(data);"} | |
]; | |
var html = d3.select("#converter"); | |
var left = html.append("div") | |
.classed("left", true); | |
var input = left.append("div") | |
.classed("input", true); | |
input.append("h3") | |
.text("Input CSV or TSV"); | |
input.append("textarea"); | |
var code = left.append("div") | |
.classed("code", true); | |
var snippets = code.append("div") | |
.classed("snippets", true); | |
snippets.selectAll("snippet") | |
.data(codeSamples) | |
.enter().append("a") | |
.classed("snippet", true) | |
.text(function(d) { return d.label; }) | |
.attr("href", "#") | |
.on("click", function(d) { | |
d3.event.preventDefault(); | |
code.select("textarea") | |
.property("value", d.code); | |
update(); | |
}); | |
code.append("h3") | |
.text("Code"); | |
code.append("textarea"); | |
var right = html.append("div") | |
.classed("right", true); | |
var output = right.append("div") | |
.classed("output", true); | |
output.append("button") | |
.text("Update Output") | |
.on("click", update); | |
var codeOutput = output.append("pre"); | |
codeOutput.append("code"); | |
input.select("textarea") | |
.property("value", dataSample); | |
code.select("textarea") | |
.property("value", codeSamples[0].code); | |
update(); | |
function update() { | |
var t = input.select("textarea") | |
.property("value"); | |
var c = code.select("textarea") | |
.property("value"); | |
var data = (t.indexOf("\t") < 0 ? d3.csv : d3.tsv).parse(t); | |
var out = eval(c); | |
codeOutput.html(JSON.stringify(out, false, 2)); | |
hljs.highlightBlock(codeOutput.node()) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment