       .attr("data-label", (d) -> d.label)
 
     embedNodeInfo = (node) ->
-      info_list = $('<ul />', id: 'node_info')
       payload =
         node_url: node_url
         node: node
         url: "#{node_url}/#{node.info.id}/"
       template = templateName(edge_type, 'node')
-      info_list.html(HandlebarsTemplates[template](payload)) if template
-      $("div#d3_context").html(info_list)
+      if template
+        d3.select("div#d3_context").html('')
+          .append('ul').attr('id', 'node_info')
+          .html(HandlebarsTemplates[template](payload))
 
     embedEdgeInfo = (edge) ->
-      info_list = $('<ul />', id: 'edge_info')
       payload =
         edge_url: edge_url
         edge: edge
       template = templateName(edge_type, 'edge')
-      info_list.html(HandlebarsTemplates[template](payload)) if template
-      $("div#d3_context").html(info_list)
-
-    $("g.node").on "click", (e) ->
-      e.preventDefault()
+      if template
+        d3.select("div#d3_context").html('')
+          .append('ul').attr('id', 'edge_info')
+          .html(HandlebarsTemplates[template](payload))
+
+    d3.selectAll("g.node").on "click", (node_data) ->
+      d3.event.preventDefault()
       resetSelections()
       default_classes = "node"
       classes = "#{default_classes} selected"
-      node_data = d3.select(this).data()[0]
       # use attr, because jquery-class doesn't work
       if window.selected_node != this
         $(window.selected_node).attr('class', default_classes)
       window.selected_node = this
-      $(this).attr('class', classes)
+      d3.select(this).attr('class', classes)
       embedNodeInfo(node_data)
 
-    $("g > path").on "click", (e) ->
-      e.preventDefault()
+    d3.selectAll("g > path").on "click", (path_data) ->
+      d3.event.preventDefault()
       resetSelections()
-      path_data = d3.select(this).data()[0]
-      addClass($(this), 'selected')
+      d3.select(this).classed('selected', true)
       embedEdgeInfo(path_data)
 
-    $('path').on('mouseenter', (e) ->
-      removeClass('g.node', 'highlight')
+    d3.select('path').on('mouseenter', (e) ->
+      d3.selectAll('g.node').classed('highlight', false)
       path_data = d3.select(this).data()[0]
       source_index = path_data.source.index
       target_index = path_data.target.index
-      addClass($(node[0][source_index]), 'highlight')
-      addClass($(node[0][target_index]), 'highlight')
+      d3.select(node[0][source_index]).classed('highlight', true)
+      d3.select(node[0][target_index]).classed('highlight', true)
     )
-    $('path').on('mouseleave', (e) -> removeClass('g.node', 'highlight'))
+    d3.select('path').on('mouseleave', (e) -> d3.selectAll('g.node').classed('highlight', false))
 
     node.append("circle").
       attr("r", (d) -> if d.is_center then 10 else 7)

  node_url = nodes_edges[2]
  edge_url = nodes_edges[3]

  addClass($('a#all'), 'btn-primary')

  edgesForMode = (the_mode) ->
    if the_mode == "normal"

    zoom_listener = d3.behavior.zoom().
      scaleExtent([0.1, 3]).on("zoom", zoom)

    d3.select("div#d3_graph").html("")
    svg = d3.select("div#d3_graph")
      .append('svg')
      .attr('width', width)
