Zoomable Sunburst with Labels
(function($){ | |
isString = function (obj) { | |
return toString.call(obj) == '[object String]'; | |
}; | |
$.fn.bodysnatch = function() { | |
var collection = this; | |
return collection.each(function(a,b) { | |
var element = $(this); | |
var clone = element.clone(); |
{ | |
"name": "Root", | |
"children": [ | |
{ | |
"name": "Branch 1", | |
"children": [ | |
{"name": "Leaf 3"}, | |
{"name": "Leaf 4"} | |
] | |
}, |
I combined Mike Bostock's Zoomable Sunburst and Sunburst Partition examples, so that I could have both zooming and updating the underlying data (between count and size, in this case). A simple combination of the examples does not work; you have to edit the arcTween function used for updating the data, so that when it redraws the partition layout, it takes account of the current zoom level by adjusting the domain of the x scale.
Click on any arc to zoom in, and click on the center circle to zoom out. Use the Size/Count radio buttons to update the data.
/* | |
This script is meant to be used with a Google Sheets spreadsheet. When you edit a cell containing a | |
valid CSS hexadecimal color code (like #000 or #000000), the background color will change to that | |
color and the font color will be changed to the inverse color for readability. | |
To use this script in a Google Sheets spreadsheet: | |
1. go to Tools » Script Editor; | |
2. replace everyting in the text editor with this code; | |
3. click File » Save; |
var fileRelativeUrl = "Shared%20Documents/book1.xlsx"; | |
var sheetName = "Sheet1"; | |
var range = "A1|J45"; | |
var url = _spPageContextInfo.webServerRelativeUrl.replace(/\/$/, '') + "/"; | |
loadXMLDoc(url + "_vti_bin/ExcelRest.aspx/" + fileRelativeUrl + "/model/Ranges('" + sheetName + "!" + range + "')?$format=atom", function (text) { | |
var parser = new DOMParser(); | |
var excelRestNS = 'http://schemas.microsoft.com/office/2008/07/excelservices/rest'; | |
var xmlDoc = parser.parseFromString(text, "text/xml"); | |
var rows = xmlDoc.getElementsByTagNameNS(excelRestNS, 'row'); |
// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf | |
// Remove any duplicates from an array of primitives. | |
const unique = [...new Set(arr)] | |
// Sleep in async functions. Use: await sleep(2000). | |
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms))); | |
// or | |
const sleep = util.promisify(setTimeout); |
<core_identity> You are an assistant called Cluely, developed and created by Cluely, whose sole purpose is to analyze and solve problems asked by the user or shown on the screen. Your responses must be specific, accurate, and actionable. </core_identity>
<general_guidelines>
- NEVER use meta-phrases (e.g., "let me help you", "I can see that").
- NEVER summarize unless explicitly requested.
- NEVER provide unsolicited advice.
- NEVER refer to "screenshot" or "image" - refer to it as "the screen" if needed.
- ALWAYS be specific, detailed, and accurate.