function circle_chart(root, duns, highlight_me){ //colors used var background_color = "#f2f3f4" var highlight_color = "#D79922" var outline_color = "#4056A1" var center_circle_color = "#C5CBE3" var font_color = '#303C6C' var extra_highlight_color = '#56a140' var fontsize = d3.scaleSqrt() .domain([0, 150]) .range([5, 20]) .clamp(false) let focus = root; let view; var current_title = "Click to Zoom" const svg = d3.create("svg") .attr("viewBox", `-${width / 2} -${height /(2)} ${width} ${height}`) .style("display", "block") .style("margin", "0 0px") .style("background", background_color) //.style("cursor", "pointer") .on("mouseover", (event) => (svgMouseOut(event, root))) // tooltip + styling const toolTip = d3.select("body") .append("div") .attr("class", "toolTip") .style("position", "absolute") .style("display", "none") .style("border-radius", "1px") .style("width", width/3) .style("height", "auto") .style("background", background_color) .style("padding", "0px") .style("border", "1px solid #DDD") .style("font-size", "1.1rem") .style("text-align", "left") //https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-strings // Create our number formatter. var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact', // These options are needed to round to whole numbers if that's what you want. //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) }); var startTime; var endTime; const node = svg.append("g") .selectAll("circle") //.data(root) .data(root.descendants().slice(1)) .join("circle") .attr("fill", d => d.children ? background_color : toTitleCase(String(d.data[0])) == toTitleCase(String(recipientdrop)) ? highlight_color : center_circle_color) .attr("stroke", d=> d.children ? highlight_color : toTitleCase(String(d.data[0])) == toTitleCase(String(recipientdrop)) ? highlight_color : outline_color) .attr("stroke-width", 2) .on("mouseover", (event, d) => (leafMouseOver(event, d), event.stopPropagation())) .on("mouseout", (event, d) => (leafMouseOut(event, d), event.stopPropagation())) .on("click", (event, d) => focus !== d ? (zoom(d)) : console.log(d)) .on("touchstart", (event, d) => focus !== d ? (leafMouseOver(event, d)) : console.log(d)) .on("touchend", (event, d) => focus !== d ? (leafMouseOut(event, d), zoom(d)) : console.log(d)) // show tooltip on mousehover function leafMouseOver(event, d){ d3.selectAll('.toolTip').style("display", "none" ) d3.select(event.target).attr("stroke-width", 10) // d3.select(event.target).attr("stroke", highlight_color) console.log(d) var formated_money =parseFloat(d.value)*parseFloat(dd3)/8992408699023 var formated_money = formatter.format(formated_money) var raw_money = formatter.format(parseFloat(d.value)) var descendents = d.ancestors().map(d => (d.data[0])).join(' -> ') if (duns == true) { var extra_info_duns = extra_info .filter(function(e, i) { return e.recipient_duns == d.data[0]}) var Reason = extra_info_duns.length == 0 ? "none": extra_info_duns[0]["Reason_in_list"] var Name = extra_info_duns.length == 0 ? "none": extra_info_duns[0]["recipient_name"] var Link = extra_info_duns.length == 0 ? "none": extra_info_duns[0]["Link"] var info_blurb = extra_info_duns.length == 0 ? "none": extra_info_duns[0]["blurb"] var html_test = extra_info_duns.length == 0 ? ` ${toTitleCase(String(d.data[0]))}
Your taxes provide : ${formated_money}
Total money : ${raw_money}
`: `${toTitleCase(Name)}
Your taxes provide : ${formated_money}
Total money : ${raw_money}
${Reason}
Blurb from link: ${info_blurb}` } else { var html_test = `${toTitleCase(String(d.data[0]))}
Your taxes provide : ${formated_money}
Total money : ${raw_money}
` } toolTip // .style("left", (width - d3.select(event.target).attr("cx")) < width/3 ? event.pageX - width/3 + "px": event.pageX + "px") .style("left", 0) .style("top", event.pageY + 10 + "px") .style("display", "block") .html(html_test) } function svgMouseOut(event, d){ d3.selectAll('.toolTip').style("display", "none" ) d3.selectAll('.title_desc').style("display", "none" ) } function leafMouseOut(event, d){ // d3.select(event.target).attr("stroke", d=> d.children ? highlight_color : d.data[0] == highlight_me ? highlight_color : outline_color) d3.select(event.target).attr("stroke-width", d=> d.data[0] == highlight_me ? 3 : 1) //toolTip.style("display", "none" ); } function get_name(d){ if (duns == true){ var extra_info_duns = extra_info .filter(function(e, i) { return e.recipient_duns == d}) var name = extra_info_duns.length == 0 ? toTitleCase(d).substring(0, 25) : toTitleCase(extra_info_duns[0].recipient_name.substring(0, 20)) } else { name = toTitleCase(d).substring(0, 25) } return name } function get_award(d){ if (duns == true){ var extra_info_duns = extra_info .filter(function(e, i) { return e.recipient_duns == d}) console.log(extra_info_duns) var name = extra_info_duns.length == 0 ? outline_color : extra_info_duns[0].Reason_in_list=="Nobel Prize Laureate"? extra_highlight_color : extra_info_duns[0].Reason_in_list==""? outline_color : highlight_color } else { name = outline_color } return name } node .attr("stroke", d => get_award(d.data[0])) const label = svg.append("g") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .join("text") .text(d => get_name(String(d.data[0]))) const node_international_affairs = node //.attr("test", d => console.log(d.descendants().map(d => (d.data[0])))) .filter(function(d, i) { return d.data[0] == "International Affairs: Budget Function" }) .filter(function(d, i) { return i == 0 }) // if (first_item === recipientdrop) { zoom(root); // } // else { // node_international_affairs // .each(function(d) { // zoom(d); // d is datum // temp_highlight(recipientdrop) // }) // } function temp_highlight(highlight_this){ // node_international_affairs // .each(function(d) { // zoom(d) // d is datum // }) const node_selected = node .filter(function(d, i) { return d.data[0] == highlight_this}) node_selected .attr("stroke-width", 5) .attr('stroke-opacity', 1) .attr('stroke', highlight_color) } function zoomTo(v) { function grandparent_fun(d){ var grandparent_root = false if (d.parent == null | duns == false){ var grandparent_root = false } else { var grandparent_root = d.parent.parent == focus } return grandparent_root } const k = width / v[2]; view = v; //keep labels above circle so can have multipe labeling label.attr("transform", d => d == focus & duns == true ? `translate(-${0}, -${height })` : d.parent ==focus & duns == true ? `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k + d.r *k})`:`translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k })`) .attr("font-size", d => fontsize(d.r * k)) // .style("fill-opacity", d =>d.parent == focus ? 1 : d == focus && d != root ? .9 : 0) .style("display", d => fontsize(d.r * k) < 10 ? "none": (d.parent == focus |grandparent_fun(d) ) ? "inline" : "none") // .style("display", d => fontsize(d.r * k) < 10 ? "none":"inline" ) node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k) } function zoom(d) { const focus0 = focus; if (d != focus && d.height == 0){ d = d.parent.parent } if (d != focus && d.height == 1){ d = d.parent } focus = d; current_title = focus.data[0] console.log(current_title) if (focus0 !=focus | focus == root){ zoomTo([focus.x, focus.y, focus.r * 2])} } // var title1 = svg.append("text") // .attr("x", width / 2 - 100)//`-${width / 2} - 200`) // .attr("y", -height /2 + 100 )//`-${height / 2} - 200`) // .attr("text-anchor", "middle") // .style("cursor", "pointer") // .style("font-size", "18px") // // .on("click", (event, d) => (temp_highlight(), event.stopPropagation()) ) // .attr('font-weight', 500) // .style("display", d => recipientdrop != first_item ? "inline" : "none") // .text("Highlight Selected") // .on("mouseover", (event, d) => (d3.select(event.target).style("font-weight", "bold"), temp_highlight(), event.stopPropagation()) ) // .on("mouseout", (event, d) => d3.select(event.target).style("font-weight", "normal")) var title2 = svg.append("text") .attr("x", width / 2 - 100)//`-${width / 2} - 200`) .attr("y", -height /2 + 50 )//`-${height / 2} - 200`) .attr("text-anchor", "middle") .style("cursor", "pointer") .style("font-size", "18px") // .on("click", (event, d) => (zoom(root), event.stopPropagation()) ) .attr('font-weight', 600) .text("Zoom Out") .on("mouseover", (event, d) => (d3.select(event.target).style("font-weight", 900))) .on("click", (event, d) => ( zoom(root), event.stopPropagation())) .on("mouseout", (event, d) => d3.select(event.target).style("font-weight", 600)) temp_highlight(highlight_me) temp_highlight("482156317") return svg.node(); }