Created
August 21, 2015 15:52
-
-
Save alamsal/a67339c52fc5ca45d2ef to your computer and use it in GitHub Desktop.
Forest species wheel in d3.js
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
{ | |
"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" | |
} | |
] | |
} | |
] | |
} | |
] | |
} |
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> | |
<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