Example of WIP-Menu for supernullset.com

null.coffee

w = 1000
h = 500
X = d3.scale.ordinal().domain([90]).rangePoints([0,w],1)
Y = d3.scale.ordinal().domain([180]).rangePoints([0,h],2)

upper_arc = d3.svg.arc()
  .innerRadius(95)
  .outerRadius(105)
  .startAngle(0)
  .endAngle(Math.PI)

icon_center = [
    upper_arc.centroid()[0] + X(upper_arc.centroid()[0])
  , upper_arc.centroid()[1] + Y(upper_arc.centroid()[1])
]

svg = d3.select("#chart").append("svg")
  .attr("width", w)
  .attr("height", h)

g = svg.append("g").attr("class","hit-group")

g.append("circle")
  .attr("id", "hit-box")
  .attr("fill", "#FFF")
  .attr("cx", X)
  .attr("cy", Y)
  .attr("r", 105)
  .attr("transform", "translate(103,0)")

g.append("path")
  .attr("d", upper_arc)
  .attr("stroke", "#000")
  .attr("stroke-width", 2)
  .attr("id","upper")
  .attr("transform", "translate(#{icon_center})")

g.append("path")
  .attr("d", upper_arc)
  .attr("stroke", "#000")
  .attr("stroke-width", 2)
  .attr("id","lower")
  .attr("transform","rotate(180, #{icon_center})translate(#{icon_center})")

g.append("svg:line")
  .attr("id", "bar")
  .attr("x1", 82)
  .attr("y1", 82)
  .attr("x2", -82)
  .attr("y2", -82)
  .attr("stroke","#000")
  .attr("stroke-width", 15)
  .attr("transform", "rotate(90,#{icon_center})translate(#{icon_center})")


bar_rotation = 135
arc_rotation = 90

hell = false

d3.select(".hit-group").on "mouseover", ->
  d3.select("#bar")
    .transition().duration(1000)
      .attr("transform", "rotate(#{bar_rotation}, #{icon_center})translate(#{icon_center})")
    .transition()
      .delay(1000)
        .attr("x1", 220)
        .attr("y1", 220)
        .attr("x2", -220)
        .attr("y2", -220)
        .attr("stroke","#000")
        .attr("stroke-width", 30)

  if hell == false
    d3.select("#chart").append("ul").transition().delay(2000).attr("id","hell")
    d3.select("#hell").append("li").text("bitch")
    hell = true

  d3.select("#upper")
    .transition().duration(1000)
      .attr("fill", "#FC0000")
      .attr("stroke", "#FC0000")
      .attr("transform","rotate(#{arc_rotation}, #{icon_center})translate(#{icon_center})")
    .transition()
      .delay(1000)
      .attr("transform", "rotate(#{arc_rotation}, #{icon_center})translate(#{icon_center[0]}, #{icon_center[1]  - 200 })")
    .transition()
      .duration(500)
      .delay(2000)
      .attr("fill", "#FFF")
      .attr("stroke", "#FFF")


  d3.select("#lower")
    .transition().duration(1000)
      .attr("fill", "#FC0000")
      .attr("stroke", "#FC0000")
      .attr("transform","rotate(-#{arc_rotation}, #{icon_center})translate(#{icon_center})")
    .transition()
      .delay(1000)
      .attr("transform", "rotate(-#{arc_rotation}, #{icon_center})translate(#{icon_center[0]}, #{icon_center[1]  - 200 })")
    .transition()
      .duration(500)
      .delay(2000)
      .attr("fill", "#FFF")
      .attr("stroke", "#FFF")

d3.select(".hit-group").on "mouseout", ->
  d3.select("#hell").remove()
  d3.select("#bar")
    .transition().duration(1000)
      .attr("transform", "rotate(90, #{icon_center})translate(#{icon_center})")
    .transition().duration(500)
      .delay(1000)
        .attr("x1", 82)
        .attr("y1", 82)
        .attr("x2", -82)
        .attr("y2", -82)
        .attr("stroke","#000")
        .attr("stroke-width", 15)

  d3.select("#upper")
    .transition().duration(1000)
      .attr("fill", "#FC0000")
      .attr("stroke", "#FC0000")
      .attr("transform","rotate(45, #{icon_center})translate(#{icon_center})")
    .transition()
      .duration(1000)
      .delay(1000)
      .attr("fill", "#000")
      .attr("stroke", "#000")

  d3.select("#lower")
    .transition().duration(1000)
      .attr("fill", "#FC0000")
      .attr("stroke", "#FC0000")
      .attr("transform","rotate(225, #{icon_center})translate(#{icon_center})")
    .transition()
      .duration(1000)
      .delay(1000)
      .attr("fill", "#000")
      .attr("stroke", "#000")