Skip to content

Instantly share code, notes, and snippets.

@alamsal

alamsal/forestSpecies.json

Created August 21, 2015 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alamsal/a67339c52fc5ca45d2ef to your computer and use it in GitHub Desktop.
Save alamsal/a67339c52fc5ca45d2ef to your computer and use it in GitHub Desktop.
Download ZIP
Forest species wheel in d3.js
Raw
forestSpecies.json
{
"name" : "",
"children" :
[
{
"name" : "Softwoods",
"children" :
[
{
"order" : 1,
"alias" : " White/red/jack pine",
"color" : "#C7EAFB",
"name" : "1",
"children" :
[
{
"order" : 5,
"color" : "#C7EAFB",
"name" : "Eastern hemlock"
},
{
"order" : 3,
"color" : "#C7EAFB",
"name" : "Eastern white pine"
},
{
"order" : 4,
"color" : "#C7EAFB",
"name" : "Eastern white pine / eastern hemlock"
},
{
"order" : 1,
"color" : "#C7EAFB",
"name" : "Jack pine"
},
{
"order" : 2,
"color" : "#C7EAFB",
"name" : "Red pine"
}
]
},
{
"order" : 2,
"alias" : " Spruce/fir",
"color" : "#ABE1FA",
"name" : "2",
"children" :
[
{
"order" : 6,
"color" : "#ABE1FA",
"name" : "Balsam fir"
},
{
"order" : 10,
"color" : "#ABE1FA",
"name" : "Black spruce"
},
{
"order" : 12,
"color" : "#ABE1FA",
"name" : "Nothern white-cedar"
},
{
"order" : 8,
"color" : "#ABE1FA",
"name" : "Red spruce"
},
{
"order" : 9,
"color" : "#ABE1FA",
"name" : "Red spruce / balsam fir"
},
{
"order" : 11,
"color" : "#ABE1FA",
"name" : "Tamarack"
},
{
"order" : 7,
"color" : "#ABE1FA",
"name" : "White spruce"
}
]
},
{
"order" : 3,
"alias" : " Longleaf/slash pine",
"color" : "#7ED3F7",
"name" : "3",
"children" :
[
{
"order" : 13,
"color" : "#7ED3F7",
"name" : "Longleaf pine"
},
{
"order" : 14,
"color" : "#7ED3F7",
"name" : "Slash pine"
}
]
},
{
"order" : 4,
"alias" : " Loblolly/shortleaf pine",
"color" : "#44C8F5",
"name" : "4",
"children" :
[
{
"order" : 15,
"color" : "#44C8F5",
"name" : "Loblolly pine"
},
{
"order" : 21,
"color" : "#44C8F5",
"name" : "Pitch pine"
},
{
"order" : 20,
"color" : "#44C8F5",
"name" : "Pond pine"
},
{
"order" : 18,
"color" : "#44C8F5",
"name" : "Sand pine"
},
{
"order" : 16,
"color" : "#44C8F5",
"name" : "Shortleaf pine"
},
{
"order" : 22,
"color" : "#44C8F5",
"name" : "Spruce pine"
},
{
"order" : 19,
"color" : "#44C8F5",
"name" : "Table Mountain pine"
},
{
"order" : 17,
"color" : "#44C8F5",
"name" : "Virginia pine"
}
]
},
{
"order" : 5,
"alias" : " Pinyon/juniper",
"color" : "#00B6F1",
"name" : "5",
"children" :
[
{
"order" : 23,
"color" : "#00B6F1",
"name" : "Eastern redcedar"
},
{
"order" : 26,
"color" : "#00B6F1",
"name" : "Juniper woodland"
},
{
"order" : 27,
"color" : "#00B6F1",
"name" : "Pinyon / juniper woodland"
},
{
"order" : 24,
"color" : "#00B6F1",
"name" : "Rocky Mountain juniper"
},
{
"order" : 25,
"color" : "#00B6F1",
"name" : "Western juniper"
}
]
},
{
"order" : 6,
"alias" : " Douglas-fir",
"color" : "#009BDF",
"name" : "6",
"children" :
[
{
"order" : 28,
"color" : "#009BDF",
"name" : "Douglas-fir"
},
{
"order" : 29,
"color" : "#009BDF",
"name" : "Port-Orford-cedar"
}
]
},
{
"order" : 7,
"alias" : " Ponderosa pine",
"color" : "#007DC5",
"name" : "7",
"children" :
[
{
"order" : 31,
"color" : "#007DC5",
"name" : "Incense-cedar"
},
{
"order" : 32,
"color" : "#007DC5",
"name" : "Jeffrey pine / Coulter pine / bigcone Douglas-fir"
},
{
"order" : 30,
"color" : "#007DC5",
"name" : "Ponderosa pine"
},
{
"order" : 33,
"color" : "#007DC5",
"name" : "Sugar pine"
}
]
},
{
"order" : 8,
"alias" : " Western white pine",
"color" : "#0061AF",
"name" : "8",
"children" :
[
{
"order" : 34,
"color" : "#0061AF",
"name" : "Western white pine"
}
]
},
{
"order" : 9,
"alias" : " Fir/spruce/mountain hemlock",
"color" : "#17479E",
"name" : "9",
"children" :
[
{
"order" : 45,
"color" : "#17479E",
"name" : "Alaska-yellow-cedar"
},
{
"order" : 43,
"color" : "#17479E",
"name" : "Blue spruce"
},
{
"order" : 39,
"color" : "#17479E",
"name" : "Engelmann spruce"
},
{
"order" : 40,
"color" : "#17479E",
"name" : "Engelmann spruce / subalpine fir"
},
{
"order" : 41,
"color" : "#17479E",
"name" : "Grand fir"
},
{
"order" : 44,
"color" : "#17479E",
"name" : "Mountain hemlock"
},
{
"order" : 37,
"color" : "#17479E",
"name" : "Noble fir"
},
{
"order" : 38,
"color" : "#17479E",
"name" : "Pacific silver fir"
},
{
"order" : 36,
"color" : "#17479E",
"name" : "Red fir"
},
{
"order" : 42,
"color" : "#17479E",
"name" : "Subalpine fir"
},
{
"order" : 35,
"color" : "#17479E",
"name" : "White fir"
}
]
},
{
"order" : 10,
"alias" : " Lodgepole pine",
"color" : "#192F7C",
"name" : "10",
"children" :
[
{
"order" : 46,
"color" : "#192F7C",
"name" : "Lodgepole pine"
}
]
},
{
"order" : 11,
"alias" : " Hemlock/Sitka spruce",
"color" : "#522E91",
"name" : "11",
"children" :
[
{
"order" : 49,
"color" : "#522E91",
"name" : "Sitka spruce"
},
{
"order" : 47,
"color" : "#522E91",
"name" : "Western hemlock"
},
{
"order" : 48,
"color" : "#522E91",
"name" : "Western redcedar"
}
]
},
{
"order" : 12,
"alias" : " Western larch",
"color" : "#7B5AA6",
"name" : "12",
"children" :
[
{
"order" : 50,
"color" : "#7B5AA6",
"name" : "Western larch"
}
]
},
{
"order" : 13,
"alias" : " Redwood",
"color" : "#9E76B4",
"name" : "13",
"children" :
[
{
"order" : 52,
"color" : "#9E76B4",
"name" : "Giant sequoia"
},
{
"order" : 51,
"color" : "#9E76B4",
"name" : "Redwood"
}
]
},
{
"order" : 14,
"alias" : " other western softwoods",
"color" : "#C786BA",
"name" : "14",
"children" :
[
{
"order" : 55,
"color" : "#C786BA",
"name" : "Bishop pine"
},
{
"order" : 57,
"color" : "#C786BA",
"name" : "Foxtail pine / bristlecone pine"
},
{
"order" : 53,
"color" : "#C786BA",
"name" : "Knobcone pine"
},
{
"order" : 58,
"color" : "#C786BA",
"name" : "Limber pine"
},
{
"order" : 60,
"color" : "#C786BA",
"name" : "Misc. western softwoods"
},
{
"order" : 56,
"color" : "#C786BA",
"name" : "Monterey pine"
},
{
"order" : 54,
"color" : "#C786BA",
"name" : "Southwestern white pine"
},
{
"order" : 59,
"color" : "#C786BA",
"name" : "Whitebark pine"
}
]
},
{
"order" : 15,
"alias" : " California mixed softwoods",
"color" : "#BD4B9B",
"name" : "15",
"children" :
[
{
"order" : 61,
"color" : "#BD4B9B",
"name" : "California mixed conifer"
}
]
},
{
"order" : 16,
"alias" : " Exotic softwoods",
"color" : "#9B1F87",
"name" : "16",
"children" :
[
{
"order" : 63,
"color" : "#9B1F87",
"name" : "Australian pine"
},
{
"order" : 66,
"color" : "#9B1F87",
"name" : "Introduced larch"
},
{
"order" : 65,
"color" : "#9B1F87",
"name" : "Norway spruce"
},
{
"order" : 64,
"color" : "#9B1F87",
"name" : "Other exotic softwoods"
},
{
"order" : 62,
"color" : "#9B1F87",
"name" : "Scotch pine"
}
]
}
]
},
{
"name" : "Hardwoods",
"children" :
[
{
"order" : 17,
"alias" : " oak/pine",
"color" : "#ED1B2F",
"name" : "17",
"children" :
[
{
"order" : 68,
"color" : "#ED1B2F",
"name" : "Eastern redcedar / hardwood"
},
{
"order" : 67,
"color" : "#ED1B2F",
"name" : "Eastern white pine / Northern red oak / white ash"
},
{
"order" : 72,
"color" : "#ED1B2F",
"name" : "Loblolly pine / hardwood"
},
{
"order" : 69,
"color" : "#ED1B2F",
"name" : "Longleaf pine / oak"
},
{
"order" : 74,
"color" : "#ED1B2F",
"name" : "Other pine / hardwood"
},
{
"order" : 70,
"color" : "#ED1B2F",
"name" : "Shortleaf pine / oak"
},
{
"order" : 73,
"color" : "#ED1B2F",
"name" : "Slash pine / hardwood"
},
{
"order" : 71,
"color" : "#ED1B2F",
"name" : "Virginia pine / Southern red oak"
}
]
},
{
"order" : 18,
"alias" : " Oak/hickory",
"color" : "#F7941E",
"name" : "18",
"children" :
[
{
"order" : 87,
"color" : "#F7941E",
"name" : "Black locust"
},
{
"order" : 86,
"color" : "#F7941E",
"name" : "Black walnut"
},
{
"order" : 83,
"color" : "#F7941E",
"name" : "Bur oak"
},
{
"order" : 76,
"color" : "#F7941E",
"name" : "Chestnut oak"
},
{
"order" : 89,
"color" : "#F7941E",
"name" : "Chestnut oak / black oak / scarlet oak"
},
{
"order" : 91,
"color" : "#F7941E",
"name" : "Mixed upland hardwoods"
},
{
"order" : 79,
"color" : "#F7941E",
"name" : "Northern red oak"
},
{
"order" : 75,
"color" : "#F7941E",
"name" : "Post oak / blackjack oak"
},
{
"order" : 90,
"color" : "#F7941E",
"name" : "Red maple / oak"
},
{
"order" : 81,
"color" : "#F7941E",
"name" : "Sassafras / persimmon"
},
{
"order" : 84,
"color" : "#F7941E",
"name" : "Scarlet oak"
},
{
"order" : 82,
"color" : "#F7941E",
"name" : "Sweetgum / yellow-poplar"
},
{
"order" : 78,
"color" : "#F7941E",
"name" : "White oak"
},
{
"order" : 77,
"color" : "#F7941E",
"name" : "White oak / red oak / hickory"
},
{
"order" : 85,
"color" : "#F7941E",
"name" : "Yellow-poplar"
},
{
"order" : 88,
"color" : "#F7941E",
"name" : "South scrub oak"
},
{
"order" : 80,
"color" : "#F7941E",
"name" : "Yellow-poplar / white oak / Northern red oak"
}
]
},
{
"order" : 19,
"alias" : " Oak/gum/cypress",
"color" : "#FFC20E",
"name" : "19",
"children" :
[
{
"order" : 95,
"color" : "#FFC20E",
"name" : "Atlantic white-cedar"
},
{
"order" : 96,
"color" : "#FFC20E",
"name" : "Baldcypress / water tupelo"
},
{
"order" : 94,
"color" : "#FFC20E",
"name" : "Overcup oak / water hickory"
},
{
"order" : 92,
"color" : "#FFC20E",
"name" : "Swamp chestnut oak / cherrybark oak"
},
{
"order" : 97,
"color" : "#FFC20E",
"name" : "Sweetbay / swamp tupelo / red maple"
},
{
"order" : 93,
"color" : "#FFC20E",
"name" : "Sweetgum / Nuttall oak / willow oak"
}
]
},
{
"order" : 20,
"alias" : " Elm/ash/cottonwood",
"color" : "#FFDD00",
"name" : "20",
"children" :
[
{
"order" : 98,
"color" : "#FFDD00",
"name" : "Black ash / American elm / red maple"
},
{
"order" : 100,
"color" : "#FFDD00",
"name" : "Cottonwood"
},
{
"order" : 106,
"color" : "#FFDD00",
"name" : "Cottonwood / willow"
},
{
"order" : 107,
"color" : "#FFDD00",
"name" : "Oregon ash"
},
{
"order" : 105,
"color" : "#FFDD00",
"name" : "Red maple / lowland"
},
{
"order" : 99,
"color" : "#FFDD00",
"name" : "River birch / sycamore"
},
{
"order" : 104,
"color" : "#FFDD00",
"name" : "Silver maple / American elm"
},
{
"order" : 103,
"color" : "#FFDD00",
"name" : "Sugarberry / hackberry / elm / green ash"
},
{
"order" : 102,
"color" : "#FFDD00",
"name" : "Sycamore / pecan / American elm"
},
{
"order" : 101,
"color" : "#FFDD00",
"name" : "Willow"
}
]
},
{
"order" : 21,
"alias" : " Maple/beech/birch",
"color" : "#FFF200",
"name" : "21",
"children" :
[
{
"order" : 109,
"color" : "#FFF200",
"name" : "Black cherry"
},
{
"order" : 110,
"color" : "#FFF200",
"name" : "Cherry / white ash / yellow-poplar"
},
{
"order" : 112,
"color" : "#FFF200",
"name" : "Elm / ash / black locust"
},
{
"order" : 111,
"color" : "#FFF200",
"name" : "Hard maple / basswood"
},
{
"order" : 113,
"color" : "#FFF200",
"name" : "Red maple / upland"
},
{
"order" : 108,
"color" : "#FFF200",
"name" : "Sugar maple / beech / yellow birch"
}
]
},
{
"order" : 22,
"alias" : " Aspen/birch",
"color" : "#E2E41A",
"name" : "22",
"children" :
[
{
"order" : 114,
"color" : "#E2E41A",
"name" : "Aspen"
},
{
"order" : 116,
"color" : "#E2E41A",
"name" : "Balsam poplar"
},
{
"order" : 115,
"color" : "#E2E41A",
"name" : "Paper birch"
}
]
},
{
"order" : 23,
"alias" : " Alder/maple",
"color" : "#BFD730",
"name" : "23",
"children" :
[
{
"order" : 118,
"color" : "#BFD730",
"name" : "Bigleaf maple"
},
{
"order" : 117,
"color" : "#BFD730",
"name" : "Red alder"
}
]
},
{
"order" : 24,
"alias" : " Western oak",
"color" : "#8DC63F",
"name" : "24",
"children" :
[
{
"order" : 122,
"color" : "#8DC63F",
"name" : "Blue oak"
},
{
"order" : 120,
"color" : "#8DC63F",
"name" : "California black oak"
},
{
"order" : 125,
"color" : "#8DC63F",
"name" : "Canyon live oak / interior live oak"
},
{
"order" : 124,
"color" : "#8DC63F",
"name" : "Coast live oak"
},
{
"order" : 123,
"color" : "#8DC63F",
"name" : "Deciduous oak woodland"
},
{
"order" : 119,
"color" : "#8DC63F",
"name" : "Gray pine"
},
{
"order" : 121,
"color" : "#8DC63F",
"name" : "Oregon white oak"
}
]
},
{
"order" : 25,
"alias" : " Tanoak/laurel",
"color" : "#00A651",
"name" : "25",
"children" :
[
{
"order" : 127,
"color" : "#00A651",
"name" : "California laurel"
},
{
"order" : 128,
"color" : "#00A651",
"name" : "Giant chinkapin"
},
{
"order" : 126,
"color" : "#00A651",
"name" : "Tanoak"
}
]
},
{
"order" : 26,
"alias" : " other western hardwoods",
"color" : "#009247",
"name" : "26",
"children" :
[
{
"order" : 131,
"color" : "#009247",
"name" : "Cercocarpus woodland"
},
{
"order" : 132,
"color" : "#009247",
"name" : "Intermountain maple woodland"
},
{
"order" : 130,
"color" : "#009247",
"name" : "Mesquite woodland"
},
{
"order" : 133,
"color" : "#009247",
"name" : "Misc. western woodland hardwoods"
},
{
"order" : 129,
"color" : "#009247",
"name" : "Pacific madrone"
}
]
},
{
"order" : 27,
"alias" : " Tropical hardwoods",
"color" : "#006F45",
"name" : "27",
"children" :
[
{
"order" : 135,
"color" : "#006F45",
"name" : "Mangrove"
},
{
"order" : 136,
"color" : "#006F45",
"name" : "Other tropical hardwoods"
},
{
"order" : 134,
"color" : "#006F45",
"name" : "Sable palm"
}
]
},
{
"order" : 28,
"alias" : " Exotic hardwoods",
"color" : "#004416",
"name" : "28",
"children" :
[
{
"order" : 139,
"color" : "#004416",
"name" : "Eucalyptus"
},
{
"order" : 138,
"color" : "#004416",
"name" : "Melaleuca"
},
{
"order" : 140,
"color" : "#004416",
"name" : "Other exotic hardwoods"
},
{
"order" : 137,
"color" : "#004416",
"name" : "Paulownia"
}
]
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Forest species interactive wheel</title>
<style>
/*Wheel's CSS*/
.wheel-nodes{
cursor: pointer;
}
.wheel-text{
text-rendering: optimizeLegibility;
font: 12px Helvetica;
background-color: transparent;
color: #000;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.wheel-text-depth3{
text-rendering: optimizeLegibility;
font: 11px Helvetica;
background-color: transparent;
color: #000;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.hover-wheel-text-depth3{
text-rendering: optimizeLegibility;
font: 10.5px Arial;
background-color: transparent;
color: #000;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id ="vis"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
(function(){
//Wheel settings
var wheelContainer = "vis",
wheelDataSource = "forestSpecies.json";
radius = 375;
x = d3.scale.linear().range([0, 2 * Math.PI]),
//y = d3.scale.linear().range([0, radius]),
y = d3.scale.pow().exponent(1.15).domain([0, 1]).range([0, radius])
padding = 2;
duration = 1;
var userInterface;
var treeWheelcontainer = d3.select(document.getElementById(wheelContainer));
var treeWheel = treeWheelcontainer.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", " -" + (radius + 100) + " -" + (radius +100) +" "+ radius*3+" "+ radius*3)
.call(d3.behavior.zoom().scale(1).scaleExtent([0.1, 3]).on("zoom", zoom)).on("dblclick.zoom", null)
.append("g");
var partition = d3.layout.partition()
.sort(null)
.value(function(d) { return d.depth; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y)-5; })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)) + 7; });
//Data required for wheel
d3.json(wheelDataSource, function(error, json) {
var nodes = partition.nodes(json);
var path = treeWheel.selectAll("path").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.attr("class","wheel-nodes")
.style("stroke","snow")
.style("stroke-dasharray",("3, 3"))
.style("fill", pathColor);
var text = treeWheel.selectAll("text").data(nodes);
// Nodes' label
var textLabel = text.enter().append("text")
.style("fill-opacity", 1)
.attr("id",function(d,i){return "text-"+i;})
.attr("class",function(d){
if(d.depth === 3) return "wheel-text-depth3";
return "wheel-text";
})
.attr("visibility",function(d) {
return labelTextVisibilty(d,0.01);
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx/2) > Math.PI ? "end" : "start";
})
.attr("transform", function(d) {
var multiline = (d.name || "").split("/").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
});
//Caching the UI variables
userInterface = {
path:path,
text:text,
textLabel:textLabel
};
//Additional label formatting in nodes
makeMultilineTextLabels();
treeWheelMouseEvents();
});
//Helper functions
function treeWheelMouseEvents(){
var mouseStatus;
var displayThresholdValue = 0.01;
var isFirstLoad = true; // Sets small font size for depth 3 labels
//Activities on click
userInterface.path
.on("click", onNodeClick)
.on("mouseleave", onLeaveNode)
.on("mouseenter", onEnterNode);
userInterface.textLabel
.on("click", onNodeClick)
.on("mouseleave", onLeaveNode)
.on("mouseenter", onEnterNode);
function onLeaveNode(d,i){
mouseStatus = "leave";
fillSelectedPathColor(d,i,pathColor(d));
fillSelectedTextColor(d,i,"");
}
function onEnterNode(d,i){
mouseStatus = "enter";
fillSelectedPathColor(d,i,"#5F031A");
fillSelectedTextColor(d,i,"white");
disableHoverOnLevelThirdBigCircle(d,i);
}
function disableHoverOnLevelThirdBigCircle(d,i){
mouseStatus = "disableLevel3";
if(isElementBiggestCirle(d,i)){
fillSelectedPathColor(d,i,pathColor(d));
fillSelectedTextColor(d,i,"");
}
}
function fillSelectedPathColor(d,i,color){
onSelectedFillColor(d,i,color,"path");
}
function fillSelectedTextColor(d,i,color){
onSelectedFillColor(d,i,color,"text");
}
function onSelectedFillColor(d,i,color,type){
var elementId = type+"-"+i;
var selectedElement = d3.select(document.getElementById(elementId));
selectedElement.style("fill",color);
if(type == "text")
{
if(mouseStatus == "enter"){
selectedElement.attr("visibility","visible");
if(d.depth === 3){
if(isFirstLoad){
setDepthThreeSmallerLabelText();
}else{
defaultDepthThreeLabelText();
}
}
}
if(mouseStatus == "leave"){
if(d.depth === 3){
if(isFirstLoad){
setDepthThreeSmallerLabelText();
}else{
defaultDepthThreeLabelText();
}
}
selectedElement.attr("visibility",labelTextVisibilty(d,displayThresholdValue));
}
}
else
{
if(mouseStatus == "enter"){
selectedElement.style("stroke",color);
}else{
selectedElement.style("stroke","snow");
}
}
function setDepthThreeSmallerLabelText(){
selectedElement.classed("wheel-text-depth3",false);
selectedElement.classed("hover-wheel-text-depth3",true);
}
function defaultDepthThreeLabelText(){
selectedElement.classed("hover-wheel-text-depth3",false);
selectedElement.classed("wheel-text-depth3",true);
}
}
function isElementBiggestCirle(d,i){
//All central circle has same 'd' value
var default_svgpath_d_value = "M0,382A382,382 0 1,1 0,-382A382,382 0 1,1 0,382M0,15A15,15 0 1,0 0,-15A15,15 0 1,0 0,15Z";
var currentElement = d3.select(document.getElementById("path-"+i));
var current_svgpath_d_value = currentElement.attr("d");
if(default_svgpath_d_value == current_svgpath_d_value) return true;
return false;
}
function onNodeClick(d,i) {
console.log(d.name);
//ThresholdValue for show/hide text label based on ring depth
if(d.depth === 0){
displayThresholdValue = 0.01;
isFirstLoad = true;
}else{
displayThresholdValue = 0.001;
isFirstLoad = false;
}
//Onwards node click activities
var total = d.dx;
userInterface.path.transition()
.duration(duration)
.attrTween("d", arcTween(d))
;
// Somewhat of a hack as we rely on arcTween updating the scales.
userInterface.text
.transition()
.attr("visibility",function(d) { return d.dx/total < 0.01? "hidden" : "visible"})
.duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
var multiline = (d.name || "").split(" ").length > 1;
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.01 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) {
return isParentOf(d, e) ? 1 : 1e-6;
})
.each("end", function(e) {
d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});
//Resetting node after hover effect
if(d.depth==3){
onLeaveNode(d,i);
}
}
}
function makeMultilineTextLabels(){
var multiLineRows = 3;
for(var i = 0; i<= multiLineRows; i++){
var txtLabel = userInterface.textLabel.append("tspan").attr("x", 0);
if(i == 0){
txtLabel
.text(function(d){return appendText(d,i);});
}
else if(i == 1){
txtLabel
.attr("dy", function(d){
if(d.depth ===2){
if(d.alias.indexOf("/") === -1) return "0em";
return "0.8em";
}
return "0.8em"
})
.text(function(d){return appendText(d,i);});
}else{
txtLabel
.attr("dy", "0.8em")
.text(function(d){return appendText(d,i);});
}
}
}
function appendText(d,index){
if(d.depth === 2){
return formatLevel2Lables(d,index);
}
else if (d.depth===3){
return formatLevel3Lables(d,index);
}else{
return formatDefaultLevels(d,index);
}
// Formatting text labels
function formatLevel2Lables(d,index){
// Trimmed up the long names to fit in the chart
var woodType= ["pine","California"];
for(i=0;i<woodType.length;i++){
if((d.alias.indexOf("/") === -1) && (d.alias.indexOf(woodType[i])>-1)){
return d.alias.split(woodType[i])[index];
}
}
if((d.alias.indexOf("/") === -1) && ((d.alias.split(" ").length)>=3)){
return d.alias.split(" ")[index];
}
return formatDefaultLevels(d,index);
}
function formatLevel3Lables(d,index){
// Trimmed up the long names to fit in the chart
var woodType= ["hardwoods","softwoods","woodland"];
for(i=0;i<woodType.length;i++){
if((d.name.indexOf("/") === -1) && (d.name.indexOf(woodType[i])>-1)){
return d.name.split(woodType[i])[index] ;
}
}
return formatDefaultLevels(d,index);
}
function formatDefaultLevels(d,index){
var treeName;
if(d.depth === 2){
treeName = capitalizedTextAfterBackslash(d.alias);
}else{
treeName = capitalizedTextAfterBackslash(d.name);
}
return d.depth ? treeName.split("/")[index] || "" : "";
function capitalizedTextAfterBackslash(str){
var temp= str.split("\/");
for(var i=0; i<temp.length; i++) {
temp[i] = temp[i].trim();
temp[i] = temp[i].substr(0,1).toUpperCase() + temp[i].substr(1,temp[i].length-1);
}
return temp.join('/');
}
}
}
function pathColor(d) {
if(d.depth == 1){
var woodcolor;
if(d.name=="Hardwoods"){
woodcolor = "#816854";
}else{
woodcolor = "#C3B9A0";
}
return woodcolor;
}else if(d.depth>1){
return d.color;
}
else{
return "#DCDCDC";
}
}
function labelTextVisibilty(d,displayThreshold){
return d.dx < displayThreshold? "hidden" : "visible";
}
// Checking for parent-child relationship among nodes
function isParentOf(p, c) {
if (p === c) return true;
if (p.children) {
return p.children.some(function(d) {
return isParentOf(d, c);
});
}
return false;
}
// Interpolate the scales
function arcTween(d) {
var my = maxY(d),
xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, my]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d) {
return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
function maxY(d) {
return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
}
// Pan zoom wheel
function zoom() {
treeWheel.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
})();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment