Skip to content

Instantly share code, notes, and snippets.

@fractalytics

fractalytics/colors.csv

Created April 17, 2022 13:19
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 fractalytics/6991f1c5b57b2b4632a1bebea3f5ce77 to your computer and use it in GitHub Desktop.
Save fractalytics/6991f1c5b57b2b4632a1bebea3f5ce77 to your computer and use it in GitHub Desktop.
Download ZIP
NASA internet browsing sunburst
Raw
colors.csv
name color
shuttle #ff9f40
apollo #ff0000
missions #00beff
history #a45411
countdown #8000ff
Raw
data_nasa.json
{
"children": [
{
"children": [
{
"name": "procurement.html",
"size": "836"
}
],
"name": "procurement"
},
{
"children": [
{
"name": "constr.gif",
"size": "927"
}
],
"name": "icon"
},
{
"children": [
{
"name": "vab.html",
"size": "1870"
},
{
"name": "mlp.html",
"size": "1325"
},
{
"name": "lc39a.html",
"size": "4366"
},
{
"name": "crawler.html",
"size": "553"
},
{
"name": "opf.html",
"size": "646"
},
{
"name": "tour.html",
"size": "2184"
},
{
"name": "lcc.html",
"size": "1199"
}
],
"name": "facilities"
},
{
"children": [
{
"children": [
{
"children": [
{
"name": "mission-sts-76.html",
"size": "547"
}
],
"name": "sts-76"
},
{
"children": [
{
"name": "sts-67-patch-small.gif",
"size": "947"
},
{
"name": "mission-sts-67.html",
"size": "941"
}
],
"name": "sts-67"
},
{
"children": [
{
"name": "mission-sts-64.html",
"size": "621"
}
],
"name": "sts-64"
},
{
"name": "missions.html",
"size": "20689"
},
{
"children": [
{
"name": "mission-sts-59.html",
"size": "669"
},
{
"name": "sts-59-patch-small.gif",
"size": "502"
}
],
"name": "sts-59"
},
{
"children": [
{
"name": "sts-68-patch-small.gif",
"size": "1304"
},
{
"name": "mission-sts-68.html",
"size": "1568"
},
{
"children": [
{
"name": "ksc.gif",
"size": "1458"
},
{
"name": "ksc-upclose.gif",
"size": "1322"
}
],
"name": "images"
},
{
"name": "ksc-srl-image.html",
"size": "1520"
}
],
"name": "sts-68"
},
{
"children": [
{
"name": "mission-sts-78.html",
"size": "1472"
},
{
"name": "sts-78-patch-small.gif",
"size": "1261"
}
],
"name": "sts-78"
},
{
"children": [
{
"name": "mission-sts-1.html",
"size": "1586"
},
{
"name": "sts-1-patch-small.gif",
"size": "1426"
}
],
"name": "sts-1"
},
{
"children": [
{
"name": "mission-61-c.html",
"size": "739"
},
{
"name": "61-c-patch-small.gif",
"size": "716"
}
],
"name": "61-c"
},
{
"children": [
{
"name": "mission-sts-73.html",
"size": "2814"
},
{
"name": "sts-73-patch-small.gif",
"size": "2282"
}
],
"name": "sts-73"
},
{
"children": [
{
"name": "sts-62-patch-small.gif",
"size": "572"
},
{
"name": "mission-sts-62.html",
"size": "699"
}
],
"name": "sts-62"
},
{
"children": [
{
"name": "mission-sts-65.html",
"size": "1015"
},
{
"name": "sts-65-patch-small.gif",
"size": "719"
}
],
"name": "sts-65"
},
{
"children": [
{
"name": "mission-sts-74.html",
"size": "1791"
},
{
"name": "sts-74-patch-small.gif",
"size": "1411"
}
],
"name": "sts-74"
},
{
"children": [
{
"name": "sts-63-patch-small.gif",
"size": "888"
},
{
"name": "mission-sts-63.html",
"size": "1005"
}
],
"name": "sts-63"
},
{
"children": [
{
"name": "mission-sts-66.html",
"size": "1213"
},
{
"name": "sts-66-patch-small.gif",
"size": "912"
}
],
"name": "sts-66"
},
{
"children": [
{
"name": "mission-sts-77.html",
"size": "521"
}
],
"name": "sts-77"
},
{
"children": [],
"name": "1039"
},
{
"name": "rollbacks.html",
"size": "1241"
},
{
"children": [
{
"name": "sts-75-patch-small.gif",
"size": "571"
},
{
"name": "mission-sts-75.html",
"size": "696"
}
],
"name": "sts-75"
},
{
"children": [
{
"name": "sts-72-patch-small.gif",
"size": "1073"
},
{
"name": "mission-sts-72.html",
"size": "1285"
}
],
"name": "sts-72"
},
{
"children": [
{
"children": [
{
"name": "images.html",
"size": "2955"
},
{
"name": "DSC-95EC-0001.gif",
"size": "523"
}
],
"name": "images"
},
{
"name": "sts-70-patch-small.gif",
"size": "4580"
},
{
"name": "mission-sts-70.html",
"size": "3990"
},
{
"children": [
{
"name": "woodpecker.mpg",
"size": "926"
},
{
"name": "movies.html",
"size": "1696"
}
],
"name": "movies"
},
{
"name": "o-ring-problem.gif",
"size": "1570"
}
],
"name": "sts-70"
},
{
"children": [
{
"name": "mission-sts-49.html",
"size": "688"
},
{
"name": "sts-49-patch-small.gif",
"size": "624"
}
],
"name": "sts-49"
},
{
"children": [
{
"name": "mission-51-l.html",
"size": "2235"
},
{
"name": "51-l-patch-small.gif",
"size": "2103"
},
{
"name": "51-l-info.html",
"size": "951"
},
{
"name": "images",
"size": "672"
},
{
"children": [],
"name": "1051"
},
{
"name": "movies",
"size": "598"
}
],
"name": "51-l"
},
{
"children": [
{
"name": "sts-69-patch.jpg",
"size": "928"
},
{
"name": "count69.gif",
"size": "21919"
},
{
"children": [
{
"name": "ws-animation-retrieval.mpg",
"size": "1165"
},
{
"name": "movies.html",
"size": "4617"
},
{
"name": "ws-animation-deploy.mpg",
"size": "1379"
},
{
"name": "sts-69-rollback.mpg",
"size": "723"
}
],
"name": "movies"
},
{
"name": "sts-69-info.html",
"size": "634"
},
{
"name": "liftoff.html",
"size": "4135"
},
{
"name": "sts-69-patch-small.gif",
"size": "21210"
},
{
"children": [],
"name": "910"
},
{
"name": "endeavour-pad-prelaunch-8-31-95.gif",
"size": "1172"
},
{
"name": "news",
"size": "1098"
},
{
"name": "sts-69-press-kit.txt",
"size": "1109"
},
{
"children": [
{
"name": "images.html",
"size": "5098"
},
{
"name": "KSC-95EC-0760.jpg",
"size": "754"
},
{
"name": "KSC-95EC-1032.gif",
"size": "874"
},
{
"name": "KSC-95EC-0694.jpg",
"size": "1256"
},
{
"name": "KSC-95EC-0694.gif",
"size": "1260"
},
{
"name": "KSC-95EC-0760.gif",
"size": "505"
},
{
"name": "index69.gif",
"size": "1071"
},
{
"name": "KSC-95EC-1032.jpg",
"size": "1177"
}
],
"name": "images"
},
{
"name": "mission-sts-69.html",
"size": "23222"
},
{
"name": "erin.gif",
"size": "753"
},
{
"name": "countdown.html",
"size": "891"
}
],
"name": "sts-69"
},
{
"children": [
{
"name": "mission-sts-71.html",
"size": "3027"
},
{
"children": [
{
"name": "images.html",
"size": "2820"
}
],
"name": "images"
},
{
"children": [
{
"name": "sts-71-launch-3.mpg",
"size": "808"
},
{
"name": "sts-71-launch.mpg",
"size": "2133"
},
{
"name": "crew-arrival-t38.mpg",
"size": "651"
},
{
"name": "movies.html",
"size": "3242"
}
],
"name": "movies"
},
{
"name": "sts-71-press-kit.txt",
"size": "565"
},
{
"name": "sts-71-patch-small.gif",
"size": "5213"
}
],
"name": "sts-71"
}
],
"name": "missions"
},
{
"children": [
{
"children": [
{
"name": "mission_profile_2-small.gif",
"size": "1306"
},
{
"name": "tal_abort_2-small.gif",
"size": "601"
},
{
"name": "launch_sites_8-small.gif",
"size": "915"
},
{
"name": "aft_fuselage_2-small.gif",
"size": "652"
},
{
"name": "sts_spec_6-small.gif",
"size": "1019"
},
{
"name": "srb_mod_compare_3-small.gif",
"size": "2721"
},
{
"name": "et_1-small.gif",
"size": "583"
},
{
"name": "et-lox_1-small.gif",
"size": "581"
},
{
"name": "et-intertank_1-small.gif",
"size": "611"
},
{
"name": "srb_16-small.gif",
"size": "1038"
},
{
"name": "srb_mod_compare_6-small.gif",
"size": "2626"
},
{
"name": "sts_body_2-small.gif",
"size": "913"
},
{
"name": "srb_mod_compare_1-small.gif",
"size": "2762"
},
{
"name": "crew_compartment_13-small.gif",
"size": "872"
}
],
"name": "images"
},
{
"children": [
{
"name": "et.html",
"size": "592"
},
{
"name": "sts_overview.html",
"size": "1276"
},
{
"name": "sts-lcc.html",
"size": "2052"
},
{
"name": "sts_asm.html",
"size": "3608"
},
{
"name": "sts_egress.html",
"size": "508"
},
{
"name": "sts-cron.html",
"size": "643"
},
{
"name": "spacelab.html",
"size": "574"
},
{
"name": "stsover-launch.html",
"size": "533"
},
{
"name": "mission_profile.html",
"size": "559"
},
{
"name": "sts_mes.html",
"size": "655"
},
{
"name": "sts-eps.html",
"size": "507"
},
{
"name": "srb.html",
"size": "1139"
},
{
"name": "sts-mps.html",
"size": "832"
},
{
"name": "stsover.html",
"size": "502"
},
{
"name": "stsref-toc.html",
"size": "6244"
},
{
"name": "sts_coord.html",
"size": "1027"
}
],
"name": "sts-newsref"
}
],
"name": "technology"
},
{
"children": [
{
"children": [
{
"name": "discovery-logo.gif",
"size": "1336"
},
{
"name": "atlantis.html",
"size": "1247"
},
{
"name": "enterprise.html",
"size": "645"
},
{
"name": "challenger-logo.gif",
"size": "1871"
},
{
"name": "discovery.html",
"size": "1537"
},
{
"name": "orbiters.html",
"size": "1511"
},
{
"name": "columbia-logo.gif",
"size": "1653"
},
{
"name": "orbiters-logo.gif",
"size": "7130"
},
{
"name": "enterprise-logo.gif",
"size": "617"
},
{
"name": "endeavour.html",
"size": "4341"
},
{
"name": "endeavour-logo.gif",
"size": "3741"
},
{
"name": "atlantis-logo.gif",
"size": "1104"
},
{
"name": "columbia.html",
"size": "1874"
},
{
"name": "challenger.html",
"size": "2116"
}
],
"name": "orbiters"
}
],
"name": "resources"
},
{
"children": [
{
"name": "liftoff.html",
"size": "6588"
},
{
"children": [
{
"name": "livevideo2.gif",
"size": "6163"
},
{
"name": "sts-69-prelaunch-pad.gif",
"size": "1904"
},
{
"name": "livevideo.jpeg",
"size": "3164"
}
],
"name": "video"
},
{
"name": "count.html",
"size": "752"
},
{
"children": [
{
"name": "back.gif",
"size": "1573"
},
{
"name": "fr.gif",
"size": "1608"
},
{
"name": "fr.html",
"size": "1851"
}
],
"name": "lps"
},
{
"name": "tour.html",
"size": "1049"
},
{
"name": "countdown.html",
"size": "3372"
},
{
"children": [],
"name": "22227"
},
{
"children": [
{
"name": "countclock.gif",
"size": "7925"
}
],
"name": "images"
}
],
"name": "countdown"
}
],
"name": "shuttle"
},
{
"children": [
{
"children": [
{
"name": "mercury.html",
"size": "2019"
},
{
"name": "mercury-spacecraft.txt",
"size": "544"
},
{
"children": [
{
"name": "mr-3.html",
"size": "798"
},
{
"name": "mr-3-patch-small.gif",
"size": "998"
}
],
"name": "mr-3"
}
],
"name": "mercury"
},
{
"children": [
{
"name": "astp.html",
"size": "707"
},
{
"name": "astp-patch-small.gif",
"size": "689"
}
],
"name": "astp"
},
{
"name": "history.html",
"size": "9481"
},
{
"name": "rocket-history.txt",
"size": "1243"
},
{
"name": "early-astronauts.txt",
"size": "941"
},
{
"children": [
{
"name": "gemini.html",
"size": "1427"
},
{
"children": [
{
"name": "gemini-logo.gif",
"size": "867"
}
],
"name": "images"
},
{
"children": [
{
"name": "gemini-launch.mpg",
"size": "595"
}
],
"name": "movies"
}
],
"name": "gemini"
},
{
"children": [
{
"name": "skylab-logo.gif",
"size": "654"
},
{
"name": "skylab.html",
"size": "1548"
},
{
"name": "skylab-small.gif",
"size": "1514"
}
],
"name": "skylab"
},
{
"children": [
{
"children": [
{
"name": "apollo-14.html",
"size": "520"
}
],
"name": "apollo-14"
},
{
"children": [
{
"name": "apollo-1-patch-small.gif",
"size": "1305"
},
{
"name": "apollo-1.html",
"size": "1389"
},
{
"children": [],
"name": "528"
},
{
"name": "apollo-1-info.html",
"size": "549"
}
],
"name": "apollo-1"
},
{
"children": [
{
"name": "apollo-17.html",
"size": "1039"
},
{
"name": "apollo-17-patch-small.gif",
"size": "980"
}
],
"name": "apollo-17"
},
{
"name": "apollo-sa.html",
"size": "608"
},
{
"children": [
{
"name": "apollo-10.html",
"size": "562"
},
{
"name": "apollo-10-patch-small.gif",
"size": "510"
}
],
"name": "apollo-10"
},
{
"name": "apollo-spacecraft.txt",
"size": "1866"
},
{
"name": "apollo-goals.txt",
"size": "674"
},
{
"children": [
{
"children": [],
"name": "1219"
},
{
"name": "docs",
"size": "531"
},
{
"name": "apollo-13-patch-small.gif",
"size": "5835"
},
{
"name": "apollo-13-info.html",
"size": "1757"
},
{
"name": "apollo-13-patch.jpg",
"size": "569"
},
{
"children": [
{
"children": [],
"name": "960"
},
{
"name": "apo13damage.mpg",
"size": "526"
}
],
"name": "movies"
},
{
"name": "sounds",
"size": "737"
},
{
"children": [
{
"children": [],
"name": "1215"
},
{
"name": "index.gif",
"size": "584"
}
],
"name": "images"
},
{
"name": "apollo-13.html",
"size": "6661"
}
],
"name": "apollo-13"
},
{
"children": [],
"name": "836"
},
{
"children": [
{
"name": "apollo-7-patch-small.gif",
"size": "510"
},
{
"name": "apollo-7.html",
"size": "557"
}
],
"name": "apollo-7"
},
{
"name": "flight-summary.txt",
"size": "1120"
},
{
"children": [
{
"name": "apollo-15.html",
"size": "511"
}
],
"name": "apollo-15"
},
{
"children": [
{
"name": "apollo-8.html",
"size": "553"
},
{
"name": "apollo-8-patch-small.gif",
"size": "531"
}
],
"name": "apollo-8"
},
{
"children": [
{
"name": "footprint-small.gif",
"size": "8668"
},
{
"name": "little-joe.gif",
"size": "570"
},
{
"name": "APOLLO-logosmall.gif",
"size": "1062"
},
{
"name": "apollo-small.gif",
"size": "8740"
},
{
"name": "footprint-logo.gif",
"size": "9177"
},
{
"name": "apollo-logo.gif",
"size": "4144"
},
{
"name": "apollo.gif",
"size": "904"
}
],
"name": "images"
},
{
"children": [
{
"name": "apollo-11.html",
"size": "2974"
},
{
"name": "apollo-11-patch-small.gif",
"size": "2583"
}
],
"name": "apollo-11"
},
{
"name": "apollo.html",
"size": "8313"
}
],
"name": "apollo"
}
],
"name": "history"
},
{
"children": [
{
"name": "updated.gif",
"size": "1438"
},
{
"name": "endball.gif",
"size": "1510"
},
{
"name": "new01.gif",
"size": "1369"
},
{
"name": "elvpage.htm",
"size": "2349"
},
{
"name": "struct.gif",
"size": "1445"
},
{
"children": [
{
"name": "atlas.gif",
"size": "1464"
}
],
"name": "ATLAS_CENTAUR"
},
{
"name": "elvhead2.gif",
"size": "1270"
},
{
"children": [
{
"name": "scout.gif",
"size": "1482"
}
],
"name": "SCOUT"
},
{
"children": [
{
"name": "minpeg1.gif",
"size": "1486"
}
],
"name": "PEGASUS"
},
{
"children": [
{
"name": "delta.htm",
"size": "502"
},
{
"name": "delta.gif",
"size": "1474"
}
],
"name": "DELTA"
},
{
"name": "elvhead3.gif",
"size": "1634"
},
{
"children": [
{
"name": "titan.gif",
"size": "1469"
}
],
"name": "TITAN"
}
],
"name": "elv"
},
{
"children": [
{
"name": "text.xbm",
"size": "4892"
},
{
"name": "movie.xbm",
"size": "1042"
},
{
"name": "menu.xbm",
"size": "10717"
},
{
"name": "blank.xbm",
"size": "10572"
},
{
"name": "sound.xbm",
"size": "665"
},
{
"name": "unknown.xbm",
"size": "4188"
},
{
"name": "image.xbm",
"size": "9158"
}
],
"name": "icons"
},
{
"children": [
{
"name": "facts.html",
"size": "1103"
},
{
"name": "about_ksc.html",
"size": "2044"
},
{
"name": "faq04.html",
"size": "1481"
}
],
"name": "facts"
},
{
"children": [
{
"name": "cdt_main.pl",
"size": "17236"
},
{
"name": "wais.pl",
"size": "2131"
},
{
"name": "cdt_clock.pl",
"size": "7925"
}
],
"name": "htbin"
},
{
"name": "whats-new.html",
"size": "1845"
},
{
"children": [
{
"children": [
{
"name": "jmd.html",
"size": "521"
}
],
"name": "nasa-cm"
}
],
"name": "persons"
},
{
"children": [
{
"name": "faq.gif",
"size": "2701"
},
{
"name": "mercury-logo.gif",
"size": "1981"
},
{
"name": "launch.gif",
"size": "1464"
},
{
"name": "launchpalms-small.gif",
"size": "1907"
},
{
"name": "ksclogo.gif",
"size": "1799"
},
{
"name": "lcc-small2.gif",
"size": "1111"
},
{
"name": "rss.gif",
"size": "1327"
},
{
"name": "mlp-logo.gif",
"size": "1246"
},
{
"name": "kscmap-small.gif",
"size": "2090"
},
{
"name": "landing-small.gif",
"size": "1441"
},
{
"name": "gemini-logo.gif",
"size": "1262"
},
{
"name": "ksclogosmall.gif",
"size": "25209"
},
{
"name": "vab-small.gif",
"size": "1789"
},
{
"name": "lc39a-logo.gif",
"size": "3952"
},
{
"name": "kscmap-tiny.gif",
"size": "6363"
},
{
"name": "opf-logo.gif",
"size": "599"
},
{
"name": "lc39a.gif",
"size": "606"
},
{
"children": [],
"name": "6993"
},
{
"name": "launchmedium.gif",
"size": "18323"
},
{
"name": "KSC-94EC-412-small.gif",
"size": "1142"
},
{
"name": "construct.gif",
"size": "4456"
},
{
"name": "shuttle-patch-logo.gif",
"size": "6779"
},
{
"name": "launch-small.gif",
"size": "2170"
},
{
"name": "whatsnew.gif",
"size": "1874"
},
{
"name": "op-logo-small.gif",
"size": "866"
},
{
"name": "shuttle-patch-small.gif",
"size": "4611"
},
{
"name": "landing-logo.gif",
"size": "602"
},
{
"name": "crawler-logo.gif",
"size": "615"
},
{
"name": "dual-pad.gif",
"size": "586"
},
{
"name": "rollback.gif",
"size": "1185"
}
],
"name": "images"
},
{
"children": [
{
"name": "MDSS.html",
"size": "1068"
},
{
"name": "s_md-2.gif",
"size": "964"
}
],
"name": "mdss"
},
{
"children": [
{
"name": "brrow_1t.gif",
"size": "818"
},
{
"name": "collsm1.gif",
"size": "902"
},
{
"name": "webserch.gif",
"size": "832"
},
{
"name": "book.gif",
"size": "827"
},
{
"name": "links.gif",
"size": "840"
},
{
"name": "suit.gif",
"size": "842"
},
{
"name": "main.htm",
"size": "936"
},
{
"name": "toairpla.gif",
"size": "823"
},
{
"name": "ref_btn.gif",
"size": "837"
},
{
"name": "tour.gif",
"size": "823"
}
],
"name": "finance"
},
{
"children": [
{
"children": [
{
"name": "winvn.html",
"size": "9243"
},
{
"children": [
{
"name": "winvnsm.gif",
"size": "625"
},
{
"name": "wvnguide.html",
"size": "701"
},
{
"name": "wvnguide.gif",
"size": "585"
}
],
"name": "userguide"
},
{
"name": "bluemarb.gif",
"size": "7319"
},
{
"children": [
{
"name": "WINVNFAQ-Contents.html",
"size": "797"
}
],
"name": "faq"
},
{
"name": "wvlarge.gif",
"size": "853"
},
{
"name": "winvn.gif",
"size": "7808"
},
{
"name": "wvsmall.gif",
"size": "7426"
}
],
"name": "winvn"
}
],
"name": "software"
}
],
"name": "master_node"
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #fff;
fill-rule: evenodd;
}
text {
font-family: Arial, sans-serif;
/*font-size: 12px;*/
}
svg{
overflow: visible
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #fff;
width: 3000px;
height: 2200px;
margin-top: 10px;
}
#main {
float: left;
/*width: 750px;*/
margin-top: 50px;
}
input{
position: fixed;
top: 78px;
}
#sequence {
width: 100%;
height: 8%;
position: fixed;
z-index: 999999;
background: rgba(255, 255, 255, 11);
top: 0px;
padding-top: 10px;
}
#legend {
padding: 10px 0 0 3px;
}
#sequence text, #legend text {
font-weight: 600;
/*font-size: 25px;*/
fill: #fff;
}
#chart {
position: relative;
}
#chart path {
stroke: #fff;
}
#explanation {
position: absolute;
top: 260px;
left: 305px;
width: 140px;
text-align: center;
color: #666;
z-index: -1;
}
#percentage {
font-size: 2.5em;
}
.go-to{
z-index: 9999;
position: absolute;
top: 200px;
left:100px;
}
</style>
<body>
<div id="sequence"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://papaparse.com/resources/js/papaparse.js"></script>
<script>
/***********************************OPTIONS**********************************************************/
var HIGHLIGHT = false
var SHADOW = false
var USE_COLOR = true
var DESCRIPTION = true
var DATA_FILE = "data_nasa.json"
var COLOR_FILE = "colors.csv"
var TEXT_ADAPTATION = false
var MIDDLE = true
var SUB_POLYGON_PERCENT = true
/****************************************************************************************************/
if(USE_COLOR){
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
var allText
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
allText = rawFile.responseText;
// alert(allText);
}
}
}
rawFile.send(null);
return allText
}
file = readTextFile(COLOR_FILE)
var result = Papa.parse(file, {
header: true,
complete: function(results) {
console.log("Finished:", results.data);
}
});
var colors = {};
for (var i = 0, emp; i < result.data.length; i++) {
emp = result.data[i];
colors[ emp.name ] = emp["color"];
}
console.log(colors)
}
/****************************************************************************************************/
var marge_x = 0, marge_y = 30, marge_str ="Value : "
if(MIDDLE == false){
marge_x = 110
marge_y = 0
marge_str ="/ "
}
var TextSize =15 ;
var Size = 800;
var width = Size ,
height = Size ,
radius = Math.min(width, height) / 2 ;
var totalSize = 0
var initialTotalSize = 0
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 150, h: 30, s: 2, t: 20
};
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.linear()
.range([0, radius]);
var color = d3.scale.category20c();
getDepth = function (obj) {
var depth = 0;
if (obj.children) {
obj.children.forEach(function (d) {
var tmpDepth = getDepth(d)
if (tmpDepth > depth) {
depth = tmpDepth
}
})
}
return 1 + depth
}
var arc;
var dep = []
var currClick;
var svg = d3.select("body").append("svg")
// .attr("width", Size * 2)
// .attr("height",Size *2 + 600)
.attr("id", "main")
.append("g")
.attr("id", "container")
.attr("transform", "translate(" + (Size/2 )+ "," + (Size/ 2 ) + ")");
var highlight = d3.select("#main g").append("path")
.attr("d", null)
.attr("id", "highligth")
.style("fill", "#eee")
.style("stroke", "#000");
var arcHighlight = 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, y(2.8)); })
.outerRadius(function(d) { return y(0); });
function createVisualization(){
d3.json(DATA_FILE, function(error, root) {
function isParent(s) {
return Boolean(s.children && s.children.length > 0);
}
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
var nodes = partition.nodes(root)
// .filter(function(d) {
// return (d.dx > 0.0005); // 0.005 radians = 0.29 degrees
// });
//console.log("depth" +getDepth(root))
for(var i=1; i<=getDepth(root); i++) {
dep.push(0);
}
var g = svg.selectAll("g")
.data(nodes)
.enter().append("g");
var path = g.append("path").attr("id", "circle")
.style("fill", (function(d) {
if(d.name instanceof Array)
d.name = d.name[0]
if(USE_COLOR){
if(d.name == "data") console.log(d.color)
if(d.color) return d.color
else if(d.name in colors) return colors[d.name]
else return color((d.children ? d : d.parent).name)
}else{
return color((d.children ? d : d.parent).name)
}
// return USE_COLOR ? d.color : color((d.children ? d : d.parent).name) ;
}))
.attr("title",(function(d) { return d.name; }))
.on("click", click)
.on("mouseover", mouseover);
initialTotalSize = path.node().__data__.value
console.log('initial... ',initialTotalSize)
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
totalSize = path.node().__data__.value
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {
//console.log(d)
if ( currClick === undefined || (d.x >= d.x && d.x < (currClick.x + currClick.dx) ) ){
if(HIGHLIGHT)
highlight.attr("d", arcHighlight(d));
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "%";
if (percentage < 0.1) {
percentageString = "< 0.1%";
}
var sequenceArray = getAncestors(d);
console.log(sequenceArray)
if(SUB_POLYGON_PERCENT == true && currClick !== undefined && currClick.depth != 0 ){
finalSec= []
for(i=0;i<sequenceArray.length;i++){
// console.log(sequenceArray[i] +'!='+ currClick)
if( sequenceArray[i] != currClick) finalSec.push( sequenceArray[i] )
else break
}
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
sequenceArray = sequenceArray.diff(finalSec)
// console.log(sequenceArray.diff(finalSec) )
}
// console.log(sequenceArray)
if(DESCRIPTION)
updateBreadcrumbs(sequenceArray, percentageString, d.value );
// // Fade all the segments.
if(SHADOW)
d3.selectAll("path#circle")
.style("opacity", 0.4);
// Then highlight only those that are an ancestor of the current segment.
svg.selectAll("path#circle")
.filter(function(node) {
return (sequenceArray.indexOf(node) >= 0);
})
.style("opacity", 1);
}
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {
if(HIGHLIGHT)
highlight.attr("d", null);
if(DESCRIPTION)
// // Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
d3.select("#trail").selectAll('g').remove();
if(SHADOW){
// // // // Deactivate all segments during transition.
d3.selectAll("path#circle").on("mouseover", null);
// // // Transition each segment to full opacity and then reactivate it.
d3.selectAll("path#circle")
.transition()
.duration(100)
.style("opacity", 1)
.each("end", function() {
d3.select(this).on("mouseover", mouseover);
});
}
}
function adjust(str){
if(str.length > 8)
return str.substring(0,8)
else return str
}
for (var i = 0; i < dep.length; i++ ) {
svg.selectAll("path#circle").each(function (d, j) {
if( d.dx >= 0.01 ){
dep[d.depth] = Math.max(dep[d.depth], ( TextSize*adjust(d.name).length*0.2/30 ) /10 );
}
});
}
if(TEXT_ADAPTATION){
for (var i = 0; i < dep.length; i++ ) {
svg.selectAll("path#circle").each(function (d, j) {
if(d.depth==i){
var su = 0
for(var l = 0; l < i; l++ ) su = su + dep[l]
// d.y0 = d.y
// d.y0 = d.y + su
d.y = d.y + su
// //console.log("d.y :"+d.y)
// //console.log("d.y0 :"+d.y0)
}
});
}
su = 0
for(var l = 0; l < dep.length; l++ ) su = su + dep[l]
//console.log(su)
Size = ( Size + y(su) )
//console.log(Size)
// radius = Size/2
d3.select("g#container").attr("width", Size )
.attr("height", Size )
.attr("transform", "translate(" + Size + "," + Size + ")");
}
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("depth", function(d) { return d.depth })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("font-size", TextSize)
// .attr("visibility", "visible")
.attr("visibility",function(d) { return d.dx < 0.01? "hidden" : "visible"})
.text(function(d) { return !isParent(d) ? d.name : adjust(d.name) ; })
.attr("title",(function(d) { return d.name; }))
.on("click", click)
.on("mouseover", mouseover);
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, y(d.y)); })
.outerRadius(function(d) {
// //console.log(d)
if(TEXT_ADAPTATION) return Math.max(0, y(d.y + d.dy + dep[d.depth] ));
else return Math.max(0, y(d.y + d.dy ));
});
svg.selectAll("path#circle").attr("d", arc)
var childs = []
function allDescendants(node) {
if(node.hasOwnProperty('children'))
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
childs.push(child.name)
if(child.hasOwnProperty('children')){
allDescendants(child);
}
}
}
function click(d) {
currClick = d
// // Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
d3.select("#trail").selectAll('g').remove();
childs = []
if(SUB_POLYGON_PERCENT == true)
totalSize = d.value
else totalSize = initialTotalSize
allDescendants(d)
//console.log(childs)
// fade out all text elements
text.transition().attr("opacity", 0);
svg.selectAll("path#circle").attr("opacity", 1)
var coef = Math.pow(10, -1 * (d.depth + 2) );
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx) ) {
var traadeoff = e.depth - d.depth
var newDx = Math.min(2 * Math.PI, x(e.x + e.dx)) - Math.min(2 * Math.PI, x(e.x))
L = newDx * Math.PI * (e.y + e.dy) / 180
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("visibility",function() {
return ( L < 0.0005) ? "hidden" : "visible"
})
.attr("x", function(d) { return y(d.y); })
}
});
}
});
}
// Interpolate the scales!
function arcTween(d) {
var r = radius
//console.log(d.y)
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
initializeBreadcrumbTrail()
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", width)
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000")
.style("font-size", TextSize);
trail.append("svg:text")
.attr("id", "endlabelSize")
.style("fill", "#000")
.attr("font-size", TextSize)
}
function cropDname(name,n){
if(name.length > n){
return name.substring(0,n) + "...";
}else return name
}
var sequenceLength = 0
function definePolygonesLevel(nodes,max){
current = 0
levels = {}
currentLevel = 0
for(var i = 0; i < nodes.length; i++){
current = current + Math.max(TextSize*b.w/22,TextSize*(nodes[i].name.length*500/33)/22);
// //console.log( current +" <= "+ max )
if (current <= max){
// levels.push({i : currentLevel })
levels[i] = currentLevel
}else{
// levels.push({i : currentLevel + 1 })
levels[i] = currentLevel + 1
currentLevel++;
current = Math.max(TextSize*b.w/22,TextSize*(nodes[i].name.length*500/33)/22)
}
}
return levels
}
var currLev=0;
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString,value) {
// //console.log("ist with : "+0.8*screen.width)
var levels = definePolygonesLevel(nodeArray, 0.8*screen.width)
// //console.log(levels)
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function(d) { return d.name + d.depth; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", (function(d,i){
var points = [];
var newpoints = [];
var w = Math.max(TextSize*b.w/22,TextSize*(d.name.length*500/33)/22)
// console.log(d.name[0],' ',w)
points.push("0,0");
points.push(w + ",0");
points.push(w + b.t + "," + (b.h / 2));
points.push(w + "," + b.h);
points.push("0," + b.h);
// if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
// points.push(b.t + "," + (b.h / 2));
// }
newpoints.push("0," + (40*levels[i]) );
newpoints.push(w + ","+ (40*levels[i]) );
newpoints.push(w + b.t + "," + (b.h / 2 + 40*levels[i]) );
newpoints.push(w + "," + (b.h + 40*levels[i]) );
newpoints.push("0," + ( b.h + 40*levels[i]));
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
newpoints.push(b.t + "," + (b.h / 2 + 40*levels[i]));
}
// //console.log(i)
// //console.log(levels[i])
// //console.log(newpoints.join(" "))
points = newpoints
return points.join(" ");
}))
.style("fill", (function(d) {
if(USE_COLOR){
if(d.color) return d.color
else if(d.name in colors) return colors[d.name]
else return color((d.children ? d : d.parent).name)
}else{
return color((d.children ? d : d.parent).name)
}
// return USE_COLOR ? d.color : color((d.children ? d : d.parent).name) ;
}))
.attr("title",(function(d) {
return d.name; }));
// Set position for entering and updating nodes.
var wLastOne = 0;
currLev = 0
g.attr("transform", function(d, i) {
var w = wLastOne
toTestWith = wLastOne
wLastOne = w + Math.max(TextSize*b.w/22,TextSize*(d.name.length*500/33)/22 ) +0
sequenceLength = wLastOne
// console.log(d.name,' ',(wLastOne )+ ">" + 0.8*screen.width + "("+screen.width+")")
if( (wLastOne) > 0.8*screen.width ){
w=0;
currLev++;
wLastOne = Math.max(TextSize*b.w/22,TextSize*(d.name.length*500/33)/22 ) + 0;
}
// console.log("translate(" + (w+ b.s) + ","+currLev*1+")")
return "translate(" + (w+ b.s) + ","+currLev*1+")";
});
entering.append("svg:text")
.attr("x", 25)
.attr("y",function(d,i) { return 40*levels[i] + b.h / 2 } )
.attr("dy", "0.35em")
// .attr("text-anchor", "middle")
.attr("font-size", TextSize)
.text(function(d) {
return d.name; });
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
var arr = Object.keys( levels ).map(function ( key ) { return levels[key]; });
var m = Math.max.apply( null, arr );
if(currLev == 0) yy = b.h / 2
else yy = b.h / 2 *(currLev+1) + 25
// if(m != 0) yy = yy + m * 30 + 10
if(m != 0) yy = yy + m * 1
addon = 0
if(wLastOne == 0) addon = 50
x_text1 = wLastOne + 80 + addon
x_text2 = wLastOne + marge_x + addon
d3.select("#trail").select("#endlabel")
.attr("x", x_text1)
.attr("y",yy )
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-size", TextSize)
.text(percentageString);
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabelSize")
.attr("x", x_text2)
.attr("y", yy+marge_y)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-size", TextSize)
.text(marge_str+value);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function breadcrumbPoints(d, i) {
var points = [];
var w = Math.max(TextSize*b.w/22,TextSize*(d.name.length*500/33)/22 )
points.push("0,0");
points.push(w + ",0");
points.push(w + b.t + "," + (b.h / 2));
points.push(w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
createVisualization()
// linear-gradient( 90deg, transparent, transparent 50%, 10 50%, red 50%, transparent 50%)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment