The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

brandtryan (11) [Avatar] Offline
#1
Hey guys/gals,

I'm really having a hard time sorting out the "highlightRegion2" section of page 80. I've read the other threads in this forum about the section, and have applied the necessary changes (I think). All I can think to do is just post what I've go so far -- First though - a comment:

At the top of page 80 there is a bit of code that returns a circle to the browser console - and just before that, there is another snippet that shows how we can get the values for d,i, etc. with another write to the browser console. I understood these snippets to be important tips/tools to see what values our variables have by using the console; therefore, I'm assuming neither of the snippets actually belong in our soccerviz.js code, but rather are useful at any time when one needs to check the variable values.

Finally, it's not clear to me whether I am to add the "highlightRegion2" function (following the highlightRegion function), or to modify the "highlightRegion" function with this new code. Here is a quote from the text, which led me to believe I would be replacing the existing function:

To see what I mean, letÂ’s first adjust our highlighting function so
that it increases the size of the label when you mouse over each element:


But since I was replacing the function -- I wondered why there appeared a "2" at the end of the function name. I considered updating the line before the function that calls it, but then decided not to.

Thanks (anyone!) for taking the time to help -- code follows. Please ignore the line numbers.

function createSoccerViz() {
var incomingData = d3.csv("teams.csv", function(data) {
overallTeamViz(data);
})

function overallTeamViz(incomingData) {
d3.select("svg")
.append("g")
.attr("id", "teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g")
.data(incomingData)
.enter()
.append("g")
.attr("class", "overallG")
.attr("transform", function (d,i) {return "translate(" + (i * 50) + ", 0)"})

var teamG = d3.selectAll("g.overallG");

teamG
.append("circle")
.style("fill", "pink")
.style("stroke", "black")
.style("stroke-width", "1px")
.attr("r", 0)
.transition()
.delay(function(d,i) { return i * 100 })
.duration(500)
.attr("r", 40)
.transition()
.duration(500)
.attr("r", 20)

teamG
.append("text")
.style("text-anchor", "middle")
.attr("y", 30)
.style("font-size", "10px")
.text(function(d) {return d.team})

var dataKeys = d3.keys(incomingData[0])
.filter(function (el) {return el != "team" && el != "region"})
d3.select("#controls")
.selectAll("button.teams")
.data(dataKeys)
.enter()
.append("button")
.on("click", buttonClick)
.html(function(d) {return d})

function buttonClick(datapoint) {
var maxValue = d3.max(incomingData,function(d) {return parseFloat(d[datapoint])
});

var radiusScale = d3.scale.linear().domain([0,maxValue]).range([2,20]);
d3.selectAll("g.overallG")
.select("circle")
.transition()
.duration(1000)
.attr("r", function(d) {return radiusScale(d[datapoint])})
}

teamG.on("mouseover", highlightRegion)

function highlightRegion(d) {
d3.selectAll("g.overallG").select("circle").style("fill", function (p) {
return p.region == d.region ? "red" : "gray"})
}

teamG.on("mouseout", function()
{d3.selectAll("g.overallG").select("circle").style("fill", "pink")})


function highlightRegion2(d,i) {
d3.select(this).select("text").classed("active", true).attr("y", 10);
d3.selectAll("g.overallG").select("circle")
.each(function(p) { p.region == d.region ?
d3.select(this).classed("active", true) :
d3.select(this).classed("inactive", true)})
}

}
}

Message was edited by:
brandtryan
brandtryan (11) [Avatar] Offline
#2
Re: 3.2.3 Struggling
Ok, having torn all of my hair out, and about to start in on my beard, I pushed myself to better know the developer's tools in the browser, and inspected nearly every element on my page. I noticed my g > rule was being overruled by the .style line a page or so up in the code (which someone actually mentioned in another post - but for some reason then, I couldn't find it) - I simply removed that style and ouila! I've got my labels growing like weeds.

Of course, I know I could just wait for the actual release of the book to avoid some of these pitfalls - but it seems to be worth it, as it forces me to figure things out, and learn new skills (like using the developor's console!).
elijah.meeks (127) [Avatar] Offline
#3
Re: 3.2.3 Struggling
I'm sorry that mistake was causing you so much annoyance, Brandt, but I'm selfishly happy that you and the folks in this forum are finding this kind of thing out for me. I'll make sure to fix this in the next release.
Hannu (4) [Avatar] Offline
#4
It seems to me that this is not fixed even in the final eBook I bought just a few days ago.
383912 (6) [Avatar] Offline
#5
Sadly this "omission" is also present in the hardcopy of the book.