2c:null 2d:["$","title",null,{"children":"DVS Communities within a Community | Amber Hoak | Observable"}] 32:Td1b,{ const svg = svgTools const data = role === "Total" ?weightedToolRanks : chartRoleData const height = svgToolsHeight - 300 const margin = 200 svg.selectAll("*").remove() const extent = d3.extent(data, d=> d.rank) const yscale = d3.scaleLinear().domain(extent).range([height - margin, margin ]) const xscale = d3.scaleLinear().domain(extent).range([ margin , width - margin ]) const rExtent = d3.extent(weightedToolRanks, d=> d.total) const rscale = d3.scalePow().domain(rExtent).range([25, 50 ]).exponent(0.5) const rankScale = d3.scaleLinear().domain([0, extent[1]]).range([0, 1]) const radius = 8 const circlePadding = 10 const diverging = (d) => d3.interpolateRdPu(rankScale(d)) // map our data to colors let rankArray = [] for(let i = Math.floor(extent[0]); i< Math.floor(extent[1]) + 1; i++){ rankArray.push(i) } const dodgeData = dodge(data, rscale(rExtent[1]) * (role === "Total" ? 2 : 1), xscale, rscale) const copy = [...dodgeData] function circlePath(cx, cy, r){ return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0'; } const levels = {2: "(1)", 2: "(2)", 3: "(3)", 4: "(4)", 5: "Love!!(5)"} svg .append('text') .text("\u{1F60D}") .attr('x', width - 150) .attr('y', 150) .attr("font-size", 90) .attr("opacity", 0.5) svg .append('text') .text("\u{1F621}") .attr('x', 50) .attr('y', height - 100) .attr("font-size", 90) .attr("opacity", 0.5) svg .selectAll('.dividing-lines') .data(rankArray) .enter() .append('line') .attr('y1', 0) .attr('y2', height) .attr('x1',(d)=> xscale(d) ) .attr('x2', (d)=> xscale(d) ) .attr('class', 'dividing-lines') .attr('stroke', "grey") .attr('stroke-dasharray', '3 4') svg .selectAll('.dividing-text') .data(rankArray) .enter() .append('text') .attr('y', 20) .attr('x',(d, i)=> xscale(d) ) .attr("class", "dividing-text") .text(d=> levels[d] || levels[0] ) .attr("font-family", "Chilanka, cursive") .attr("font-size", "25px") dodgeData.forEach((d) => { d.DOMuid = d.data.key }) const summaries = dodgeData.map(d => ([d.data.key, d.x, d.y, d.r,d.data.rank ])); const bubbles = svg.selectAll("g").data(summaries).enter() .append("g"); summaries.forEach((d) => { d.DOMuid = DOM.uid(d[0]) }); bubbles.append("path") .attr('d', function(d,i) {return circlePath(d[1], height/2 + d[2] + 150 , d[3] )}) .attr("fill", (d)=> diverging(d[4])) .attr("id", (d) => d.DOMuid.id) bubbles.append("text") .attr("font-size", "12px") .attr("font-weght", "bold") .attr("color", "black") .attr("dx", "40") .attr("dy", "10") .append("textPath") .attr("xlink:xlink:href", (d) => d.DOMuid.href) .text(d=> d[0]) .style("font-family", "Libre Baskerville, serif") .attr("startOffset","20%") .style("text-anchor","middle") svg.selectAll(".non-outline") .data(copy) .join("circle") .attr("cx", d => d.x) .attr("cy", (d,i) => height / 2 + d.y + 150 ) .attr("r", d => d.r) .attr('fill', (d)=> diverging(d.data.rank)) .attr("class", "non-outline") .append("title") .text(d => d.data.key) return svg.node() }33:Tbdd,{ const height = 600 const svg = toolRankSVG const respondent = role === "Total"? "People" : role + 's' const data = role === "Total" ?weightedToolRanks.map((d)=> {return {...d, score: d.rank}}).sort((a,b)=> b.score - a.score) : toolsRating const startIndex = sliceDirection === "top" ? 0 : data.length - 5 const endIndex = sliceDirection === "top" ? 5 : data.length const ratings = data.map((d)=>{ const stars = Math.ceil(d.score) - 1 let starData = [] for(let i = 1; i < stars+1 ; i++){ let percent = (d.score - 1).toFixed(1) / (i ) >= 1 ? 1 : (i -(d.score - 1).toFixed(1)) starData.push({ num: i, raw: (d.score -1).toFixed(1) , percent }) } return {...d, starData} }).slice(startIndex, endIndex) const totalItems = ratings.length-1 const spacePerItem = (height - 100) / 9 const fontSize = spacePerItem - 25 const maxX = data.reduce((max, d)=> { max = (d.key.length * fontSize)/2 > max ? (d.key.length * fontSize)/2 : max return max }, 0) const rankScale = d3.scaleLinear().domain([0, 5]).range([0, 1]) const diverging = (d) => d3.interpolateRdPu(rankScale(d)) // map our data to colors const yscale = d3.scaleLinear().domain([0, 10]).range([30, height-10]) svg.selectAll("*").remove() const ratingPerRow = svg.append('g') .selectAll('rating') .data(ratings, d => d.key + role) .join('g') .attr('transform', (d,i) => `translate(0, ${yscale(i)})`) .classed('rating', true) ratingPerRow.append('text') .attr('y', 0) .attr('x', 20) .text((d)=> d.key) .attr("font-size", fontSize) .attr("font-family", "Chilanka, cursive") .attr("fill", (d)=> diverging(d.score - 1)) ratingPerRow.append('text') .attr('y', 0) .attr('x', maxX + fontSize + 200) .text((d)=> `${(d.score -1).toFixed(1)}/5`) .attr("font-family", "Chilanka, cursive") ratingPerRow.append('text') .attr('y', 0) .attr('x', width - 102) .text((d)=> `${d.total} ${respondent}`) .attr("font-family", "Chilanka, cursive") // TODO: Add Gradient instead of calc rect overlay const stars = ratingPerRow.selectAll(".stars") .data(d => d.starData, (d, i)=>d+ i) .enter() stars .append("text") .text("\u{2764}") .attr("opacity", 1) .attr("class", "stars") .attr("font-size", "20px") .attr("transform", (d, i) => { return `translate(${i * 30 + maxX + fontSize}, 0) rotate(0)` }) stars.append("rect") .attr("y", -31) .attr("x", (d)=> { const r = d.percent const percent = 1 - r const deltaX = 30 * r return (30 -deltaX) }) .attr("height", 40) .attr("width", 35) .attr("transform", (d, i) => { return `translate(${i * 30 + maxX + fontSize}, 0) rotate(0)` }) .attr("opacity", (d)=>{ const r = d.percent === 1 ? 0 : 1 return r }) .attr("fill", "white") ratingPerRow.exit().remove() return svg.node() }34:T163e,{ const svg = svgHours svg.selectAll("*").remove() const tip = createHoursTip(svg) const sideBar = 300 let currentSelection = '' const colorScale = d3.scaleOrdinal() .domain(Object.keys(hoursPerRole)) .range(colors) let list = [] let listConvertRole = {} let listD = [] const data = hoursPerRole.map((o)=>{ const role = o.role const medians = o.medians const flat = Object.keys(medians).map((key)=> { list.push(key+role) const listItem = {key: key+role, value: medians[key], category: key , role: reverseTitleMap[role] } listD.push(listItem) listConvertRole[key+role] = role const value = medians[key] return {key, value} }) return {role, values:flat} }) const foodClassScale = d3.scalePoint() .domain(list) .range([50, svgHoursHeight - 10]) const xScale = d3.scaleLinear() .domain([0,25]) .range([35, width - sideBar]) const xAxis = d3.axisTop(xScale).tickFormat((d)=> `${d}hrs`).tickSize(-svgHoursHeight - 60) svg.append("g") .attr("class", "xaxis") .attr("transform", `translate(0, ${20})`) .style("color", "grey") .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2")) .call(g => g.selectAll(".tick text") .style("font-family", "Libre Baskerville, serif")) const categories = svg.append('g') .selectAll('g') .classed('food-class', true) .data(data) .enter() categories.append('rect') .attr('x', 0) .attr('y', d => foodClassScale(d.values[0].key + d.role) - 5) .attr('rx', 8) .attr('ry', 8) .attr('width', 30) .attr('height', d => { const elArr = d.values const firstEl = elArr[0] const lastEl = elArr[elArr.length - 1] const firstPos = foodClassScale(firstEl.key + d.role) const lastPos = foodClassScale(lastEl.key + d.role) return lastPos - firstPos + 5 }) .attr("opacity", 0.2) .attr('fill', d => colorScale(d.role)) categories.append('text') .attr('transform', d => { const elArr = d.values const firstEl = elArr[0] const lastEl = elArr[elArr.length - 1] const firstPos = foodClassScale(firstEl.key + d.role) const lastPos = foodClassScale(lastEl.key + d.role) const newY = firstPos + ((lastPos - firstPos)/2) return `translate(${10 + 5}, ${newY})rotate(270)` }) .attr('text-anchor', 'middle') .attr('font-size', 14) .attr("font-family", "Chilanka, cursive") .text(d => reverseTitleMap[d.role]) const circlesPerRow = svg.append('g') .selectAll('g') .data(listD) .enter() .append('g') .attr('transform',d => `translate(0, ${foodClassScale(d.key)})`) .classed('Pair', true) circlesPerRow.append('line') .attr('y1', 0) .attr('y2', 0) .attr('x1', 35) .attr('x2', width - sideBar) .attr('stroke', d=> colorScale(listConvertRole[d.key])) .attr('stroke-dasharray', '3 4') circlesPerRow .append('circle') .attr('r', 10) .attr('cy', 0) .attr('cx', d => xScale(d.value)) .attr("class", "circle-hours-shadow") .attr('fill', "white") .attr("title", d=> d.category) circlesPerRow .append('circle') .attr('r', 6) .attr('cy', 0) .attr("class", "circle-hours") .attr('cx', d => xScale(d.value)) .attr('fill', d => colorCategoryScale(d.category)) .attr("title", d=> d.category) circlesPerRow .append('circle') .attr('r', 15) .attr('cy', 0) .attr('cx', d => xScale(d.value)) .attr("class", "circle-hours-hover") .attr('fill', "white") .attr("title", d=> d.category) .attr("opacity", 0) .on("mouseover", function (d, n, i) { const id = d.category svg.selectAll(`.circle-hours`) .style("opacity", (elem)=> elem.category == id ? 1 : 0.5) .style("fill", (elem)=> elem.category == id ? colorCategoryScale(d.category) : "grey") svg.selectAll(`.circle-hours-shadow`) .style("opacity", (elem)=> elem.category == id ? 1 : 0.5) .style("fill", (elem)=> elem.category == id ? "yellow" : "white") svg.selectAll(`.legend-circle`) .style("opacity", (elem)=> elem == id ? 1 : 0.1) svg.selectAll(`.legend-text`) .style("opacity", (elem)=> elem == id ? 1 : 0.1) tip.show(d, this) // SHOW TOOL TIP }) .on("mouseout", function (d, n, i) { svg.selectAll(`.circle-hours`) .style("opacity", 1) .style("fill",(d)=> colorCategoryScale(d.category)) svg.selectAll(`.circle-hours-shadow`) .style("opacity", 1 ) .style("fill", "white") svg.selectAll(`.legend-circle`) .style("opacity", 1) svg.selectAll(`.legend-text`) .style("opacity", 1) tip.hide(d, this) // SHOW TOOL TIP }) const legend = svg.append('g') .selectAll('g') .data(Object.keys(hoursPerRole[0].medians)) .enter() .append('g') .attr('transform',(d, i) => `translate(20, ${30* i +10})`) .classed('legend', true) legend .append('circle') .attr('r', 10) .attr('cy', 5) .attr('cx', width - sideBar ) .attr("class", "legend-circle") .attr('fill', d => colorCategoryScale(d)) .attr("title", d=> d) legend .append('text') .attr('y', 5) .attr('x', width - sideBar + 20 ) .text(d => `${friendlyNames[d]}`) .attr("class", "legend-text") .attr("font-family", "Chilanka, cursive") .attr("title", d=> d) return svg.node() } 35:Tc2d,{ const height = 500 const svg = d3.create("svg").attr("height", height).attr("width", width) const data = educationCount let names = Object.keys(data[0]).filter(o=> o !== "title" && o !== "total" ) const replace = "Mostly From School (or other formal courses)" const updateStack = (data) => { svg.selectAll("*").remove() const series = d3.stack().keys(Object.keys(data[0]).filter(o=> o !== "total"))(data) const colorScale = d3.scaleOrdinal() .domain(names) .range(colors) .unknown("#ccc") const strokeScale = d3.scaleOrdinal() .domain(series.map((d)=> d.key)) .range(strokeColors) .unknown("#ccc") const y = d3.scaleBand() .domain(data.map(d => d.title)) .range([50, height - 40]) .padding(0.2) const x = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([350, width -50]) const yBoxes = d3.scaleLinear() .domain([0, names.length-1]) .range([0, width - 80]) const boxWidth = 20 const legendLeft = 600 const legend = svg.append("g") .selectAll(".Boxes") .data(names, (d,i) => d.key + i) .join("g") .attr('transform',(d,i) => `translate(${yBoxes(i)}, 0)`) .classed('Boxes', true) legend .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height",20) .attr("class", "legend-boxes") .attr("fill", (d)=> colorScale(d)) legend .append("text") .attr("x", boxWidth + 2) .attr("y", boxWidth/2 + 5 ) .text(d=> reverseTitleMap[d] ) .attr("class", "legend-text") .attr("fill", "black") .attr("font-family", "Chilanka, cursive") svg.selectAll(".leader-name") .data(data, (d, i)=> d.title + i) .join("text") .attr("x", 10) .attr("y", (d, i) => y(d.title) + y.bandwidth()/2 + 3) .text((d)=> d.title === replace ? "Mostly from School/Formal Education" : d.title) .attr("class", "leader-name") .attr("font-family", "Chilanka, cursive") svg.selectAll(".totals") .data(data, (d, i)=> d.title + i) .join("text") .attr("x", (d)=> { const found = data.find((o)=> o.title === d.title) return x(found.total) + 5 || 10 }) .attr("y", (d, i) => y(d.title) + y.bandwidth()/2 + 3) .text((d)=>{ const found = data.find((o)=> o.title === d.title) return `${found.total}` }) .attr("class", "totals") .attr("font-family", "Chilanka, cursive") svg .selectAll(".stack-keys") .append("g") .data(series, (d,i) => d.key ) .join("g") .attr("fill", d => colorScale(d.key)) .attr("stroke", d=> strokeScale(d.key)) .attr("stroke-width", 2) .attr("class", `stack-keys`) .selectAll(".stack-rects") .data(d => d, (d, i)=> d.data.title + i ) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.title) ) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .attr("opacity", 0.8) .attr("class", "stack-rects") } updateStack( data) return svg.node() }36:T546,{ const height = 400 const svg = d3.create("svg").attr("height", height).attr("width", width) const data = learningMethods const flatValues = data.reduce((acc, o, index)=> { const role = o.role const values = o.values values.forEach((val, i)=> { acc.push({...val, rank:i, role, index}) }) return acc },[]) const roles = data.map((o) => o.role) const rankScale = d3.scaleLinear().domain([0, 4]).range([ 1, 0.3]) const diverging = (d) => d3.interpolateRdPu(rankScale(d)) const xScale = d3.scaleLinear().domain([0, 4]).range([150, width - 200]) const yScale = d3.scaleLinear().domain([0, roles.length-1]).range([20, height -40]) svg.selectAll(".title") .data(data, (d,i) => d.role + i ) .join("text") .text(d=> reverseTitleMap[d.role]) .attr("y",(d,i) => yScale(i)) .attr("x",10) .attr("class", "title") .attr("font-size", 20) .attr("font-weight", 900) .attr("font-family", "Chilanka, cursive") svg.selectAll(".words") .data(flatValues, (d,i) => d.role + d.text) .join("text") .text(d=> d.text) .attr("y",(d,i) => yScale(d.index)) .attr("x", (d,i) => xScale(d.rank)) .attr("class", "words") .attr("font-size", 16) .attr("font-family", "Chilanka, cursive") .attr("fill", (d,i)=> diverging(d.rank)) return svg.node() }37:T12a2,{ const svg = svgFollowers const dataSliced = followersData.slice(0, 10) const dataG = dataSliced.map((d)=> { const followers = d.followerCount return {entity: d.entity, ...followers, total:d.total} }) let names = Object.keys(dataG[0]).filter(o=> o !== "entity" && o !== "total" ) names = ["Total", ...names] let currentSelection = 'Total' const updateStack = (data) => { svg.selectAll("*").remove() const series = d3.stack().keys(Object.keys(data[0]).filter(o=> o !== "total"))(data) const colorScale = d3.scaleOrdinal() .domain(names) .range(["#D3D3D3", ...colors]) .unknown("#ccc") const strokeScale = d3.scaleOrdinal() .domain(series.map((d)=> d.key)) .range(strokeColors) .unknown("#ccc") const y = d3.scaleBand() .domain(data.map(d => d.entity)) .range([10, svgFollowersHeight - 40]) .padding(0.2) const x = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([180, svgFollowersWidth /2]) const yBoxes = d3.scaleLinear() .domain([0, names.length-1]) .range([10, svgFollowersHeight - 200]) const boxWidth = 20 const legendLeft = 600 const legend = svg.append("g") .selectAll(".Boxes") .data(names, (d,i) => d.key + i + currentSelection) .join("g") .attr('transform',(d,i) => `translate(0, ${yBoxes(i)})`) .classed('Boxes', true) legend .append("rect") .attr("x", legendLeft) .attr("y", 0) .attr("width", 20) .attr("height",20) .attr("class", "legend-boxes") .attr("fill", (d)=> colorScale(d)) .on("mouseover", function (d, n, i) { svg.selectAll(`.legend-boxes`) .style("opacity", (elem)=> elem == d ? 1 : 0.5) .style("fill", (elem)=> elem == d ? colorScale(elem): "grey") svg.selectAll(`.legend-text`) .style("opacity", (elem)=> elem == d ? 1 : 0.5) svg.selectAll(`.stack-keys`) .style("opacity", (elem)=> elem.key == d ? 1 : 0.5) }) .on("mouseout", function (d, n, i) { svg.selectAll(`.legend-boxes`) .style("opacity", 1) .style("fill", (elem)=> colorScale(elem)) svg.selectAll(`.legend-text`) .style("opacity", 1) svg.selectAll(`.stack-keys`) .style("opacity", 1) }) .on("click", function (d, n, i) { const role = d const top = flatFollwerData.sort((a,b)=> (b[role] || 0)- (a[role] || 0)).slice(0,10) const newHotness = d === "Total" ? dataG : top currentSelection= d updateStack(newHotness) }) legend .append("text") .attr("x", legendLeft+ boxWidth + 10) .attr("y", boxWidth/2 + 5 ) .text(d=> reverseTitleMap[d] || "Total" ) .attr("class", "legend-text") .attr("fill", (d)=>{ if(d === currentSelection && d === "Total"){ return "#fed23e" } return d === currentSelection ? colorScale(d) : "black" }) .attr("font-family", "Chilanka, cursive") legend.exit().remove() svg.selectAll(".leader-name") .data(data, (d, i)=> d.entity + currentSelection + i) .join("text") .attr("x", 10) .attr("y", (d, i) => y(d.entity) + y.bandwidth()/2 + 3) .text((d)=> d.entity) .attr("class", "leader-name") .attr("font-family", "Chilanka, cursive") svg.selectAll(".totals") .data(data, (d, i)=> d.entity + i + currentSelection) .join("text") .attr("x", (d)=> { const found = data.find((o)=> o.entity === d.entity) return x(found.total) + 5 || 10 }) .attr("y", (d, i) => y(d.entity) + y.bandwidth()/2 + 3) .text((d)=>{ console.log("currentSelection", currentSelection) const found = data.find((o)=> o.entity === d.entity) if( currentSelection !== "Total") { const categoryCount = found[currentSelection] || 0 return `${categoryCount} / ${found.total}` || `${found.total}` } return `${found.total}` }) .attr("class", "totals") .attr("font-family", "Chilanka, cursive") svg .selectAll(".stack-keys") .append("g") .data(series, (d,i) => d.key + currentSelection) .join("g") .attr("fill", d => colorScale(d.key)) .attr("stroke", d=> strokeScale(d.key)) .attr("stroke-width", 2) .attr("class", `stack-keys`) .selectAll(".stack-rects") .data(d => d, (d, i)=> d.data.entity + i+ currentSelection || '' ) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.entity) ) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .attr("opacity", 0.8) .attr("class", "stack-rects") } updateStack( dataG) return svg.node() }38:T4b5,toolsRating = { const selection =titleMapping[role] const toolsFiltered = rolesPerTools.reduce((acc, rankItem)=> { const rank = rankItem.rank const roleObj = rankItem.roles const toolNames = Object.keys(roleObj) toolNames.forEach((key)=>{ const obj = roleObj[key] if(obj[selection]) { acc.push({key, role: selection, value: obj[selection], rank, weight: parseInt(rank, 10) + 1}) } return acc }, []) return acc }, []).sort((a,b)=> b.value - a.value) // return toolsFiltered const rawScores = toolsFiltered.reduce((acc, item)=>{ const rank = item.rank const weight = item.weight const count = item.value const key = item.key const catTotal = weight * count if(acc[key]) { acc[key].weighted += catTotal acc[key].total += count } else { acc[key] = {weighted: catTotal, total: count} } return acc }, {}) return Object.keys(rawScores).map((key)=>{ const o = rawScores[key] const numerator = o.weighted const denominator = o.total return {key, score: numerator/denominator, total: o.total} }).sort((a,b) => b.score - a.score).filter((o)=> o.total > 2) }39:T61d,toggleButton = (container, textOne, textTwo) => { let text = textOne const circleR = 20; const g = d3.select(container).append("g") .attr("transform",`translate(${circleR + 5}, 2)`) .on("click", function() { if(text == textOne) { d3.select(this).select('circle').transition() .attr("cx", circleR / 2) mutable sliceDirection = "bottom" text = textTwo d3.select(this).select("text").text(text) .attr("font-family", "Chilanka, cursive") } else { d3.select(this).select('circle').transition() .attr("cx", -circleR / 2) mutable sliceDirection = "top" text = textOne d3.select(this).select("text").text(text).attr("font-family", "Chilanka, cursive") } }) g.append("text") .attr("x", circleR * 2) .attr("y", circleR) .attr("dx", -circleR + 2) .attr("dy", -5) .style("font-size", "14px") .style("user-select", "none") .text(text) .attr("font-family", "Chilanka, cursive") g.append("rect") .attr("x", -circleR) .attr("width", circleR * 2 ) .attr("height", circleR) .style("fill", "#f5f5f5") .attr("rx", circleR / 2) .style("stroke", "#191F2D") g.append("circle") .attr("r", circleR / 2) .attr("cx", () => { if(text == textOne) { return - circleR / 2 } else { return circleR / 2 } }) .attr("cy", circleR / 2) .style("fill", "#57c5c7") .attr("rx", circleR / 2) .style("stroke", "#191F2D") return svg }3a:T420, updateTitles = (data, svg) => { let local = data const selectedData = (selected) => { return data.reduce((acc, roleItem)=> { if(roleItem.role === selected.role) { roleItem.selected = true } else { roleItem.selected = false } acc.push(roleItem) return acc }, []) } const xscale = d3.scaleBand() .domain(local.map((d)=> d.role)) .range([10, width - 10]) .padding(0.1) const update=(ld) => { svg.selectAll(".titles") .data(ld, d=>d.role) .join("text") .attr("class", "titles") .text((d)=> d.role) .attr("font-family", "Chilanka, cursive") .style("font-size", (d)=> d.selected? "16px": "10px") .attr("x",(d,i) => xscale(d.role)) .attr("y", 25) .attr("fill", (d)=> d.selected? purple: "grey") .on("click", function(d) { const newData = selectedData(d) mutable roleSection = d.role update(newData) }) } update(local) }3b:T16de,updateTiles = (allData, id, svg) => { const originalTitle = reverseTitleMap[id] || "total" const data = allData[originalTitle] const allEntries =originalTitle === "total"? dataByRole : dataByRole.filter((o)=> o.role === id) const sideBar = 300 const rectSize = 5 const padding = 2*rectSize const maxPerWidth = Math.floor((chartWidth-sideBar)/(4*rectSize)) //# rects per row let maxColorValue = -1 const termsMapped = data.reduce((acc, d)=> { const text = d.text const searchTerms = d.text allEntries.forEach((roleData)=> { const entries = roleData.data entries.forEach((entry)=> { const fusteration = entry.frustration.trim().toLowerCase() if(fusteration.indexOf(searchTerms) > -1) { const colorKey = rawDataObject[entry.id][colorFactor] maxColorValue = colorKey > maxColorValue ? colorKey : maxColorValue acc[text] = acc[text] ? [...acc[text], {id: entry.id, term:searchTerms, text: entry.frustration, role: roleData.role, colorKey }] : [{id: entry.id,term:searchTerms, text: entry.frustration, role: roleData.role, colorKey}] } }) }) return acc }, {}) console.log("termsMapped", termsMapped ) const maxEntry = Object.values(termsMapped).reduce((max, entry)=> { if(entry.length > max) { max = entry.length } return max }, -1) const totalRoleCount = Object.keys(termsMapped).reduce((acc, key)=> { const entry = termsMapped[key] const entries = entry.filter((o)=> o.role === id) acc[key] = entries.length return acc }, {}) const flattenData = Object.keys(termsMapped).map(key=>{ return {key, values: termsMapped[key].sort((a,b)=> a.colorKey - b.colorKey)} }) const yscale = d3.scaleBand().domain(Object.keys(termsMapped)).range([50, svgRoleHeight]) var width = d3.scaleQuantize() .domain([10, 100]) .range([1, 2, 4]); const maxRow = Math.ceil(maxEntry/maxPerWidth) > 0? Math.round(maxEntry/maxPerWidth) : 1 let prev = 50 const termScale = Object.keys(termsMapped).reduce((acc, key, i)=> { const entry = termsMapped[key] const values = entry.length const totalRowsize = Math.floor(values/maxPerWidth)*20 + 20 acc[key] = prev prev = totalRowsize + prev + 60 return acc }, {}) const quoteData = Object.keys(termsMapped).reduce((acc, key)=>{ const values = termsMapped[key] const maxText = 100 let filtered = values.filter((o)=> o.text.length < maxText ) if(id !== "total" ) { filtered = d3.shuffle(values.filter((o)=> o.role === id && o.text.length < maxText)) } const sliced = filtered.slice(0, 2) const textValues = sliced.map((o)=>{ return{ text: o.text, key , maxHeight : Math.floor(values.length/maxPerWidth)*20 + 20 } }) acc.push({key, textValues: textValues }) return acc },[]) addQuoteToChart(svg, quoteData, (chartWidth-sideBar), termScale) svg .append('line') .attr('y1', 50) .attr('y2', svgRoleHeight ) .attr('x1', ()=>chartWidth - sideBar) .attr('x2', ()=>chartWidth - sideBar) .attr("stroke", "#58585A") .attr("class", "middle-divider") .attr('stroke-dasharray', '3 4') svg.selectAll('.top-word-length, .term-divider, .middle-divider').remove() const group = svg.selectAll('g') .data(flattenData, (d,i )=> d.key + i ) .join('g') .attr('transform', (d, i) => `translate(0,${termScale[d.key] })`) .classed('paired', true) group.append('line') .attr('y1', 13) .attr('y2', 13) .attr('x1', 0 ) .attr('x2', chartWidth ) .attr("stroke", "#58585A") .attr("class", "term-divider") .attr('stroke-dasharray', '3 4') // TEXT FOR WORD TITLES group .append('text') .attr('fill', purple) .attr("class", "top-word-labels") .attr('font-size', "26px") .attr('y', 10) .attr("font-family", "Chilanka, cursive") .text(d => d.key.toUpperCase()) group .append('text') .attr('fill', '#58585A') .attr("class", "top-word-length") .attr('font-size', "10px") .attr('y', 10) .attr("x", (d)=> d.key.length * 22 ) .style("font-family", "Libre Baskerville, serif") .text(d => `${d.values.length} complaints`) const tip = createToolTip(svg) const leaderScale = d3.scaleLinear().domain([0, maxColorValue]).range([0, 1]) const diverging = (d) => d3.interpolateRdPu(leaderScale(d)) // map our data to colors const cards = group.selectAll(".card") .data(d => d.values, (d)=>d+ id) cards.join("circle") .attr("id", (d,i)=> `circle${i}-val-${Math.floor(i/maxPerWidth)}`) .attr("cx", (d,i) => i > maxPerWidth-1 ?(i-(Math.floor(i/maxPerWidth) * maxPerWidth))*(4*rectSize) + 4*rectSize :i*(4*rectSize) + 4*rectSize ) .attr("cy", (d,i)=> i > maxPerWidth-1 ? Math.floor(i/maxPerWidth)*20 + 20 + 10 : 20 + 10) .attr("r", rectSize) .attr("class", "card") .style("fill", (d)=> diverging(d.colorKey)) .style("stroke", (d)=> (d.role === id) ? purple : "white" ) .style("opacity", (d)=> (d.role === id || id === "total" ) ? 1 : 0.2 ) .on("mouseover", function (d, n, i) { d3.select(this) .transition() .duration(300) .attr("r", rectSize * 2) tip.show(d, this) // SHOW TOOL TIP }) .on("mouseout", function (d, n, i) { d3.select(this) .transition() .duration(500) .attr("r", rectSize) tip.hide() // HIDE TOOL TIP }) return svg }3c:T5bd,function wrap(text, width, marginLeft) { let last = 0 let count = 0 let lastY = 0 text.each(function() { last = count % 2 === 0 ? last = 0 : last lastY = count % 2 === 0 ? lastY = 0 : lastY let dx = 0 var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems y = text.attr("y") , dy = last, x= text.attr("x"), key= text.attr("key"), max= parseInt(text.attr("title")) + 20, tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em").attr("font-family", "Chilanka, cursive"); while (word = words.pop()) { line.push(word); // const dimensions = tspan.node().getBBox() // if(dimensions && dimensions.y < max && dimensions.y < chartWidth - 10){ tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width ) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em") .attr("dx", dx + "em") .attr("font-family", "Chilanka, cursive").text(word); } // } } last = (lineNumber + 2) * lineHeight count = count + 1 lastY= y // console.log("last", last, "y", y, count, text.text()) }); }3d:T681,dodge = (data, radius, x, rscale) => { const height = svgToolsHeight - 300 const radius2 = radius ** 2 * 1.5 let circles = data.map(d => ({x: x(d.rank), data: d, r: rscale(d.total)})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; const aRadius = a ? a.r * 2: x.r * 2 const xRadius = x.r * 2 const r = aRadius < xRadius ? aRadius ** 2 : xRadius ** 2 while (a) { if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.x < b.x - radius2) head = head.next; // let radius2 = (head && head.r > b.r ? (head.r * 2) ** 2 : (b.r * 2)** 2) // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x) ** 2); if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } circles = circles.map((d,i)=>{ return {...d, ty: height / 2 + d.y - 100 } }) return circles; }3e:[] 30:{"id":"838f64361406a482","slug":"dvs-communities-within-communities","title":"DVS Communities within a Community","thumbnail":"19bafa14317db1d56ff45816c3c9a344497ba9d6fa3236d3e241ac156b85c04e","access_level":"public","create_time":"$D2019-09-19T22:44:23.244Z","update_time":"$D2019-10-01T16:31:40.335Z","view_time":null,"first_public_time":"$D2019-09-29T22:47:38.463Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":2562,"publish_version":2562,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DVS Communities within a Community","cells":[{"id":2407,"value":"md`# DVS Communities within a Community`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2412,"value":"md`Examining self reported roles within the data visualization field to determine challenges and ways the communitiy can support each role (all data based on the 2019 DVS Survey data) .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"md`## Tools that we love and love to hate 💔 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"md`Participants listed technology they use for day-to-day job tasks and later rated whether that the tools that he/she used meet his/her data visualization needs `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"viewof role = radio({\n title: 'Tool used per role and average rating (0-5) satisfaction tools meeting needs',\n description: 'Weighted Average scores for all responses per role with tool categories with greater than 2 participants responded ',\n options: [\"Total\", ...Object.keys(titleMapping).filter((o)=> o !== \"Freelancer\") ],\n value: 'Designer'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2176,"value":"md`### Top Tool ${sliceDirection === \"top\"? \"Satisfaction\" : \"Dissatisfaction\"} Score for ${role === \"Total\"? \"Everyone\" : role + 's'} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2232,"value":"md`Weighted average of tools meeting needs (score 0-5) and technologies used in work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"{\n const svg = DOM.svg(200, 50)\n \n const g = d3.select(svg)\n .attr(\"transform\", \"translate(0, 20)\")\n \n toggleButton(g.node(), \"Top Satisfaction\", \"Top Dissatisfaction\")\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2222,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Top frustrations in the field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md`*...beside my personal favorite, SVG text.* These terms are generated using TF-IDF across all documents as well as TF-IDF across each repsonse per role. The most common words (lowest scores) within each role is displayed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"viewof colorFactor = radio({\n title: 'Color Responses Based on',\n description: 'Darker color equals greater participant agreement, lighter equals participant disagreement',\n options: [\n { label: 'Leadership Understands Importance of Data Visuals', value: \"leadership_understanding\" },\n { label: \"Tools Met Participant's Needs\", value: 'tool_needs_met' },\n {label: \"Participant's Skills set him/her back more than tools\", value: 'skills_lacking'}\n ],\n value: 'leadership_understanding'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2514,"value":"{\n const bars = d3.range(0, 100) // create data\n \n const colorScale = d3.scaleLinear().domain([0, bars.length]).range([0, 1])\n const xScale = d3.scaleLinear().domain([0, 100]).range([5, 405])\n const leaderScale = d3.scaleLinear().domain([0, 100]).range([0, 1])\n\n const diverging = (d) => d3.interpolateRdPu(leaderScale(d)) // map our data to colors\n const legend = [ \"disagreement\", \"agreement\"]\n const svg = d3.select(DOM.svg(400, 50))\n svg.selectAll('.diverging')\n .data(bars)\n .enter()\n .append('rect')\n .attr('x', (d) => xScale(d))\n .attr('y', 0)\n .attr('height', 20)\n .attr('width', 5)\n .attr('class', 'diverging')\n .attr('fill', (d) => diverging(d)) \n svg.selectAll(\"text\")\n .data(legend)\n .join(\"text\")\n .text(d=>d)\n .attr(\"font-size\", 14)\n .attr(\"x\", (d,i)=> i=== 0? xScale(0) : xScale(79))\n .attr(\"y\", 45)\n .style(\"font-family\", \"Libre Baskerville, serif\")\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"{\n const svg = svgRole\n let total = 0\n let catTotal = 0\n\n svg\n .selectAll(\"rect\")\n .remove()\n svg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 35)\n .attr(\"height\", 1)\n .attr(\"width\", width)\n .attr(\"fill\", \"grey\")\nconst data = Object.keys(tfidf).map((d)=>{ return {role: d, selected: d === roleSection } })\n\nupdateTitles(data, svg)\n\n const originalTitle = titleMapping[roleSection] || roleSection\nupdateTiles(tfidf, originalTitle, svg)\n \n\n return svg.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"md`## Hours a Week Per Task`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"md`Based on most frequently complained issues, *time* remains one of the heavy reported issue. So where does the time go? `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"md`Below is the median time spent on different task per week`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2370,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"md`## Learning Data Visuals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2423,"value":"md`Outside of a respondents specialty, creating Data Visuals is a large portion of the day to day work hours. How did people learn these skills and continue to learn these skill?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2440,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2507,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2511,"value":"md`## Top Methods of Learning`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2531,"value":"{\n const bars = d3.range(0, 100) // create data\n \n const colorScale = d3.scaleLinear().domain([0, bars.length]).range([0, 1])\n const xScale = d3.scaleLinear().domain([0, 100]).range([5, 405])\n const leaderScale = d3.scaleLinear().domain([0, 100]).range([ 1, 0.3])\n\n const diverging = (d) => d3.interpolateRdPu(leaderScale(d)) // map our data to colors\n const legend = [ \"most common\"]\n const svg = d3.select(DOM.svg(400, 50))\n svg.selectAll('.diverging')\n .data(bars)\n .enter()\n .append('rect')\n .attr('x', (d) => xScale(d))\n .attr('y', 0)\n .attr('height', 20)\n .attr('width', 5)\n .attr('class', 'diverging')\n .attr('fill', (d) => diverging(d)) \n svg.selectAll(\"text\")\n .data(legend)\n .join(\"text\")\n .text(d=>d)\n .attr(\"font-size\", 14)\n .attr(\"x\", (d,i)=> i=== 0? xScale(0) : xScale(79))\n .attr(\"y\", 45)\n .style(\"font-family\", \"Libre Baskerville, serif\")\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2463,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"md`## Who to Follow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"md`Based on the above common sources for learning, many roles learn commonly through online resources. Some of these resources involve examples and tutorials of others. Here are the top 10 results of data visual leaders to gain inspiration.
*Click on different roles to change view*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"md`### Techniques`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2544,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2547,"value":"md`Text analyis is done using TF-IDF comparing roles by normalizing data to the entire corpus shown in [this notebook](https://observablehq.com/d/983d9174a0e4f939).
Weighted Averages for ranking tools is done by multiplying (1+tool meets needs of participant) times total participants with that rating and listing that tool and adding all those weighted values per rank and dividing by the total count.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2557,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"md`## Utils

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"colors = ['#8ea9f7',\n'#d68ff7',\n'#f783d3',\n'#f88a9f',\n'#f69335',\n'#c3ab35',\n'#8db934',\n'#36c27a',\n'#39beae',\n'#3bbad0']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"strokeColors = [\n'#005ac3',\n'#9d00c5',\n'#b1008c',\n'#bd0049',\n'#8d4f00',\n'#6d5e00',\n'#4b6700',\n'#006d3e',\n'#006a60',\n'#006876'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"purple = \"#57c5c7\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"friendlyNames = {\n return {\n \"vis\": \"Data visuals\",\n \"engineering\": \"Engineering\",\n \"dataScience\" : \"Data science\",\n \"design\" : \"Design\",\n \"dataPrep\" : \"Data prep\",\n \"portfolio\": \"Portfolio\"\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2327,"value":"flatFollwerData = followersData.map((d)=> {\n const roleCount = d.followerCount\n return {...roleCount, entity: d.entity, total: d.total}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"toolRankSVG = {\n const height = 300\n return d3.create(\"svg\").attr(\"height\", height).attr(\"width\", width)\n} \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"learningMethods = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/learning_methods.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"colorCategoryScale = d3.scaleOrdinal()\n .domain(Object.keys(hoursPerRole[0].medians))\n .range(Object.values(wineClassColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2204,"value":"mutable sliceDirection = \"top\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"svgHoursHeight = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"svgHoursWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"svgFollowersHeight = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"svgFollowersWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"svgToolsWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"svgToolsHeight = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2193,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"svgTools = d3.create(\"svg\").attr(\"height\", svgToolsHeight).attr(\"width\", svgToolsWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"chartRoleData = toolsRating.map((d)=>{ return {\n rank : d.score - 1,\n key: d.key,\n total: d.total\n}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"svgFollowers = d3.create(\"svg\").attr(\"height\", svgFollowersHeight).attr(\"width\", svgFollowersWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"svgHours = d3.create(\"svg\").attr(\"height\", svgHoursHeight).attr(\"width\", svgHoursWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"svgRoleHeight = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":" svgRole = d3.create(\"svg\").attr(\"height\", svgRoleHeight).attr(\"width\", width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"mutable roleSection = \"total\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"wineClassColors = ({\n bordeaux: \"#4b1a26\",\n tuscany: \"#c05c28\",\n red: \"#ed1d48\",\n yellowGreen: \"#8cc63f\",\n claret: \"#7e1832\",\n brightSun: \"#fed23e\",\n lightCarminePink: \"#f1696a\",\n fountainBlue: \"#57c5c7\",\n yellowOrange: \"#fbab40\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"chartWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"wineClassColorScale = d3.scaleOrdinal()\n .domain(Object.keys(titleMapping))\n .range(Object.values(wineClassColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"function addQuoteToChart(svg,data, marginLeft, termScale){\n console.log(\"marginLeft\", marginLeft)\n svg.selectAll(\".quote, .dummyText\").remove()\n const group = svg.selectAll('g')\n .data(data, (d,i )=> d)\n .join('g')\n .attr('transform', (d, i) => `translate(0,${termScale[d.key]})`)\n .classed('quote', true)\n \n\nconst quoteItems = group.selectAll(\".dummyText\")\n .data(d => d.textValues, (d)=>d.key)\n .enter()\n \n quoteItems.append(\"text\")\n .attr(\"font-size\", \"14px\")\n .attr(\"x\", marginLeft)\n .attr(\"y\",(d,i)=> 30)\n .attr(\"class\", \"dummyText\")\n .attr(\"key\", (d)=> d.key)\n \n .text(function(d) { return `\"${d.text}\"`})\n .attr(\"title\", (d)=>`${d.maxHeight}`)\n \nsvg.selectAll(\".dummyText\")\n .call(wrap, 300);\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"\ncreateToolTip = (svg) => {\n const tip = d3Tip(svg)\n .attr(\"class\", \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .style(\"font-family\", \"Libre Baskerville, serif\")\n .style(\"max-height\", \"250px\")\n .style(\"width\", \"150px\")\n .style(\"overflow\", \"hidden\")\n .offset([-10, 0])\n .html(function (d) {\n return `

${(d.text)}

`\n })\n svg.call(tip)\n return tip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"createHoursTip = (svg) => {\n const tip = d3Tip(svg)\n .attr(\"class\", \"d3-tip\")\n // .style(\"color\", \"black\")\n .style(\"background-color\", \"white\")\n .style(\"padding\", \"2px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"14px\")\n .attr(\"font-family\", \"Chilanka, cursive\")\n .style(\"max-height\", \"250px\")\n .style(\"max-width\", \"200px\")\n .style(\"overflow\", \"hidden\")\n .offset([-10, 0])\n .html(function (d) {\n const color = colorCategoryScale(d.category)\n return `

${(friendlyNames[d.category])} : ${(d.value)}hrs

\n ${d.role}`\n })\n svg.call(tip)\n return tip\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"stemRefWords = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/stem_reference.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"weightedToolRanks = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/tool_weighted_rank.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"raw = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/raw.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"rawDataObject = {\n return raw.reduce((acc, o)=> {\n const id = o.id\n acc[id] = o\n return acc\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"followersData = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/followers.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"tfidfPerRole = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/topTFIDF.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"tfidfTools = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/tfidf_tools.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"tfidf= {\n return tfidfPerRole.reduce((acc, item)=> {\n if(item.weights.length >0) {\n if(item.role === \"Leadership (Manager, Director, VP, etc)\"){\n acc[\"Leadership\"] = item.weights.slice(0,5)\n\n } else if(item.role === \"None of these describe my role\"){\n acc[\"Other\"] = item.weights.slice(0,5)\n\n } else {\n acc[item.role] = item.weights.slice(0,5)\n }\n \n }\n \n return acc\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3Tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3Array = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"rollup = d3Array.rollup(raw, v => v, d => d.role)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2420,"value":"rollupSelfTaught = d3Array.rollup(raw, v => v, d => d.school_or_self_taught)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2429,"value":"educationCount = {\n const selfTaught = Array.from(rollupSelfTaught)\n const rolledUpCount = selfTaught.map((arr)=>{\n const title = arr[0]\n const values = arr[1]\n const roleCount = values.reduce((acc, resp) => {\n const role = resp.role\n const prev = acc[role] || 0\n acc[role] = prev + 1\n return acc\n },{})\n return {title, count: values.length, roleCount}\n }).filter((o)=> o.title.length > 1)\n return rolledUpCount.map((item)=> {\n const values = item.roleCount\n return {... values, title: item.title, total: item.count }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"hoursPerRole = {\n const data = await (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/median_hours.json\")).json()\n return data.filter((o)=> o.role !== \"Freelancer\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"dataByRole = {\n const arr = Array.from(rollup)\n return arr.reduce((acc, a)=>{\n const name = a[0]\n \n acc.push({role:name, data: a[1] })\n return acc\n }, [])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"titleMapping = {\n return { \n \"Leadership\" : \"Leadership (Manager, Director, VP, etc)\",\n \"Other\" : \"None of these describe my role\",\n \"Academic\": \"Academic\",\n \"Developer\" : \"Developer\",\n \"Analyst\" : \"Analyst\",\n \"Student\" : \"Student\",\n \"Engineer\" : \"Engineer\",\n \"Designer\" : \"Designer\",\n \"Scientist\" : \"Scientist\",\n \"Freelancer\" : \"Freelancer\"\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"reverseTitleMap = {\n return Object.keys(titleMapping).reduce((acc, key)=>{\n const oldKey = titleMapping[key]\n acc[oldKey] = key\n return acc\n},{} )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1846,"value":"rolesPerTools = (await fetch(\"https://raw.githubusercontent.com/ahoak/data-vis-sandbox/master/tools_rank_roles.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"{\n return rolesPerTools.reduce((acc, da)=>{\n \n const values = da[\"roles\"]\n if(values[\"excel\"]){\n acc.push(values[\"excel\"])\n }\n return acc\n}, [])\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"html` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"html` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 31:"$30:body"