2b:null 2c:["$","title",null,{"children":"Charity Benchmark Dashboard -BU | Steve Pegg | Observable"}] 31:T5842,chart = { // Initialize svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // var svg = d3.select(DOM.svg(width, height)); var domainwidth = width - margin.left - margin.right, domainheight = height - margin.top - margin.bottom; var x = d3.scaleLinear() .domain([1,6]) .range([0, domainwidth]); var y = d3.scaleLinear() .domain([1,6]) .range([domainheight, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.top + "," + margin.top + ")"); g.append("rect") .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#F6F6F6"); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + y.range()[0] / 2 + ")"); // `translate(0, ${y.range()[0]} / 2)` ??? // .call(d3.axisBottom(x).ticks(6)); g.append("g") .attr("class", "y axis") .attr("transform", "translate(" + x.range()[1] / 2 + ", 0)"); // .call(d3.axisLeft(y).ticks(6)); var br = g.append("svg") .attr('class', 'seg') .attr("x", x(3.5)) .attr("y", y(3.5)) br.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "lightblue") .attr("opacity", 0.5); var bl = g.append("svg") .attr('class', 'seg') .attr("x", x(1)) .attr("y", y(3.5)) bl.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "lightblue") .attr("opacity", 0.5); var tl = g.append("svg") .attr('class', 'seg') .attr("x", x(1)) .attr("y", y(6)) tl.append("rect") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "lightblue") .attr("opacity", 0.5); var tr = g.append("svg") .attr('class', 'seg') .attr("x", x(3.5)) .attr("y", y(6)) tr.append("rect") .attr("class", "pos") .attr("width", x(6) - x(3.5)) .attr("height", y(3.5)) .attr("fill", "lightblue") .attr("opacity", 0.5); ///Legend //// var segwidth = tr.select(".pos").attr("width") tr.selectAll("mydots") .data(["income","expenditure","staff_cost","counselling_cost"]) .enter() .append("circle") .attr("cx",segwidth/1.5) .attr("cy", function(d,i){ return 75 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots .attr("r", 5) .style("fill", function(d){ return color(d)}) // Add one dot in the legend for each name. tr.selectAll("mylabels") .data(["income","expenditure","staff_cost","counselling_cost"]) .enter() .append("text") .attr("x", (segwidth/1.5)+10) .attr("y", function(d,i){ return 75 + i*20}) // 100 is where the first dot appears. 25 is the distance between dots // .style("fill", function(d){ return color(d)}) .text(function(d){ return d}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .attr("font-family" , "sans-serif") .attr("font-size" , "12px") .attr("fill" , "black") const t = svg.transition() .duration(750); // tl.selectAll("mydots") // .data(["counselling","staff_cost"]) // .enter() // .append("circle") // .attr("cx",(segwidth/1.5)) // .attr("cy", function(d,i){ return 60 + i*15}) // 100 is where the first dot appears. 25 is the distance between dots // .attr("r", 5) // .style("fill", function(d){ return colorTL(d)}) /// Add one dot in the legend for each name. //tl.selectAll("mylabels") // .data(["based on cost of service","based on staff cost"]) //.enter() // .append("text") // .attr("x", (segwidth/1.5) +10) // .attr("y", function(d,i){ return 60 + i*15}) // 100 is where the first dot appears. 25 is the distance between dots /// .style("fill", function(d){ return color(d)}) // .text(function(d){ return d}) // .attr("text-anchor", "left") // .style("alignment-baseline", "middle") // .attr("font-family" , "sans-serif") // .attr("font-size" , "12px") // .attr("fill" , "black") ////TEXT FIELDS tl.append("text") .attr("class", "testing") .attr("x", width/4) .attr("y", margin.top + 5) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text("Counselling Unit cost (£) based on total expenditure"); tl.selectAll("text") .each(function(d, i) { wrap_text_nchar(d3.select(this), 35) }); tr.append("text") .attr("class", "testing") .attr("x", width/3) .attr("y", margin.top + 7) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text("Expenditure by Year"); tr.selectAll("text") .each(function(d, i) { wrap_text_nchar(d3.select(this), 50) }); br.append("text") .attr("class", "testing") .attr("x", width/3) .attr("y", margin.top + 5) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text("Charity Counselling unit cost(£) by Year"); br.selectAll("text") .each(function(d, i) { wrap_text_nchar(d3.select(this), 28) }); //Chart TOP LEFT //////////////////// tl.append("g").call(g => drawGuidelines(g, data.map(d => d.shortname), d => d3.line()([[xScaleTL(d) + hx, margin.top],[xScaleTL(d) + hx, (height/2) - margin.bottom]])) ); tl.append("g") .selectAll(".bar") .data(data) .join("rect") .attr('class', function (d) {return d.shortname + 'staff_HC' + ' bar'}) // d => d.shortname .attr('id', function (d) {return (d.shortname + 'tl')}) .attr('id2', "staff_HC") .attr('x', d => xScaleTL(d.shortname)) .attr('y', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(i)}) .attr('width', xScaleTL.bandwidth()) .attr('height', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(0) - yScaleTL(i)}) .style('fill', function (d) {return colorTL(d.algorithm)}) .on("mouseover", mouseover) .on("mouseout", mouseout) .append('title') .text(function(d){return d.charity;}); tl.append("g").selectAll(".desc") .data(data) .join("text") .attr('class',"desc") .text(function (d) {return d.missed}) .attr('x', d => xScaleTL(d.shortname) + xScaleTL.bandwidth()/1.5) .attr('y', function (d) {return yScaleTL(d.unit_cost) - 5}) .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle"); const gtl = tl.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) .call(xAxisTL); gtl.transition(t) .call(xAxisTL) .selectAll("text") .attr("class", "legend-text") .attr("y", 0) .attr("x", 9) .attr('fill', 'navy') .attr("transform", "rotate(90)") .attr("text-anchor", "start"); tl.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "yellow") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") //.attr('marker-start', 'url(#dot)') .attr("d", lineTL); tl.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left },0)`) .call( yAxisTL) //Chart TOP LEFT ////////////////////END //GENERAL//////////// const tr1 = tr.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) .call( xAxisTR ) const tr2 = tr.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisTR ) const br1 = br.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) .call( xAxisBR ) const br2 = br.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisBR ) const tl1 = tl.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) // .call( xAxisTL ) const tl2 = tl.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) // .call( yAxisTL ) const bl1 = bl.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) // .call( xAxisBL ) const bl2 = bl.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) // .call( yAxisBL ) //////GENERAL END///////////// /// Chart BOTTOM LEFT/////////// bl.append("g").call(g => drawGuidelines(g, data.map(d => d.shortname), d => d3.line()([[xScaleBL(d) + hx, margin.top],[xScaleBL(d) + hx, (height/2) - margin.bottom]])) ); const bar = bl.append("g") //.attr('class', "stacky") .selectAll('g') .data(stacked) .join("g") .style('fill', (d,i) => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr('x', function (d) { return xScaleBL(d.data.shortname) + xScaleBL.bandwidth()/3}) .attr('class', function (d) { return d.data.shortname + d.key}) .attr('id', function (d) { return d.data.shortname + d.key}) .attr('id2', function (d) { return d.key}) .attr('y', d => yScaleBL(d[1])) .attr('height', d => yScaleBL(d[0]) - yScaleBL(d[1])) .attr('width', xScaleBL.bandwidth()/3) .on("mouseover", mouseover) .on("mouseout", mouseout) .append('title') .text(function(d){return d.data.charity;}); const gbl = bl.append("g") .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2.2) - margin.bottom })`) .call(xAxisBL); gbl.transition(t) .call(xAxisBL) .selectAll("text") .attr("class", "legend-text") .attr("y", 0) .attr("x", 9) .attr('fill', 'navy') .attr("transform", "rotate(90)") .attr("text-anchor", "start"); // bl.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke", "yellow") // .attr("stroke-width", 2.5) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", lineBL); bl.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "yellow") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") //.attr('marker-start', 'url(#dot)') .attr("d", lineBL2); bl.append('g') .attr('class', 'y-axis') .attr('transform', `translate(${ margin.left },0)`) .call( yAxisBL) bl.append('g') .attr('class', 'y-axis') .style('fill', 'yellow') .attr("font-family" , "sans-serif") .style("shape-rendering", "crispEdges") .attr("font-size" , "12px") // .attr("stroke" , "yellow") // .attr("stroke-width", 0.5) .attr('transform', `translate(${(width/2) - margin.left-margin.right},0)`) .call( yAxisBL2) /////setup xScaleTR.domain(["JDI","TIC"]) var datas = fiveYrExp.filter(function(e) { return e.shortname === "JDI" || e.shortname === "TIC" }) yScaleTR.domain([0,d3.max(datas, d => d.param)]) tr.append('g') .attr('class', 'bars') .selectAll('rect') .data(datas) .join('rect') .attr('class', 'bar') .attr("id", d => d.shortname) .attr('x', d => xScaleTR(d.shortname) + xBars2(d.year)) .attr('y', function(d) {return yScaleTR(d.param)}) .attr('width', xBars2.bandwidth()) .attr('height', function (d,i) { return yScaleTR(0) - yScaleTR(d.param)}) .style('fill', function(d) { return color(d.year) }) tr1.call(xAxisTR) .transition() .duration(1000) .ease(d3.easeLinear); tr2.attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisTR ) .transition() .duration(1000) .ease(d3.easeLinear); //bottom left //bottom right // xScaleBR.domain(order) //xScaleBR.domain(arr) var fiveYr_filt = fiveYr.filter(function(e) { return "TIC" }) yScaleBR.domain([0,d3.max(fiveYr_filt, d => d.param)]) br.append('g') .attr('class', 'bars') .selectAll('rect') .data(fiveYr_filt) .join('rect') .attr('class', 'bar') .attr('x', d => xScaleBR(d.category) + xScaleBR.bandwidth()/4) .attr('y', function(d) {return yScaleBR(d.param)}) .attr('width', xBars.bandwidth()) .attr('height', function (d,i) { return yScaleBR(0) - yScaleBR(d.param)}) .style('fill', function(d) {if(d.category === "income") { return "red"} else if(d.category === "expenditure") { return "blue"} else if (d.category === "staff_cost") {return "yellow"} else {return "orange"} }) br1.call(xAxisBR) .transition() .duration(1000) .ease(d3.easeLinear); br2.attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisBR ) .transition() .duration(1000) .ease(d3.easeLinear); br.append("text") .attr("class", "selection") .attr("x", width/3) .attr("y", margin.top + 50) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text("Teens in Crisis"); /////setup ////BOTTON LEFT END///////////////// function mouseout(event, d) { var sel = d3.select(this).attr("id") var sel2 = d3.select(this).attr("id2") var act = tl.selectAll("." + sel) if(sel === "tl") { act.style("fill", colorTL(d.algorithm)) } else { //'#7472c0' act.style("fill", colorTL(d.data.algorithm))} //'#7472c0' if(sel2 === "staff_HC") { var act2 = bl.selectAll("." + sel) act2.style("fill", '#00ff40') } } function mouseover (event, d) { br.selectAll(".selection").remove() if(d.shortname == undefined) {d.shortname = d.data.shortname} if(d.charity == undefined) {d.charity = d.data.charity} br.append("text") .attr("class", "selection") .attr("x", width/3) .attr("y", margin.top + 50) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text(d.charity); var sel1 = d3.select(this).attr("id") // console.log(sel1) var sel2 = d3.select(this).attr("id2") // console.log(sel2) // if(sel2 === "tl") { var act = d3.selectAll("." + sel1) act.style("fill", "yellow") //} var arr = ["JDI"] if (!arr.includes(d.shortname)){arr.push(d.shortname);} xScaleTR.domain(order) xScaleTR.domain(arr) var datas = fiveYrExp.filter(function(e) { return e.shortname === "JDI" || e.shortname === d.shortname }) tr.selectAll(".bars").remove() yScaleTR.domain([0,d3.max(datas, d => d.param)]) tr.append('g') .attr('class', 'bars') .selectAll('rect') .data(datas) .join('rect') .attr('class', 'bar') .attr("id", d => d.shortname) .attr('x', d => xScaleTR(d.shortname) + xBars2(d.year)) .attr('y', function(d) {return yScaleTR(d.param)}) .attr('width', xBars2.bandwidth()) .attr('height', function (d,i) { return yScaleTR(0) - yScaleTR(d.param)}) .style('fill', function(d) { return color(d.year) }) tr1.call(xAxisTR) .transition() .duration(1000) .ease(d3.easeLinear); tr2.attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisTR ) .transition() .duration(1000) .ease(d3.easeLinear); //bottom left //bottom right // xScaleBR.domain(order) //xScaleBR.domain(arr) var fiveYr_filt = fiveYr.filter(function(e) { return e.shortname === d.shortname }) br.selectAll(".bars").remove() yScaleBR.domain([0,d3.max(fiveYr_filt, d => d.param)]) br.append('g') .attr('class', 'bars') .selectAll('rect') .data(fiveYr_filt) .join('rect') .attr('class', 'bar') .attr('x', d => xScaleBR(d.category) + xScaleBR.bandwidth()/4) .attr('y', function(d) {return yScaleBR(d.param)}) .attr('width', xBars.bandwidth()) .attr('height', function (d,i) { return yScaleBR(0) - yScaleBR(d.param)}) .style('fill', function(d) {if(d.category === "income") { return "red"} else if(d.category === "expenditure") { return "blue"} else if (d.category === "staff_cost") {return "yellow"} else {return "orange"} }) br1.call(xAxisBR) .transition() .duration(1000) .ease(d3.easeLinear); br2.attr('class', 'y-axis') .attr('transform', `translate(${ margin.left},0)`) .call( yAxisBR ) .transition() .duration(1000) .ease(d3.easeLinear); } return Object.assign(svg.node(), { update(order2) { bl.append("text") .attr("class", "testing") .attr("x", width/2.95) .attr("y", margin.top * 3) .attr("dy", "1em") .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .text("Staff (green) - Volunteers (blue) Sessions/Yr (right axis)"); bl.selectAll("text") .each(function(d, i) { wrap_text_nchar(d3.select(this), 25) }); const t = svg.transition() .duration(1000); var dataf = data.filter(function(e) {if(order2==="All"){return e } else { return e.service === order2}}) if(order2 === "All") { xScaleTL.domain([...new Set ((data.sort((a, b) => d3.descending(a.unit_cost, b.unit_cost) )).map(d => d.shortname))]);} else if (order2 === "CYW"){xScaleTL.domain([...new Set ((data.sort((a, b) => d3.descending(a.service, b.service)||d3.descending(a.unit_cost, b.unit_cost) )).map(d => d.shortname))])} else if (order2 === "C") {xScaleTL.domain([...new Set ((data.sort((a, b) => d3.ascending(a.service, b.service)||d3.descending(a.unit_cost, b.unit_cost) )).map(d => d.shortname))])} gtl .attr('class', 'x-axis') .attr('transform', `translate(0,${ (height/2) - margin.bottom })`) .call(xAxisTL); gtl.transition(t) .call(xAxisTL) .selectAll("text") .attr("class", "legend-text") .attr("y", 0) .attr("x", 9) .attr('fill', 'navy') .attr("transform", "rotate(90)") .attr("text-anchor", "start"); const tx = tl.transition() .duration(1000) .ease(d3.easeBounce); var bars = tl.selectAll(".bar").data(dataf, function(d) { return d.id; }) .join(enter => enter.append("rect") .attr('class', function (d) {return d.shortname + 'staff_HC' + ' bar'}) // d => d.shortname .attr('id', function (d) {return (d.shortname + 'tl')}) .attr('id2', "staff_HC") .attr('x', d => xScaleTL(d.shortname)) .attr('y', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(i)}) .attr('width', xScaleTL.bandwidth()) .attr('height', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(0) - yScaleTL(i)}) .style('fill', function (d) {return colorTL(d.algorithm)}) .on("mouseover", mouseover) .on("mouseout", mouseout) .append('title') .text(function(d){return d.charity;}) .call(enter => enter.transition(tx)), update => update .call(update => update.transition(tx)) .attr('class', function (d) {return d.shortname + 'staff_HC' + ' bar'}) // d => d.shortname .attr('id', function (d) {return (d.shortname + 'tl')}) .attr('id2', "staff_HC") .attr('x', d => xScaleTL(d.shortname)) .attr('y', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(i)}) .attr('width', xScaleTL.bandwidth()) .attr('height', function (d,i) {if(d.unit_cost === 0) {i = d.unit_max} else {i = d.unit_cost} return yScaleTL(0) - yScaleTL(i)}) .style('fill', function (d) {return colorTL(d.algorithm)}) .on("mouseover", mouseover) .on("mouseout", mouseout) .append('title') .text(function(d){return d.charity;}), exit => exit .call(exit => exit.transition(tx) .remove())); // )); var text = tl.selectAll(".desc").data(dataf) .join(enter => enter.append("text") .text(function (d) {return }) //d.missed} .attr('x', d => xScaleTL(d.shortname) + xScaleTL.bandwidth()/1.5) .attr('y', function (d) {return yScaleTL(d.unit_cost) - 5}) .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .attr('class','desc') .call(enter => enter.transition(t)), update => update .call(update => update.transition(t)) .text(function (d) {return }) .attr('x', d => xScaleTL(d.shortname) + xScaleTL.bandwidth()/1.5) .attr('y', function (d) {return yScaleTL(d.unit_cost) - 5}) .attr("font-family" , "sans-serif") .attr("font-size" , "14px") .attr("fill" , "black") .attr("text-anchor", "middle") .attr('class','desc'), exit => exit .call(exit => exit.transition(t) .remove())); tl.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "yellow") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") //.attr('marker-start', 'url(#dot)') .attr("d", lineTL); } }) } 32:T52c,function swatches({ colour, swatchRadius = 6, swatchPadding = swatchRadius * (2/3), labelFont = "12px sans-serif", labelFormat = x => x, labelPadding = swatchRadius * 1.5, marginLeft = 0 } = {}) { const spacing = colour .domain() .map(d => labelFormat(d)) .map(d => getLabelLength(d, labelFont) + (swatchRadius * 2) + swatchPadding + labelPadding) .map((_, i, g) => d3.cumsum(g)[i] + marginLeft) const width = d3.max(spacing) const height = swatchRadius * 2 + swatchPadding * 2 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); const g = svg .append("g") .attr("transform", `translate(0, ${height / 2})`) .selectAll("g") .data(colour.domain()) .join("g") .attr("transform", (d, i) => `translate(${spacing[i - 1] || marginLeft}, 0)`); g.append("circle") .attr("fill", colour) .attr("r", swatchRadius) .attr("cx", swatchRadius) .attr("cy", 0); g.append("text") .attr("x", swatchRadius * 2 + swatchPadding) .attr("y", 0) .attr("dominant-baseline", "central") .style("font", labelFont) .text(d => labelFormat(d)); return svg.node() }33:[] 2f:{"id":"9d6f366ba43ce0e8","slug":null,"title":"Charity Benchmark Dashboard -BU","thumbnail":"a3d6b6ec606069a99fd15fe43d22c64cc0f170067abfe5ac61a50986e221b7bd","access_level":"public","create_time":"$D2023-02-28T16:43:15.007Z","update_time":"$D2023-05-02T08:30:16.413Z","view_time":null,"first_public_time":"$D2023-02-28T16:43:15.007Z","has_unpublished_edits":null,"fork":{"id":"6c6a4a36ab2e9657","slug":null,"title":"Charity Benchmark Dashboard","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":1585,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Charity Benchmark Dashboard -BU","cells":[{"id":0,"value":"# Charity Benchmark Dashboard -BU","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"viewof order2 = Inputs.radio(new Map([[\"All Services\", \"All\"], [\"Counselling Services\", \"C\"], [\"Counselling & Youth Work\", \"CYW\"]]), {value: \"All\", label: \"Services:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"mutable order =[]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"update = chart.update(order2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"datar = dynamic.filter(function(d) { return d.shortname === \"JDI\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"fiveYr = { \n var arr = []\n \n const columns = data.columns.slice(17,21);\n var x = 0\n \n data.forEach(function (d) { \n \n for (x = 0; x < columns.length; x++) {\n \n arr.push({\"shortname\":d.shortname,\"category\": (columns[x]).substr(10, 4), \"param\": +d[columns[x]]}) \n \n }\n })\n \n return arr\n \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"dynamic = { \n var arr = []\n \n const columns = data.columns.slice(3,7);\n var x = 0\n \n data.forEach(function (d) { \n \n for (x = 0; x < columns.length; x++) {\n \n arr.push({\"shortname\": d.shortname, \"category\": columns[x], \"param\": +d[columns[x]]}) \n \n }\n })\n \n return arr\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"stacked = stack(data).map(d => (d.forEach(v => v.key = d.key), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"stack = d3.stack().keys([\"staff_HC\",\"volunteer_HC\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"fiveYrExp = { \n var arrE = []\n \n const columns = data.columns.slice(22);\n var x = 0\n \n data.forEach(function (d) { \n \n for (x = 0; x < columns.length; x++) {\n \n arrE.push({\"shortname\":d.shortname,\"year\": (columns[x]).substr(3, 2), \"param\": +d[columns[x]]}) \n \n }\n })\n \n return arrE\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = d3.csv(getCsvUrl(url),d3.autoType) //.sort((a, b) => d3.ascending(a.volunteer_HC, b.volunteer_HC)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"getCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"url = \"https://docs.google.com/spreadsheets/d/1HXmNxhXNckPqWv7VZ5FnPs9gkac8x5rlMdLQzrK1Vic/edit#gid=0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"margin = ({\n top: 10,\n right: 10,\n bottom: 100,\n left: 75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"hx = xScaleTL.bandwidth() / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"drawGuidelines = (g, data, line) => {\n g.selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .attr(\"stroke\", \"grey\") // .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"5,5\")\n .attr(\"d\", line);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"xBars = d3.scaleBand()\n .domain(cat2)\n .range([0, xScaleTR.bandwidth()])\n .paddingOuter(1)\n .paddingInner(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"xBars2 = d3.scaleBand()\n .domain(cat3)\n .range([0, xScaleTR.bandwidth()])\n .paddingOuter(1)\n .paddingInner(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"yScaleTL = d3.scaleLinear()\n .domain([0,324])\n .range([ (height/2) - margin.bottom, margin.top ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"yScaleBL = d3.scaleLinear()\n .domain([0,100])\n .range([ (height/2.2) - margin.bottom, margin.top ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"yScaleBL2 = d3.scaleLinear()\n .domain([0,20000])\n .range([ (height/2.2) - margin.bottom, margin.top ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"yScaleTR = d3.scaleLinear()\n .domain([0,1100000])\n .range([ (height/2) - margin.bottom, margin.top ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"yScaleBR = d3.scaleLinear()\n .domain([0,100])\n .range([ (height/2) - margin.bottom, margin.top ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":" yAxisTL = d3.axisLeft()\n .scale(yScaleTL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":" yAxisBL = d3.axisLeft()\n .scale(yScaleBL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"yAxisBL2 = d3.axisRight()\n .scale(yScaleBL2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":" yAxisBR = d3.axisLeft()\n .scale(yScaleBR)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":" yAxisTR = d3.axisLeft()\n .scale(yScaleTR)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"xScaleTL = d3.scaleBand()\n\t\t\t.domain(categories)\n\t\t\t.range([ margin.left, (width/2) - margin.right - margin.left ])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"xScaleBL = d3.scaleBand()\n\t\t\t.domain(categories2)\n\t\t\t.range([ margin.left, (width/2) - margin.right - margin.left ])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"cat2 = [\"income\",\"expenditure\",\"staff_cost\",\"counselling_cost\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"cat3 = [\"18\",\"19\",\"20\",\"21\",\"22\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"xScaleTR = d3.scaleBand()\n\t\t\t.domain(short_cat)\n\t\t\t.range([margin.left, (width/3) - margin.right - margin.left ]) //margin.left, (width/3) - margin.right - margin.left \n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"xScaleBR = d3.scaleBand()\n\t\t\t.domain([\"2018\",\"2019\",\"2020\",\"2021\",\"2022\"])\n\t\t\t.range([margin.left, (width/3) - margin.right - margin.left]) //(width/3) - margin.right - margin.left \n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"xAxisBR = d3.axisBottom()\n .scale(xScaleBR)\n // .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"xAxisTL = d3.axisBottom()\n .scale(xScaleTL);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"xAxisBL = d3.axisBottom()\n .scale(xScaleBL);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"xAxisTR = d3.axisBottom()\n .scale(xScaleTR)\n // .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"lineTL = d3.line()\n // .defined(d => !isNaN(d.code))\n .x(function(d, i) {if(i===0) {return xScaleTL(d.shortname)} else \n {return xScaleTL(d.shortname) }}) \n .y(d => yScaleTL(47));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"lineBL = d3.line()\n // .defined(d => !isNaN(d.code))\n .x(function(d, i) {if(i===0) {return xScaleBL(d.shortname)} else \n {return xScaleBL(d.shortname)+xScaleBL.bandwidth()}}) //d => xScale(d.shortname))\n .y(d => yScaleBL(12));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"lineBL2 = d3.line()\n // .defined(d => !isNaN(d.code))\n .x(function(d, i) {return xScaleBL(d.shortname)+xScaleBL.bandwidth()/2}) //d => xScale(d.shortname))\n .y(d => yScaleBL2(d.attended));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"short_cat = [\"JDI\",\"CLD\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"categories2 = [...new Set ((data.sort((a, b) => d3.ascending(a.staff_HC, b.staff_HC))).map(d => d.shortname))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"categories = [...new Set ((data.sort((a, b) => d3.descending(a.unit_cost, b.unit_cost))).map(d => d.shortname))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"colorTL = d3.scaleOrdinal()\n .domain([\"counselling\",\"staff_cost\"]) \n .range([\"#7472c0\",\"#c07472\"]); //\"#72c074\", ,\"#c09b72\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"color = d3.scaleOrdinal()\n .domain([\"22\",\"21\",\"20\",\"19\",\"18\"]) \n .range([\"#535B25\",\"#6F7E11\",\"#97A155\",\"#C0C794\",\"#DBDFC2\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"function replaceStr(str, find, replace) {\n for (var i = 0; i < find.length; i++) {\n str = str.replace(new RegExp(find[i], 'gi'), replace[i]);\n }\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"// adapted from https://observablehq.com/@mbostock/autosize-svg\ngetLabelLength = (label, labelFont = \"12px sans-serif\") => {\n const id = DOM.uid(\"label\").id;\n const svg = html``;\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n\n // Compute the bounding box of the content.\n const width = svg.getElementById(id).getBBox().width;\n\n // Remove the SVG element from the DOM.\n document.body.removeChild(svg);\n\n return width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"wrap_text_nchar2 = (text_element, max_width, line_height, unit = \"em\") => {\n \n // use a default line_height if not provided\n if (!line_height) line_height = 1.1;\n \n // wrap the text based on how many characters per line\n const text_array = wrap_text_array(text_element.text(), max_width);\n \n // append a tspan element for each line of text_array\n text_element.text(null)\n .selectAll(\"tspan\")\n .data(text_array).enter()\n .append(\"tspan\")\n .attr(\"x\", text_element.attr(\"x\"))\n .attr(\"y\", text_element.attr(\"y\"))\n .attr(\"dy\", (d, i) => `${i * line_height}${unit}`)\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"wrap_text_array = (text, max_width) => {\n // split the text around spaces (to get individual words)\n const words = text.split(/\\s+/).reverse();\n \n // define vars to hold individual words, lines, and all lines\n let word,\n lines = [ ],\n line = [ ];\n \n // add words to a line until we exceed the max_width (in characters)\n // when we reach width, add the line to lines and start a new line\n while (word = words.pop()) {\n line.push(word);\n if (line.join(\" \").length > max_width) {\n line.pop()\n lines.push(line.join(\" \"));\n line = [word];\n }\n }\n lines.push(line.join(\" \"));\n \n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"