Skip to content

Instantly share code, notes, and snippets.

@devangmundhra

devangmundhra/flare.json

Created April 8, 2011 06:42
Show Gist options
  • Save devangmundhra/909410 to your computer and use it in GitHub Desktop.
Save devangmundhra/909410 to your computer and use it in GitHub Desktop.
Download ZIP
Treemap example plus adding the capability that each node of the treemap unfolds on a mouse click
Raw
flare.json
{
"flare": {
"analytics": {
"cluster": {
"AgglomerativeCluster": 3938,
"CommunityStructure": 3812,
"HierarchicalCluster": 6714,
"MergeEdge": 743
},
"graph": {
"BetweennessCentrality": 3534,
"LinkDistance": 5731,
"MaxFlowMinCut": 7840,
"ShortestPaths": 5914,
"SpanningTree": 3416
},
"optimization": {
"AspectRatioBanker": 7074
}
},
"animate": {
"Easing": 17010,
"FunctionSequence": 5842,
"interpolate": {
"ArrayInterpolator": 1983,
"ColorInterpolator": 2047,
"DateInterpolator": 1375,
"Interpolator": 8746,
"MatrixInterpolator": 2202,
"NumberInterpolator": 1382,
"ObjectInterpolator": 1629,
"PointInterpolator": 1675,
"RectangleInterpolator": 2042
},
"ISchedulable": 1041,
"Parallel": 5176,
"Pause": 449,
"Scheduler": 5593,
"Sequence": 5534,
"Transition": 9201,
"Transitioner": 19975,
"TransitionEvent": 1116,
"Tween": 6006
},
"data": {
"converters": {
"Converters": 721,
"DelimitedTextConverter": 4294,
"GraphMLConverter": 9800,
"IDataConverter": 1314,
"JSONConverter": 2220
},
"DataField": 1759,
"DataSchema": 2165,
"DataSet": 586,
"DataSource": 3331,
"DataTable": 772,
"DataUtil": 3322
},
"display": {
"DirtySprite": 8833,
"LineSprite": 1732,
"RectSprite": 3623,
"TextSprite": 10066
},
"flex": {
"FlareVis": 4116
},
"physics": {
"DragForce": 1082,
"GravityForce": 1336,
"IForce": 319,
"NBodyForce": 10498,
"Particle": 2822,
"Simulation": 9983,
"Spring": 2213,
"SpringForce": 1681
},
"query": {
"AggregateExpression": 1616,
"And": 1027,
"Arithmetic": 3891,
"Average": 891,
"BinaryExpression": 2893,
"Comparison": 5103,
"CompositeExpression": 3677,
"Count": 781,
"DateUtil": 4141,
"Distinct": 933,
"Expression": 5130,
"ExpressionIterator": 3617,
"Fn": 3240,
"If": 2732,
"IsA": 2039,
"Literal": 1214,
"Match": 3748,
"Maximum": 843,
"methods": {
"add": 593,
"and": 330,
"average": 287,
"count": 277,
"distinct": 292,
"div": 595,
"eq": 594,
"fn": 460,
"gt": 603,
"gte": 625,
"iff": 748,
"isa": 461,
"lt": 597,
"lte": 619,
"max": 283,
"min": 283,
"mod": 591,
"mul": 603,
"neq": 599,
"not": 386,
"or": 323,
"orderby": 307,
"range": 772,
"select": 296,
"stddev": 363,
"sub": 600,
"sum": 280,
"update": 307,
"variance": 335,
"where": 299,
"xor": 354,
"_": 264
},
"Minimum": 843,
"Not": 1554,
"Or": 970,
"Query": 13896,
"Range": 1594,
"StringUtil": 4130,
"Sum": 791,
"Variable": 1124,
"Variance": 1876,
"Xor": 1101
},
"scale": {
"IScaleMap": 2105,
"LinearScale": 1316,
"LogScale": 3151,
"OrdinalScale": 3770,
"QuantileScale": 2435,
"QuantitativeScale": 4839,
"RootScale": 1756,
"Scale": 4268,
"ScaleType": 1821,
"TimeScale": 5833
},
"util": {
"Arrays": 8258,
"Colors": 10001,
"Dates": 8217,
"Displays": 12555,
"Filter": 2324,
"Geometry": 10993,
"heap": {
"FibonacciHeap": 9354,
"HeapNode": 1233
},
"IEvaluable": 335,
"IPredicate": 383,
"IValueProxy": 874,
"math": {
"DenseMatrix": 3165,
"IMatrix": 2815,
"SparseMatrix": 3366
},
"Maths": 17705,
"Orientation": 1486,
"palette": {
"ColorPalette": 6367,
"Palette": 1229,
"ShapePalette": 2059,
"SizePalette": 2291
},
"Property": 5559,
"Shapes": 19118,
"Sort": 6887,
"Stats": 6557,
"Strings": 22026
},
"vis": {
"axis": {
"Axes": 1302,
"Axis": 24593,
"AxisGridLine": 652,
"AxisLabel": 636,
"CartesianAxes": 6703
},
"controls": {
"AnchorControl": 2138,
"ClickControl": 3824,
"Control": 1353,
"ControlList": 4665,
"DragControl": 2649,
"ExpandControl": 2832,
"HoverControl": 4896,
"IControl": 763,
"PanZoomControl": 5222,
"SelectionControl": 7862,
"TooltipControl": 8435
},
"data": {
"Data": 20544,
"DataList": 19788,
"DataSprite": 10349,
"EdgeSprite": 3301,
"NodeSprite": 19382,
"render": {
"ArrowType": 698,
"EdgeRenderer": 5569,
"IRenderer": 353,
"ShapeRenderer": 2247
},
"ScaleBinding": 11275,
"Tree": 7147,
"TreeBuilder": 9930
},
"events": {
"DataEvent": 2313,
"SelectionEvent": 1880,
"TooltipEvent": 1701,
"VisualizationEvent": 1117
},
"legend": {
"Legend": 20859,
"LegendItem": 4614,
"LegendRange": 10530
},
"operator": {
"distortion": {
"BifocalDistortion": 4461,
"Distortion": 6314,
"FisheyeDistortion": 3444
},
"encoder": {
"ColorEncoder": 3179,
"Encoder": 4060,
"PropertyEncoder": 4138,
"ShapeEncoder": 1690,
"SizeEncoder": 1830
},
"filter": {
"FisheyeTreeFilter": 5219,
"GraphDistanceFilter": 3165,
"VisibilityFilter": 3509
},
"IOperator": 1286,
"label": {
"Labeler": 9956,
"RadialLabeler": 3899,
"StackedAreaLabeler": 3202
},
"layout": {
"AxisLayout": 6725,
"BundledEdgeRouter": 3727,
"CircleLayout": 9317,
"CirclePackingLayout": 12003,
"DendrogramLayout": 4853,
"ForceDirectedLayout": 8411,
"IcicleTreeLayout": 4864,
"IndentedTreeLayout": 3174,
"Layout": 7881,
"NodeLinkTreeLayout": 12870,
"PieLayout": 2728,
"RadialTreeLayout": 12348,
"RandomLayout": 870,
"StackedAreaLayout": 9121,
"TreeMapLayout": 9191
},
"Operator": 2490,
"OperatorList": 5248,
"OperatorSequence": 4190,
"OperatorSwitch": 2581,
"SortOperator": 2023
},
"Visualization": 16540
}
}
}
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap unfolds on click</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<link type="text/css" rel="stylesheet" href="treemap.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="treemap_mouse_18.js"></script>
</body>
</html>
Raw
treemap.css
.cell {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
Raw
treemap_mouse_18.js
var w = window.innerWidth - 1,
h = window.innerHeight - 1,
color = d3.scale.category20c();
//Capturing mouse coordinates on click
document.captureEvents(Event.MOUSEMOVE);
document.onclick = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e){
tempX = e.pageX;
tempY = e.pageY;
if (tempX < 0) {tempX = 0;}
if (tempY < 0) {tempY = 0;}
return true;
}
////
//On clicking
//When a cell is clicked, figure out if the present node is the clicked cell of the parent of the present node is the clicked cell
function clickedCell(u){
if (u.x < tempX && (u.x + u.dx) > tempX && u.y < tempY && (u.y + u.dy) > tempY) {
return true;
}
else if (u.parent.x < tempX && (u.parent.x + u.parent.dx) > tempX && u.parent.y < tempY && (u.parent.y + u.parent.dy) > tempY) {
return true;
}
else {
return false;
}
}
//Change attributes on click
function onClick() {
div.selectAll("div")
.text(function(d){return clickedCell(d) ? d.data.key : null;})
// .style("background", function(d) { return clickedCell(d) ? color(d.data.key) : null; })
// .transition()
// .duration(1000)
.style("left", function(d){return clickedCell(d) ? d.x + "px" : null;})
.style("top", function(d){return clickedCell(d) ? d.y + "px" : null;})
.style("width", function(d){return clickedCell(d) ? d.dx - 1 + "px" : null;})
.style("height", function(d){return clickedCell(d) ? d.dy - 1 + "px" : null;})
// .text(function(d){return clickedCell(d) ? d.data.key : null;});
}
//Wrapper function, show cell if there are no children: finest level
function cell_child() {
this
.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return d.dx + "px"; })
.style("height", function(d) { return d.dy + "px"; });
}
//Wrapper function: show cell if there is children to the node: more coarse level
function cell_parent(){
this.style("left", function(d){
return d.children ? d.x + "px" : null;
}).style("top", function(d){
return d.children ? d.y + "px" : null;
}).style("width", function(d){
return d.children ? d.dx - 1 + "px" : null;
}).style("height", function(d){
return d.children ? d.dy - 1 + "px" : null;
});
}
//Wrapper function: show cell if there is parent to the node: more coarse level
function text_parent() {
this
.text(function(d) { return d.children ? d.data.key : null; })
}
//Wrapper function, show text if there are no children: finest level
function text_child() {
this
.text(function(d) { return d.children ? null : d.data.key; })
}
//Treemap code from D3 example
var treemap = d3.layout.treemap()
.size([w, h])
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; })
.sticky(true);
var div = d3.select("#chart").append("div")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");
d3.json("flare.json", function(json) {
div.data(d3.entries(json)).selectAll("div")
.data(treemap)
.enter().append("div")
.attr("class", "cell")
.style("background", function(d) { return d.children ? color(d.data.key) : null; })
.call(cell_parent)
.call(text_parent)
.attr('onclick', 'onClick()');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment