Day Eighteen

Log

Increasingly I am creating things online for a great client. Before I'd create charts in R and send them over so they could be used internally in their reports, but now I'm starting to send a link to a page, and are asing fro the ability to drill down etc. This is GREAT, but also means I need to get a standard way of doing this, so this little 100 days project (even though I'm VERY behind) is me working out the best way of doing things. As I progress I'm making changes to things like setting up the SVG on the page etc as I find a better / more efficient way to do it - or at least a way that I am finding more efficient. I'm also noticing how much I am using these to keep coming back to and referring to different scripts for copy / paste and it's saving me HEAPS of time!

I'm using Full stack D3 as the basis for this, but have changed a lot. I find the set up of the page used in this book as sometimes a bit OTT, and some of the variable creation seems overly complicated. And this is because I'm still learning, so the simpler the better at this stage in the game!

1. Added a legend as per Day 17

2. Set up the tooltip part:
   SA2.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave)

const tooltip = d3.select("#tooltip")
function onMouseEnter(i, d) {
tooltip.style("opacity", 1)
tooltip.select("#sa2")
.text(SA2_name_accessor(d))

tooltip.select("#value")
.text(`${d3.format(".0%")(data_mapped.get(
d.properties.SA2_NAME16) || 0)}`)

const x = pathGenerator_SA2.centroid(d)[0]-50
const y = pathGenerator_SA2.centroid(d)[1]+400

tooltip.style("transform", `translate(`
+ `calc( ${x}px),`
+ `calc(${y}px)`
+ `)`)
}

function onMouseLeave() {
tooltip.style("opacity", 0)
}

I'm quite happy that I did this! I like the style and it has all the info the client needs.

One tricky part is making sure I have my divs in order in my html and css, and that the outer div in the CSS is:

position: relative;

and the div that holds the tooltip is:

position: absolute;

This time, it was the CSS that gave me the most grief. URGH! Someone once said t me "your troubles always lie in the CSS", and today this was the case!

As ever code can be found here