     # element which the barchart will
     # live in
     base = d3.select(this)
+		
+		#set up the background
+		
     base.append("rect")
       .attr("width", graphWidth)
       .attr("height", graphHeight)
       .attr("class", "background")
 
+    # create the dots for the scatter plot
+    graph = base.append("g")
+    graph.selectAll("circle")
+      .data((d) -> d.values) #d now contains exp_ratio, ten_year_return, index
+      .enter().append("circle") # the code below will execute for each attr on circle
+      .attr("cx", (d) -> xScale(d.exp_ratio))
+      .attr("cy", (d) -> (graphHeight - yScale(d.ten_year_return) - yPadding)
+      .attr("r", 10)
+
     # create the bars
-    graph = base.append("g")
-    graph.selectAll(".bar")
-      .data((d) -> d.values)
-      .enter().append("rect")
-      .attr("x", (d) -> xScale(d.name))
-      .attr("y", (d) -> (graphHeight - yScale(d.value) - yPadding))
-      .attr("width", xScale.rangeBand())
-      .attr("height", (d) ->  yScale(d.value))
-      .attr("fill", (d) -> colorScale(d.name))
-      .on("mouseover", showAnnotation)
-      .on("mouseout", hideAnnotation)
+    # graph = base.append("g")
+    # graph.selectAll(".bar")
+    #   .data((d) -> d.values)
+    #   .enter().append("rect")
+    #   .attr("x", (d) -> xScale(d.name)) #
+    #   .attr("y", (d) -> (graphHeight - yScale(d.value) - yPadding))
+    #   .attr("width", xScale.rangeBand())
+    #   .attr("height", (d) ->  yScale(d.value))
+    #   .attr("fill", (d) -> colorScale(d.name))
+    #   .on("mouseover", showAnnotation)
+    #   .on("mouseout", hideAnnotation)
 
     # add the year title
     graph.append("text")
-      .text((d) -> d.symbol)
+      .text((d) -> d.symbol) #change to d.symbol
       .attr("class", "title")
       .attr("text-anchor", "middle")
       .attr("x", graphWidth / 2)
       .attr("dy", "1.3em")
 
-  # ---
   # This creates the additional text displayed for
   # the detail view.
-  # ---
   drawDetails = (d,i) ->
     # like in 'drawChart', 'this'
     # is the group element to draw

  # Serves as example of simple additional interactions
  # in detail view
  # ---
  showAnnotation = (d) ->
    graph = d3.select("#detail_view .main")
    graph.selectAll(".subtitle").remove()

    graph.selectAll(".subtitle")
      .data([d]).enter()
      .append("text")
      .text("#{formatNumber(d.percent_world * 100)}% of Worldwide Emissions")
      .attr("class", "subtitle")
      .attr("fill", (d) -> colorScale(d.name))
      .attr("text-anchor", "middle")
      .attr("dy", "3.8em")
      .attr("x", (d) -> graphWidth / 2)
      .attr("font-size", 8)

  # ---
  # remove subtitle

    pos = $(el).position()
    pos

  # createLegend = () ->
  #   legend = d3.select("#legend")
  #     .append("svg")
  #     .attr("width", 100)
  #     .attr("height", 300)
  # 
  #   keys = legend.selectAll("g")
  #     .data(data[0].values)
  #     .enter().append("g")
  #     .attr("transform", (d,i) -> "translate(#{0},#{40 * (i + 1)})")
  # 
  #   keys.append("rect")
  #     .attr("width", 30)
  #     .attr("height", 30)
  #     .attr("fill", (d) -> colorScale(d.name))
  # 
  #   keys.append("text")
  #     .text((d) -> d.name)
  #     .attr("text-anchor", "left")
  #     .attr("dx", "2.2em")
  #     .attr("dy", "1.2em")

  return chart

