score:-1

Accepted answer

Your function drawMap appends the new data to the page each time it is called. If you want to prevent this you could clear the page first:

var text = d3.select("#text");

text.select("p")
    .remove(); // remove the old <p> element

text.append("p")
    .text(htmlText)

score:2

The easiest solution (out of many) is defining the variable outside the update function:

var p = d3.select("#text")
    .append("p");

And, inside the update function, only changing it:

p.text(htmlText);

Here is your code with that change only:

// populate drop-down
var dropdown_options = [{
    value: "data1",
    text: "Data 1: Read Hello World"
  },
  {
    value: "data2",
    text: "Data 2: Read Hello Dhivya"
  }
];

var data1 = {
  name: "World",
  date: "7 March 2017",
}

var data2 = {
  name: "Dhivya",
  date: "7 March 2017",
}

var dropDown = d3.select("#dropdown");

dropDown.selectAll(".options")
  .data(dropdown_options)
  .enter()
  .append("option")
  .attr("class", "options")
  .attr("value", function(d) {
    return d.value;
  })
  .text(function(d) {
    return d.text;
  });
  
var p = d3.select("#text")
    .append("p");

function drawMap(info) {
  // console.log(settings);
  // console.log("Variable Data 1", info)
  // Add a SVG with responsive set up
  htmlText = "Hello" + info.name + ", today's date is" + info.date;


    p.text(htmlText)

}; //draw map



drawMap(data1);
// console.log(dropDown);

dropDown.on("change", function() {
  selected = this.value;
  console.log(selected);
  if (selected == "data2") {
    drawMap(data2);
  }
  if (selected == "data1") {
    drawMap(data1);
  }
});
<script src="http://www.thehindu.com/static/js/jquery-1.10.2.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>


<div id="election-viz">
  <select id="dropdown"></select>
  <div id="text"></div>

</div>

Of course, a way more elegant solution would be binding data to your selection.

The worst solution, however, is removing elements and drawing them again in the update. That's what I call lazy update, and it's unnecessary when properly using D3.


Related Query