chart = { const svg = d3.select(DOM.svg(width, height)); // add red shaded region // const shade = svg.append('rect') // .attr('x', width/2) // .attr('height', height/2 - margin.bottom) // .attr('width', width/2 - margin.left) // .attr('transform', 'translate(0,' + height/2 + ')') // .style('fill', '#cc0000') // .style('opacity', 0.2); // x axis will be fiscal year 2018 const x_axis = svg.append('g') .attr("transform", "translate(0,"+ (height/2) + ")") //translate(0, 240)") .call(Xaxis) .style('font-family', 'monospace'); // add Q4 performance axis const y_axis = svg.append('g') .attr("transform", "translate(" + (width/2) + "," + "0)") .call(Yaxis) .style('font-family', 'monospace'); // add labels const quad1 = svg.append('text') .attr("class", "quad_caption") .attr('x', width - 10*margin.right) .attr('y', margin.top + 15) .text('Up for the quarter and year'); // add labels const quad2 = svg.append('text') .attr("class", "quad_caption") .attr('x', margin.left + 15) .attr('y', margin.top + 15) .text('Up for the quarter, down for the year'); // add labels const quad3 = svg.append('text') .attr("class", "quad_caption") .attr('x', margin.left + 15) .attr('y', height - margin.bottom - 15) .text('Down for the year and quarter'); // add labels const quad4 = svg.append('text') .attr("class", "quad_caption") .attr('x', width - 13*margin.right) // - d3.select(this).getComputedTextLength()) .attr('y', height - margin.bottom - 15) .text('Up for the year, down for the quarter'); // plot points const rets = svg .selectAll('circle') .data(df) .enter() .append('circle') .attr('cx', d => FYscale(d.FY2018)) .attr('cy', d => Q4scale(d.Q4)) .attr('fill', d => d.sector === "Utilities" ? '#cc0000' : '#bdbdbd') .attr('r', 3.25) .attr('opacity', 0.5) .on("mousemove", function(event, d) { d3.select(event.currentTarget).attr('fill', '#333333').attr('r', 4); console.log(d3.select(event.currentTarget)); // d3 v6 source tooltip h/t // https://bl.ocks.org/d3noob/180287b6623496dbb5ac4b048813af52 toolTip .style('left', event.pageX + "px") .style('top', event.pageY + "px") .style('display', "inline-block") .html(`Name: ${d.name}
Industry: ${d.sector}
FY2018: ${d3.format(",.2~f")(d.FY2018*100)}%
Q4: ${d3.format(",.2~f")(d.Q4*100)}%`); }) .on('mouseout', function(event, d) { d3.select(event.currentTarget).attr('fill', d => d.sector === "Utilities" ? '#cc0000' : '#bdbdbd').attr('r', 3.25); toolTip.style('display', 'none')}); return svg.node(); };