 
   # using an ordinal scale for X as our
   # data is categorical (the names of countries)
-  xScale = d3.scale.ordinal()
-    .rangeRoundBands([0, graphWidth], 0.1)
+  # xScale = d3.scale.ordinal()
+  #   .rangeRoundBands([0, graphWidth], 0.1)
+
+  xScale = d3.scale.linear().range([0, graphWidth])
 
   # names will also be used to color the bars
-  colorScale = d3.scale.ordinal()
-    .range(["#ff7f0e", "#1f77b4", "#2ca02c", "#d62728", "#8c564b", "#9467bd"])
+  #colorScale = d3.scale.ordinal()
+  #  .range(["#ff7f0e", "#1f77b4", "#2ca02c", "#d62728", "#8c564b", "#9467bd"])
 
   # yPadding is removed to make room for country names
-  yScale = d3.scale.linear()
-    .range([0, graphHeight - yPadding])
+  yScale = d3.scale.linear().range([0, graphHeight - yPadding])
 
   # This is the amount by which we will enlarge the small chart 
   # when displaying it in detail display

    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


    # 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)

    # add the year title
    graph.append("text")
      .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
