title: D3js: upgrading v3 to v5
body: <p>I'm starting to code in D3 javascript and I really don't know so much. I found a very nice example in Internet of a bar chart updating with dropdown and start to study and make one or two modifications. This example is in version 3 of D3 and I wanted to make it works on version 5. Could someone give me any tips on what I can do to make it work in version 5? </p>
  
  <p>I will put the code below to see what changes can be made.</p>
  
  <p>Best regards!</p>
  
  <p><a href="https://i.stack.imgur.com/ASsUb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ASsUb.jpg" alt="Initial screen of the visualization"></a></p>
  
  <p><a href="https://i.stack.imgur.com/D6zDU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D6zDU.jpg" alt="A selected value of the visualization"></a></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Indicators&lt;/title&gt;
  
       &lt;script src="https://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;   
       &lt;!--  &lt;script src="https://d3js.org/d3.v5.min.js" charset="utf-8"&gt;&lt;/script&gt; --&gt;
  
          &lt;style&gt;
          body {
              font: 10px sans-serif;
          }
          select {
              display: block;
          }
          .bar {
              fill: blue;
              opacity: 0.8;
          }
  
          .axis path,
          .axis line {
              fill: none;
              stroke: #000;
              shape-rendering: crispEdges;
          }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id='vis-container' align="right"&gt;&lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              // Load and munge data, then make the visualization.
              var fileName = "./indicators.csv";
              var countries = ["Austria", "Canada", "Chile", "France", "Italy",
                                     "Poland", "Spain", "Sweden", "USA"];
  
              d3.csv(fileName, function(error, data) {
                  var indicatorsMap = {};
                  data.forEach(function(d) {
                      var indicator = d.indicator;
                      indicatorsMap[indicator] = [];
  
                      // { indicatorName: [ bar1Val, bar2Val, ... ] }
                      countries.forEach(function(field) {
                          indicatorsMap[indicator].push( +d[field] );
                      });
                  });
                  makeVis(indicatorsMap);
              });
  
              var makeVis = function(indicatorsMap) {
                  // Define dimensions of vis
                  var margin = { top: 30, right: 50, bottom: 30, left: 50 },
                      width  = 550 - margin.left - margin.right,
                      height = 250 - margin.top  - margin.bottom;
  
                  // Make x scale
                  var xScale = d3.scale.ordinal()
                      .domain(countries)
                      .rangeRoundBands([0, width], 0.1);
  
                  // Make y scale, the domain will be defined on bar update
                  var yScale = d3.scale.linear()
                      .range([height, 0]);
  
                  // Create canvas
                  var canvas = d3.select("#vis-container")
                    .append("svg")
                      .attr("width",  width  + margin.left + margin.right)
                      .attr("height", height + margin.top  + margin.bottom)
                    .append("g")
                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
                  // Make x-axis and add to canvas
                  var xAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient("bottom");
  
                  canvas.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);
  
                  // Make y-axis and add to canvas
                  var yAxis = d3.svg.axis()
                      .scale(yScale)
                      .orient("left");
  
                  var yAxisHandleForUpdate = canvas.append("g")
                      .attr("class", "y axis")
                      .call(yAxis);
  
                  yAxisHandleForUpdate.append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text("Value");
  
                  var updateBars = function(data) {
                      // First update the y-axis domain to match data
                      yScale.domain( d3.extent(data) );
                      yAxisHandleForUpdate.call(yAxis);
  
                      var bars = canvas.selectAll(".bar").data(data);
  
                      // Add bars for new data
                      bars.enter()
                        .append("rect")
                          .attr("class", "bar")
                          .attr("x", function(d,i) { return xScale( countries[i] ); })
                          .attr("width", xScale.rangeBand())
                          .attr("y", function(d,i) { return yScale(d); })
                          .attr("height", function(d,i) { return height - yScale(d); });
  
                      // Update old ones, already have x / width from before
                      bars
                          .transition().duration(250)
                          .attr("y", function(d,i) { return yScale(d); })
                          .attr("height", function(d,i) { return height - yScale(d); });
  
                      // Remove old ones
                      bars.exit().remove();
                  };
  
                  // Handler for dropdown value change
                  var dropdownChange = function() {
                      var newIndicator = d3.select(this).property('value'),
                          newData   = indicatorsMap[newIndicator];
  
                      updateBars(newData);
                  };
  
                  // Get names of indicators, for dropdown
                  var indicators = Object.keys(indicatorsMap).sort();
  
                  var dropdown = d3.select("#vis-container")
                      .insert("select", "svg")
                      .on("change", dropdownChange);
  
                  dropdown.selectAll("option")
                      .data(indicators)
                    .enter().append("option")
                      .attr("value", function (d) { return d; })
                      .text(function (d) {
                          return d[0].toUpperCase() + d.slice(1,d.length); // capitalize 1st letter
                      });
  
                  var initialData = indicatorsMap[ indicators[0] ];
                  updateBars(initialData);
              };
          &lt;/script&gt;       
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>