chart_draft_top10 = { const svg = d3.create("svg").attr("viewBox", [0, -20, 600, 460]).style("background",ColorPalette.background); // make a little group for each symbol var g = svg.selectAll(".shapesGroup") .data(top_10) .enter() .append("g") .attr("transform", d => "translate("+date2coords_top10(d.last_date).x+","+date2coords_top10(d.last_date).y+")") .attr("class","shapesGroup"); // draw Top face (using date data) g.append("path") .attr("fill",d => p1_date_colors(d.last_date)) .attr("d", d => triadTopFaceSymbol.size(50)()) .attr("stroke",ColorPalette.line) .attr("stroke-width","2") // draw Left face (using file number data) g.append("path") .attr("fill",d => p1_file_number_colors(d.total_files)) .attr("d", d => triadLeftFaceSymbol.size(50)()) .attr("stroke",ColorPalette.line) .attr("stroke-width","2") // draw Right face (using repo number data) g.append("path") .attr("fill",d => p1_repo_colors(d.total_repos)) .attr("d", d => triadRightFaceSymbol.size(50)()) .attr("stroke",ColorPalette.line) .attr("stroke-width","2") // use the big shape to make a little white border g.append("path") .attr("class", "full_outline") .attr("fill","none") .attr("stroke",ColorPalette.line) .attr("stroke-width","2") .attr("d", d => triadFullSymbol.size(50)()); // add a little invisible full symbol for hovering g.append("path") .attr("class", "full_outline_overlay") .attr("fill","#ffffff") .attr("fill-opacity",0.000001) .attr("stroke-opacity",1) .attr("d", d => triadFullSymbol.size(47)()) .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut ); function nodeMouseOver(event, d){ toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(`

${d.author}

Last Contribution: ${timeFormat(d.last_date)}
Total Changed Files: ${d.total_files}
Total Repos Changed: ${d.total_repos}
`); d3.select(event.target).style("cursor", "pointer"); // can we make this line show up around the entire triad?? // instead of selecting the event.target // i think we can select the nearest d3.select(event.target) .transition() .attr('stroke', '#A8234E') .attr('stroke-width', 2); } function nodeMouseOut(event, d){ toolTip.style("display", "none"); d3.select(event.target).style("cursor", "default"); d3.select(event.target) .transition() .attr('stroke', ColorPalette.line) .attr('stroke-width', 0); } const title = svg.append("text") .attr("x", 600/2) .attr("y", 300) .attr("text-anchor", "middle") .style("font-size", "30px") .style("font-family", "MuseoModerno") .style("font-weight", 500) .text("Top D3.js Contributors"); // color the left face Blue for this example svg.selectAll(".shapesLeft") .data(legend_data) .enter() .append("path") .attr("transform", d => "translate("+d.x+","+d.y+")") .attr("fill","none") .attr("stroke",ColorPalette.text) .attr("stroke-width","2") .attr("d", d => triadLeftFaceSymbol.size(d.r)()); // color the right face Green for this example svg.selectAll(".shapesRight") .data(legend_data) .enter() .append("path") .attr("transform", d => "translate("+d.x+","+d.y+")") .attr("fill","none") .attr("stroke",ColorPalette.text) .attr("stroke-width","2") .attr("d", d => triadRightFaceSymbol.size(d.r)()); // color the top face Yellow for this example svg.selectAll(".shapesTop") .data(legend_data) .enter() .append("path") .attr("transform", d => "translate("+d.x+","+d.y+")") .attr("fill","none") .attr("stroke",ColorPalette.text) .attr("stroke-width","2") .attr("d", d => triadTopFaceSymbol.size(d.r)()); // and let's do a white stroke (no fill) around all 3 of them // (i made a special symbol just for this) svg.selectAll(".shapesFull") .data(legend_data) .enter() .append("path") .attr("transform", d => "translate("+d.x+","+d.y+")") .attr("fill","none") .attr("stroke",ColorPalette.text) .attr("stroke-width","2") .attr("d", d => triadFullSymbol.size(d.r)()) svg.selectAll("text") .data(annotations) .enter() .append("text") .attr("x", d => d.x) .attr("y", d => d.y) .attr("text-anchor", "middle") .style("font-size", "10px") .style("font-family", "MuseoModerno") .style("font-weight", 900) .text(d => d.text) .attr("transform", function(d) { if (d.scale) { return `rotate(${d.rotate})scale(-1,-1)` } else { return `rotate(${d.rotate})` } }) .style("fill", ColorPalette.text) return svg.node(); }