                      .on("mouseout",  lowlight_state)
 
 
+    # variables for lower scatterplots
+    row = [0, 0, 0, 1, 1, 1]
+    col = [0, 1, 2, 0, 1, 2]
+    lower_xvar = [0, 0, 0, 0, 0, 4]
+    lower_yvar = [1, 2, 3, 4, 5, 5]
+
+    # make the scatterplots
+    scatterplots = []
+    for i of top_panel_var
+
+        this_scatterplot = scatterplot().width(panelwidth_bot)
+                                    .height(panelheight_bot)
+                                    .margin(margin_bot)
+                                    .titlepos(10)
+                                    .xNA({handle:false})
+                                    .yNA({handle:false})
+                                    .xlim(xlim[lower_xvar[i]])
+                                    .ylim(xlim[lower_yvar[i]])
+                                    .nxticks(nxticks[lower_xvar[i]])
+                                    .nyticks(nxticks[lower_yvar[i]])
+                                    .xlab(xlab[lower_xvar[i]])
+                                    .ylab(xlab[lower_yvar[i]])
+                                    .pointsize(3)
+                                    .dataByInd(false)
+                                    .xvar(top_panel_var[lower_xvar[i]])
+                                    .yvar(top_panel_var[lower_yvar[i]])
+        scatterplots.push(this_scatterplot)
+
+        hpos = fullpanelwidth_bot*col[i]
+        vpos = htop+row[i]*fullpanelheight_bot+margin_bot.top
+        this_g = svg.append("g")
+                    .attr("class", "scatterplot")
+                    .attr("id", "scatterplot#{i}")
+                    .attr("transform", "translate(#{hpos},#{vpos})")
+
+        this_g.datum({data:data, indID:data.abbrev})
+              .call(this_scatterplot)
+
+        # remove the tool tips
+        d3.selectAll(".d3-tip").remove()
+        points = this_scatterplot.pointsSelect().on("mouseover.paneltip", (d) -> d)
+                                                .on("mouseout.paneltip", (d) -> d)
+
+        points.on("mouseover", highlight_state)
+              .on("mouseout",  lowlight_state)
+
+
+
+
 highlight_state = (d,i) ->
     d3.selectAll("circle.pt#{i}")
       .attr("fill", "Orchid")
       .attr("r", 5)
+      .moveToFront()
     d3.select("text#state#{i}")
       .attr("fill", "violetred")
 

        points = this_dotplot.pointsSelect().on("mouseover.paneltip", (d) -> d)
                                            .on("mouseout.paneltip", (d) -> d)



        points.on("mouseover", highlight_state)
              .on("mouseout",  lowlight_state)


    top_panel_var = ["total", "not_distracted", "speeding", "alcohol", "ins_premium", "ins_losses"]
    xlim = [[0,25],[0,25],[0,25],[0,25],[0,1500],[0,200]]
    nxticks = [6,6,6,6, 4, 5]
    xlab = ["Crashes per billion miles", "Crashes per billion miles", "Crashes per billion miles",
            "Crashes per billion miles", "Dollars", "Dollars"]
    title = ["Total", "Not distracted", "Speeding", "Alcohol", "Ave. Ins. premium", "Ave. Ins. Losses"]

    # make the dot plots
    dotplots = []
    for i of top_panel_var

