3e:null 3f:["$","title",null,{"children":"viz for social good | Sarah Hodges | Observable"}] 45:T9ae,radialChart = { const root = radialTree(hierarchyData); const svg = d3.create("svg"); //links svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .attr("stroke", d => { return d.source.depth === 1 ? '#e12fe6' : d.source.depth === 2 ? '#129f9a' : d.source.depth === 3 ? 'blue' : '#ff4e00' }); //dots svg.append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `) .attr("fill", d => d.children ? "#555" : "green") .attr('stroke', d => d.children ? 'none' : 'lightgreen') .attr("r", 3); //labels svg.append("g") .attr("font-family", "Libre Franklin") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .attr("font-size", d => d.depth === 1 ? 16 : d.depth === 2 ? 14 : d.depth === 3 ? 13 : d.depth === 4 ? 10 : 20) .attr("font-weight", d => d.depth !== 4 ? 'bold' : 'regular') .attr('fill', d => d.depth === 1 ? '#e12fe6' : d.depth === 2 ? '#129f9a' : d.depth === 3 ? 'blue' : '#ff4e00') .append('a') .attr("xlink:href", d => d.depth === 4 ? d.data[1][0].url : null) .attr('target', '_blank') .attr('fill', d => d.depth === 4 ? '#00a0ff' : null) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut) .text(d => { return d.depth === 3 ? d.children[0].data[1][0].charityName : d.data[0] }) svg.selectAll('text') .clone(true).lower() .attr("stroke", d => d.depth === 4 ? 'none' : 'white') return svg.attr("viewBox", autoBox).node(); } 46:[{"id":"264d80bd6accbf5bd5b1447c0b998e0ef83ba023a93710dd556ac9bb0f79469cabfa79580123a77e2d1af56828a019f7eede61d7b6446f40a3b53aed5a19304c","href":"https://static.observableusercontent.com/files/264d80bd6accbf5bd5b1447c0b998e0ef83ba023a93710dd556ac9bb0f79469cabfa79580123a77e2d1af56828a019f7eede61d7b6446f40a3b53aed5a19304c","name":"vfsg@7.json","type":"application/json","lastModified":1606783939483.204,"size":213638}] 43:{"id":"5169057ad8a74fda","slug":"viz-for-social-good","title":"viz for social good","thumbnail":"ea65393aa24ac8311d030143abec617d376ee9d8b33868cf3117e3fe5a780192","access_level":"public","create_time":"$D2020-11-30T02:25:46.487Z","update_time":"$D2021-03-31T22:54:05.049Z","view_time":null,"first_public_time":"$D2020-12-01T06:23:33.280Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"63589c9b914b39f0","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":"starter_2024","bio":"Software engineer working primarily with front-end technologies. I live at the intersection of design and code. "},"version":916,"publish_version":916,"role":null,"authored":false,"authors":[{"type":"individual","id":"11efa6890f936ea4","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":null,"bio":"Software engineer working primarily with front-end technologies. I live at the intersection of design and code. "}],"members":[{"type":"individual","id":"11efa6890f936ea4","login":"slhstudio","name":"Sarah Hodges","avatar_url":"https://avatars-next.observableusercontent.com/1b8758afd9a7e3e504d733f611138b9b2f973ac568878138929e54f2e5869411","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"viz for social good","cells":[{"id":0,"value":"html`

viz for social good

`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"html`

Viz for Social Good empowers mission-driven organizations to harness the power of data visualization for social change. We bring together passionate data professionals with social organizations to collaborate on data visualization projects to tackle critical social issues.

Since 2017, Viz for Social Good has reached 13 countries around the world, working in 13 sectors with 29 different organizations, drawing on the skills of 344 volunteer data visualizers hailing from 36 different countries.

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"html`

Together, we have shed light on countless rows of data, uncovering insights that have made a deep impact in these communities. Seeing is believing!

Highlighted volunteer: ${input}

Each volunteer’s name is a link to their visualization. Many of us have contributed more than once; each instance of a contributor is highlighted when you hover over a name.

For more information on how to get involved either as an organization in need of data visualization, or as a volunteer who wants to do some visualizing, please visit Viz for Social Good.

Appendix

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function handleMouseOver (d) {\n if (d.target.href.baseVal) {\n const name = d.target.textContent\n d3.selectAll('a') \n .filter(function(){ \n if (this.innerHTML === name) {\n return d3.select(this)\n }\n })\n .attr('fill', '#ff4e00')\n input.value = name\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"function handleMouseOut (d) {\n if (d.target.href.baseVal) {\n const name = d.target.textContent\n d3.selectAll('a') \n .filter(function(){ \n if (this.innerHTML === name) {\n return d3.select(this)\n }\n })\n .attr('fill', '#00a0ff')\n input.value = ''\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"radialTree = d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"jsonData = FileAttachment(\"vfsg@7.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"vfsgNested = d3.group(jsonData, d => d.charityCountry, d => d.topic, d => d.ProjectId, d => d.volunteer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"childrenAccessorFn = ([ key, value ]) => value.size && Array.from(value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"hierarchyData = d3.hierarchy(['VFSG',vfsgNested], childrenAccessorFn)\n// .sum(([key, value]) => value)\n// .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"radius = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 1600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"