Dimple overlaid the new plot after selecting from a dropdown menu: Solution? - drop-down-menu

Question

I would like to update an interactive scatter plot in dimple using a dropdown menu, however I am having some issues with this task. An example of my code is below:
<select name="xAX" id="xAX">
<option value ="Distance">Distance</option>
<option value ="Redshift">Redshift</option>
</select>
<div id ="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var dropdown = d3.select("#xAX")
var xAX2 = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv("tabula.csv", function(data) {
dataset = data.map(function(data) { return [
data["Object"],
+data["Redshift"],
+data["Distance"],
+data["Scale"],
data["Type"],
+data["IRAS12um"] ]; });
},
var svg = dimple.newSvg("#chartContainer", 900, 900);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(100, 180, 730, 550)
myChart.showGridlines = true;
var x = myChart.addMeasureAxis("x", ["Redshift","Distance"]);
x.addOrderRule(["Redshift","Distance"]);
myChart.addMeasureAxis("y", "Redshift");
myChart.addMeasureAxis("z", "IRAS12um");
myChart.addSeries("Type", dimple.plot.bubble);
myChart.addLegend(70, 10, 610, 80, "right");
myChart.draw();
d3.select("#xAX").on("change", change)
function change() {
this.options[this.selectedIndex].value
}
myChart.draw(1000);
});
The "tabula.csv" table has X headers with Y elements per header. I would like that the x- and/or y-axis would have any possible option of the X header.
I have tried this example but it did not really make what I would like. Any help on the code or other example would be very helpful.
----- UPDATE ----
I updated the code and I can change the plot from a dropdown menu. However, the new graph is plotted on top of the old one. How the old plot can be removed?
<h2>X-Axis</h>
<select id="xAX" name="xAX">
<option value ="Distance" selected>Distance</option>
<option value ="Redshift">Redshift</option>
</select>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 900, 900);
var dropdown = d3.select("#xAX")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv("tabula.csv", function(data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(100, 180, 730, 550)
var x = myChart.addMeasureAxis("x", source);
myChart.addMeasureAxis("y", "Redshift");
myChart.addMeasureAxis("z", "IRAS12um");
myChart.addSeries("Type", dimple.plot.bubble);
myChart.addLegend(70, 10, 610, 80, "right");
myChart.draw();
});
}
dropdown.on("change", change);
change();
</script>

Answer 1

try something like this:
<h2>X-Axis</h>
<select id="xAX" name="xAX">
<option value ="Distance" selected>Distance</option>
<option value ="Redshift">Redshift</option>
</select>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 900, 900);
var dropdown = d3.select("#xAX")
var xAxis;
var myChart;
var draw = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv("tabula.csv", function(data) {
myChart = new dimple.chart(svg, data);
myChart.setBounds(100, 180, 730, 550)
xAxis = myChart.addMeasureAxis("x", source);
myChart.addMeasureAxis("y", "Redshift");
myChart.addMeasureAxis("z", "IRAS12um");
myChart.addSeries("Type", dimple.plot.bubble);
myChart.addLegend(70, 10, 610, 80, "right");
myChart.draw();
});
}
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
xAxis.categoryFields = source;
myChart.draw();
};
dropdown.on("change", change);
draw();
</script>
This will make it so you don't have to remove the original svg objects, if you add a delay in myChart.draw(800, false); in the change function, it will animate the change.