anchor.diff:  }
   
   function table(id, data){
  -
  -
     let table = d3.select(`#${id}`),
         thead = table.append( "thead" ),
         tbody = table.append( "tbody" );
   
  -  let columnNames = [""].concat(Object.values(data[0])).slice(0, 18);
  -  let columnNumbers = [""].concat(Object.keys(data[0]).map(i => parseInt(i)).filter( i => i > 0 ));
  -
  -  console.log(columnNumbers);
  +  let columnNames = [""].concat(Object.values(data[0])).slice(0, 18).concat([""]);
  +  let columnNumbers = [""].concat(Object.keys(data[0]).map(i => parseInt(i)).filter( i => i > 0 )).concat(["TOTAL"]);
   
   // append the header row with the numbers
     thead.append( "tr" )
  
positive.code:   <div class="tabs m_v_2">
      <ul role="tablist" aria-label="Consulta los ODS">
        <li role="presentation" class="active">
          <a data-remote="true" href="">Por ODS</a>
        </li>
        <li role="presentation" class="">
          <a data-remote="true" href="">Por Programa</a>
        </li>
      </ul>
    </div>
  
    <% for i in ["01","02","03","04","05","07","08","09","10","11","13","15","16","17"] %>
      <div class="m_v_2 card-container">
        <div class="card-inner-side"><%= image_tag('ods/goals_icons-individual-rgb-' + i + '.png') %></div>
        <div class="card-inner-content p_2" id="chart-<%= i.to_i %>">
          <%= i %>
        </div>
      </div>
    <% end %>
  
    <h2 class="with_description">Resumen</h2>
  
    <div id="table">
    </div>
  
  
  </div>
  
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script type="text/javascript">
  
  function barChart(id, data) {
    function round(value, decimals) {
      return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
    }
  
    function format(value){
      value = parseFloat(value);
      if(value > 1000000) {
        return round(value / 1000000, 2).toLocaleString() + " M€";
      } else {
        return round(value, 2).toLocaleString() + " €";
      }
    }
    let margin = {top: 20, right: 20, bottom: 30, left: 290};
    let height = data.length * 25 + margin.top + margin.bottom;
  
    let bodySelection = d3.select(`#${id}`)
    bodySelection.html('')
    let svg = bodySelection.append("svg").attr("width", 850).attr("height", height),
      width = +svg.attr("width") - margin.left - margin.right
  
  
    let x = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([margin.left, width - margin.right]);
  
    let y = d3.scaleBand()
        .domain(data.map(d => d.key))
  
negative.code:       .data( columnNames )
        .enter()
        .append( "th" )
        .attr("class", (d, i) => "ods-" + i)
        .text( function ( columnNames ) { return columnNames; } );
  
    // create a row for each object in the data
  