search

ramnathv / rcstatebin

Interactive Statebin Charts
http://ramnathv.github.io/rcstatebin
MIT License
12 stars 3 forks source link

how might we leverage stateface? #5

Open timelyportfolio opened 9 years ago

timelyportfolio commented 9 years ago

I know that the goal of statebins is to be ridiculously simplistic, but since waffle from @hrbrmstr, d3-exploder, and @ramnathv experiments are fresh in my mind, I couldn't resist the urge to see if we could leverage the great project stateface in rcstatebin in my fork and branched version. If not in rcstatebin, I know I'm going to use this in R charts or other htmlwidgets.

Instead of the text abbreviation we could use the state shape (probably not a good idea for the geographically ignorant US).

image

d3.selectAll(".cell text")
  .text(function(d){return stateface.lookup[d.state]})
  .style("font-family","StateFaceRegular")
  .style("fill","none")
  .style("stroke","gray")
  .style("font-size", "24px")

In the tooltip, we could also show the state shape for additional context.

image

data.state = data.state + " <span style='font-family:StateFaceRegular;font-size:24px'>" + stateface.lookup[data.state] + "</span> "
ramnathv commented 9 years ago

This looks awesome @timelyportfolio ! Can you send me a PR? Note that the source is in coffeescript, so make sure to put your modifications there.

ramnathv commented 9 years ago

I will make this line accept a renderer function to facilitate this. More generally, as you had indicated earlier, the widget needs to fire a completed rendering event, and also expose d3.selectAll(".cell") since everything hangs off of that.