JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<form>
       <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select list</label>
             <select id = "myList">
               <option value = "1">one</option>
               <option value = "2">two</option>
               <option value = "3">three</option>
               <option value = "4">four</option>
             </select>
          </p>
       </fieldset>
    </form>
<div id="thediv">
  <svg>
    <rect id="rect1" width="100" height="100" x="10" y="10" fill="blue"></rect>
    <rect id="rect2" width="100" height="100" x="200" y="10" fill="blue"></rect>
  </svg>
</div>

JavaScript

(function() {
  var svg = d3.select("svg");
  var rect1 = d3.select("#rect1")
    .attr("fill", "green")
    .attr("opacity", 0.5) // can be conditional based on what the user chooses
    .on("click", function() {
      console.log("hey", d3.select(this).attr("id"))
    });;

  var rect2 = d3.select("#rect2")
    .attr("fill", "blue")
    .attr("opacity", 0.5) // can be conditional based on what the user chooses
      console.log("hey", d3.select(this).attr("id"))
    });
})()