based on D3js
Created
December 13, 2012 11:06
-
-
Save zbryikt/4275777 to your computer and use it in GitHub Desktop.
Bar-Style Data Visualization Library
This file contains hidden or 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
| [{ | |
| "name": "總預算", "amount": "7075", | |
| "children": [ | |
| { | |
| "name": "教育支出", "amount": "4025", | |
| "children": [ | |
| {"name": "教育部", "amount": "3411" }, | |
| {"name": "補助縣市", "amount": "591" }, | |
| {"name": "原住民委員會", "amount": "12" }, | |
| {"name": "退除役官兵委員會", "amount": "11" } | |
| ] | |
| }, | |
| { | |
| "name": "教育支出", "amount": "2025", | |
| "children": [ | |
| {"name": "教育部", "amount": "1411" }, | |
| {"name": "補助縣市", "amount": "591" }, | |
| {"name": "原住民委員會", "amount": "12" }, | |
| {"name": "退除役官兵委員會", "amount": "11" } | |
| ] | |
| }, | |
| { | |
| "name": "教育支出", "amount": "1025", | |
| "children": [ | |
| {"name": "教育部", "amount": "411" }, | |
| {"name": "補助縣市", "amount": "591" }, | |
| {"name": "原住民委員會", "amount": "12" }, | |
| {"name": "退除役官兵委員會", "amount": "11" } | |
| ] | |
| } | |
| ] | |
| } | |
| ] |
This file contains hidden or 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, body { | |
| width: 100%; | |
| height: 100%; | |
| } |
This file contains hidden or 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 lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>block display of sorted values</title><link rel="shortcut icon" href="favicon.ico"><script type="text/javascript" src="/js/jquery.1.8.2.js"></script><script type="text/javascript" src="/js/d3.v2.min.js"></script><div id="script" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></div><div id="script" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></div># d3.v3 differs with d3.v2. check json callback args format!<link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body></body></html> |
This file contains hidden or 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
| !!! 5 | |
| html(lang="en") | |
| head | |
| meta(charset='utf-8') | |
| meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1") | |
| meta(name='viewport', content='width=device-width') | |
| title block display of sorted values | |
| link(rel="shortcut icon",href="favicon.ico") | |
| script(type="text/javascript",src="/js/jquery.1.8.2.js") | |
| script(type="text/javascript",src="/js/d3.v2.min.js") | |
| #script(type="text/javascript",src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js") | |
| #script(type="text/javascript",src="http://d3js.org/d3.v3.min.js") | |
| # d3.v3 differs with d3.v2. check json callback args format! | |
| link(rel="stylesheet",type="text/css",href="index.css") | |
| script(type="text/javascript",src="index.js") | |
| body |
This file contains hidden or 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
| (function(){ | |
| $(document).ready(function(){ | |
| var ref$, width, height, parse, level, this$ = this; | |
| ref$ = [700, 500], width = ref$[0], height = ref$[1]; | |
| parse = function(level, parent, graph, accum, flat){ | |
| var ref$, c, i$, len$, obj, results$ = []; | |
| flat.push(graph); | |
| graph.amount = parseInt(graph.amount); | |
| ref$ = { | |
| level: level, | |
| parent: parent, | |
| accum: accum | |
| }, graph.level = ref$.level, graph.parent = ref$.parent, graph.accum = ref$.accum; | |
| console.log(graph.name + ":" + (width * graph.amount) / ((((ref$ = graph.parent) != null ? ref$.amount : void 8) || graph.amount) * 100)); | |
| graph.coord = [ | |
| { | |
| tx: 0, | |
| ty: 0, | |
| sx: width / 100, | |
| sy: height / 100, | |
| r: 0 | |
| }, { | |
| tx: 0, | |
| ty: Math.round(height * graph.accum / (((ref$ = graph.parent) != null ? ref$.amount : void 8) || 1)), | |
| sx: width / 100, | |
| sy: (height * graph.amount) / ((((ref$ = graph.parent) != null ? ref$.amount : void 8) || graph.amount) * 100), | |
| r: 0 | |
| }, { | |
| tx: Math.round(width * graph.accum / (((ref$ = graph.parent) != null ? ref$.amount : void 8) || 1)), | |
| ty: ((ref$ = graph.parent) != null ? ref$.coord[1].ty : void 8) || 0, | |
| sx: (width * graph.amount) / ((((ref$ = graph.parent) != null ? ref$.amount : void 8) || graph.amount) * 100), | |
| sy: ((ref$ = graph.parent) != null ? ref$.coord[1].sy : void 8) || 0, | |
| r: 0 | |
| } | |
| ]; | |
| if (!graph.children) { | |
| return; | |
| } | |
| c = 0; | |
| graph.children.sort(function(a, b){ | |
| return b.amount - a.amount; | |
| }); | |
| for (i$ = 0, len$ = (ref$ = graph.children).length; i$ < len$; ++i$) { | |
| obj = ref$[i$]; | |
| parse(level + 1, graph, obj, c, flat); | |
| results$.push(c += obj.amount); | |
| } | |
| return results$; | |
| }; | |
| level = 0; | |
| return d3.json("/gist/4275777/x.json", function(graph){ | |
| var flat, svg, defs, count, group1, group2, cc, fa, rect, text; | |
| flat = []; | |
| parse(0, null, graph[0], 0, flat); | |
| console.log(flat.map(function(it){ | |
| return it.name; | |
| })); | |
| svg = d3.select('body').append('svg').attr('width', '100%').attr('height', '100%'); | |
| defs = svg.append('defs'); | |
| defs.append('path').attr('id', 'text-path').attr('d', "M-43 0 L43 0"); | |
| count = 1; | |
| group1 = svg.selectAll('g').data(flat).enter().append('g').attr('transform', function(it){ | |
| var ref$, ref1$, tx, ty; | |
| ref$ = { | |
| tx: (ref$ = it.coord[(ref1$ = it.level - level) > 0 ? ref1$ : 0]).tx, | |
| ty: ref$.ty | |
| }, tx = ref$.tx, ty = ref$.ty; | |
| console.log("translate(" + tx + "," + ty + ")"); | |
| return "translate(" + tx + "," + ty + ")"; | |
| }); | |
| group2 = group1.append('g').attr('transform', function(it){ | |
| var ref$; | |
| console.log("rotate(" + it.coord[(ref$ = it.level - level) > 0 ? ref$ : 0].r + ")"); | |
| return "rotate(" + it.coord[(ref$ = it.level - level) > 0 ? ref$ : 0].r + ")"; | |
| }); | |
| cc = 0; | |
| fa = ['#f00', '#f90', '#ff0', '#9f0', '#0f0', '#0f9', '#0ff', '#09f', '#00f', '#f0f']; | |
| rect = group2.append('rect').attr('x', 0).attr('y', 0).attr('width', '100px').attr('height', '100px').attr('fill', function(){ | |
| return fa[cc = (cc + 1) % 10]; | |
| }).attr('transform', function(it){ | |
| var ref$, ref1$, sx, sy; | |
| ref$ = { | |
| sx: (ref$ = it.coord[(ref1$ = it.level - level) > 0 ? ref1$ : 0]).sx, | |
| sy: ref$.sy | |
| }, sx = ref$.sx, sy = ref$.sy; | |
| console.log("scale(" + sx + "," + sy + ")"); | |
| return "scale(" + sx + "," + sy + ")"; | |
| }); | |
| return text = group2.append('text').attr('width', '120px').attr('x', 0).attr('y', 0).attr('stroke', '#000').attr('stroke-width', '0.5px').attr('font-size', '12px').attr('method', 'stretch').attr('lengthAdjust', 'spacingAndGlyphs').attr('text-anchodr', 'middle').append('textPath').attr("xlink:href", '#text-path').attr('textLength', 96).text(function(it){ | |
| return it.name; | |
| }); | |
| }); | |
| }); | |
| }).call(this); |
This file contains hidden or 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
| <- $ document .ready | |
| [width,height] = [700 500] | |
| parse = (level, parent, graph, accum, flat) -> | |
| flat.push graph | |
| graph.amount = parseInt graph.amount | |
| graph.{level,parent,accum} = {level,parent,accum} | |
| console.log graph.name+":"+(width*graph.amount)/((graph.parent?.amount || graph.amount)*100) | |
| graph.coord = [ | |
| { /* level 0 */ | |
| tx: 0 | |
| ty: 0 | |
| sx: width/100 | |
| sy: height/100 | |
| r: 0 | |
| }, { /* level 1 */ | |
| tx: 0 | |
| ty: Math.round height*graph.accum/(graph.parent?.amount || 1) | |
| sx: width/100 | |
| sy: (height*graph.amount)/((graph.parent?.amount || graph.amount)*100) | |
| r: 0 | |
| }, { /* level 2 */ | |
| tx: Math.round width*graph.accum/(graph.parent?.amount || 1) | |
| ty: (graph.parent?.coord[1].ty || 0) | |
| sx: (width*graph.amount)/((graph.parent?.amount || graph.amount)*100) | |
| sy: (graph.parent?.coord[1].sy || 0) | |
| r: 0 | |
| } | |
| ] | |
| return if not graph.children | |
| c = 0 | |
| graph.children.sort (a,b) -> b.amount - a.amount | |
| for obj in graph.children | |
| parse level+1, graph, obj, c, flat | |
| c += obj.amount | |
| level = 0 | |
| d3.json "/gist/4275777/x.json", (graph) ~> | |
| flat = [] | |
| parse 0, null, graph[0], 0, flat | |
| console.log flat.map (.name) | |
| svg = d3.select \body .append \svg | |
| .attr \width \100% | |
| .attr \height \100% | |
| defs = svg.append \defs | |
| defs.append \path | |
| .attr \id \text-path | |
| .attr \d "M-43 0 L43 0" | |
| count = 1 | |
| group1 = svg.selectAll \g .data flat .enter! .append \g | |
| .attr \transform -> | |
| {tx,ty} = it.coord[it.level - level >? 0].{tx,ty} | |
| console.log "translate(#{tx},#{ty})" | |
| "translate(#{tx},#{ty})" | |
| group2 = group1.append \g | |
| .attr \transform -> | |
| console.log "rotate(#{it.coord[it.level - level >? 0].r})" | |
| "rotate(#{it.coord[it.level - level >? 0].r})" | |
| cc = 0 | |
| fa = <[#f00 #f90 #ff0 #9f0 #0f0 #0f9 #0ff #09f #00f #f0f]> | |
| rect = group2.append \rect | |
| .attr \x 0 | |
| .attr \y 0 | |
| .attr \width \100px | |
| .attr \height \100px | |
| .attr \fill -> fa[cc:=((cc+1)%10)] | |
| .attr \transform -> | |
| {sx,sy} = it.coord[it.level - level >? 0].{sx,sy} | |
| console.log "scale(#{sx},#{sy})" | |
| "scale(#{sx},#{sy})" | |
| text = group2.append \text | |
| .attr \width \120px | |
| .attr \x 0 | |
| .attr \y 0 | |
| .attr \stroke \#000 | |
| .attr \stroke-width \0.5px | |
| .attr \font-size \12px | |
| .attr \method \stretch | |
| .attr \lengthAdjust \spacingAndGlyphs | |
| .attr \text-anchodr \middle | |
| .append \textPath | |
| .attr "xlink:href" \#text-path | |
| .attr \textLength 96 | |
| .text (.name) |
This file contains hidden or 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
| all: | |
| jade index.jade | |
| livescript -cp index.ls > index.js |
This file contains hidden or 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
| console.log "a"+((a?.b) || 1) |
This file contains hidden or 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
| [{ | |
| "name": "總預算", "amount": "5075", | |
| "children": [ | |
| { "name": "第一分部", "amount": "4025", | |
| "children": [ | |
| { "name": "第一分部一支部", "amount": "2050" }, | |
| { "name": "第一分部二支部", "amount": "1050" }, | |
| { "name": "第一分部三支部", "amount": "925" } | |
| ]}, | |
| { "name": "第二分部", "amount": "1050" } | |
| ] | |
| }] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment