circlePack = { const height = width*.85; const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-circlepack"; const root = d3.pack() .size([innerWidth, innerHeight]) .padding(4) (hierarchy) let format = d3.format(",d") const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const node = group.append("g") .attr("pointer-events", "all") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Country Labels let typeScale = d3.scaleLinear() .domain(d3.extent(root.children, d => d.r)) .range([8,24]); let countries = group.append("g") .attr("pointer-events", "none") .selectAll("g") .data(root.descendants().filter(d => d.depth === 1)) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); countries.append("text") .attr("class", d => `labels label-${d.data[0]}`) .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("pointer-events", "none") .attr("font-size", d => typeScale(d.r)) .attr("opacity", .75) //.text(d => data.placeMap.get(d.data[0])[0].entity); .text(d => { let label = d.data[0] //data.placeMap.get(d.data[0])[0].entity //let label = lookupContinent[d.data[0]] //data.placeMap.get(d.data[0])[0].entity return (d.r > 15) ? label : ""; }); node.append("circle") .attr("r", d => d.r) .attr("stroke", d => d.children ? "#ddd" : "none") .attr("fill", d => d.children ? "none" : "#ddd") .on('mousemove', (event, d) => { if (d.depth === 2) { // change to 3 if three levels d3.select(event.target).attr('stroke','red'); let tipRow = data[d.data[0]] let tipContent = `${d.data[0]} - ${tipRow.name}
` tipContent += `${tipRow.city_name} - ${tipRow.country}
` tipContent += `${tipRow.routes.length} Routes
` chartTip.style("left", () => { console.log(d3.pointer(event)[0]) console.log(innerWidth - d3.pointer(event)[0]) if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipContent); } }) .on('mouseout', (event, d) => { chartTip.style("display", "none"); // Hide toolTip if (d.depth === 2) { d3.select(event.target).attr('stroke','none'); } }); const leaf = node.filter(d => !d.children); leaf.select("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); const outer = node.filter(d => !d.parents); //const outer = node.filter(d => d.depth === 1); outer .on('mousemove', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .05); //d3.selectAll(`#${chartid} .label-{d.data[0]}`).attr('opacity', .15); }) .on('mouseout', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .85); }); return svg.node(); } // chart_airtport_routes = { // const height = width*.85; // const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); // const innerHeight = height - margin.top - margin.bottom; // const innerWidth = width - margin.left - margin.right; // const chartid = "chart-circlepack-airports"; // const root = d3.pack() // .size([innerWidth, innerHeight]) // .padding(4) // (d3.hierarchy({children: points}) // .sum(d => d.routes)) // // const root = pack(carrierCounts); // const colorLine = "#ff0072" // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) // .attr("id", chartid); // const group = svg.append("g") // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // // const svg = d3.create("svg") // // .attr("viewBox", [0, 0, width, width]) // // .attr("font-size", 10) // // .attr("font-family", "sans-serif") // // .attr("text-anchor", "middle"); // const leaf = group.selectAll("g") // .data(root.leaves()) // .join("g") // .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`) // .attr("class", "carrier"); // leaf.append("circle") // .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) // .attr("r", d => d.r) // .attr("fill-opacity", 0.25) // .attr("fill", "grey") // .on('mousemove', (event, d) => { // d3.select(event.target).attr('stroke', colorLine); // let tipContent = `${d.data.carrier}
${d.data.value} Routes` // chartTip.style("left", () => { // console.log(d3.pointer(event)[0]) // console.log(innerWidth - d3.pointer(event)[0]) // if ((innerWidth - d3.pointer(event)[0]) < 120) { // return event.pageX - (24+240) + "px"; // } else { // return event.pageX + 24 + "px"; // } // }) // .style("top", event.pageY + 24 + "px") // .style("display", "inline-block") // .html(tipContent); // }) // .on('mouseout', (event, d) => { // chartTip.style("display", "none"); // Hide toolTip // d3.select(event.target).attr('stroke','none'); // }); // leaf.append("clipPath") // .attr("id", d => (d.clipUid = DOM.uid("clip")).id) // .append("use") // .attr("xlink:href", d => d.leafUid.href); // leaf.append("text") // // .attr("clip-path", d => d.clipUid) // .attr("pointer-events", "none") // // .text(d => d.data.value > 250 ? d.data.carrier : "") // .attr("font-size", 10) // // .attr("font-family", "sans-serif") // .attr("text-anchor", "middle") // .attr("alignment-baseline", "middle") // .selectAll("tspan") // // .data(d => d.data.value > 250 ? d.data.carrier.split(/(?=[A-Z][a-z])|\s+/g) : "") // .data(d => d.data.value > 250 ? d.data.carrier.split(" ") : "") // .join("tspan") // .attr("x", 0) // .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) // .text(d => d); // // leaf.append("title") // // .text(d => `${d.data.title === undefined ? "" : `${d.data.title} // // `}${d.routes}`); // return svg.node(); // }