Изменить значение с помощью ползунка

Question

График, который я хочу создать, представляет собой картографическую карту, на которой должен быть ползунок для отображения данных за разные годы.

Я могу получить данные за указанный c год, если я введу столбец года.

В приведенном ниже примере показан график, на котором отображаются только данные о преступности за 2010 год (i.ten в функциях и d ['ten'] для max_num

Как вставить слайдер, чтобы что для обновления данных требуется другое имя столбца?

var data = [];

var projection = d3.geoAlbersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geoPath().projection(projection);

var color = d3.scaleLog().range([d3.schemeBlues[9][0], "Steelblue"]);

var promises = [
  d3.json("stateborder.json"),
  d3.dsv(",", "stateInfo.csv", function(d, i) {dataa = []; 
  dataa.states = d.States; 
  dataa.region = d.Region; 
  dataa.ten = d['2010']; 
  dataa.eleven = d['2011'];
  dataa.twelve = d['2012']; 
  dataa.thirteen = d['2013']; 
  dataa.fourteen = d['2014']; 
  dataa.fifteen = d['2015']; 
  data.push(dataa);})
]

Promise.all(promises).then(ready)

function ready([us]) {
    tip = d3.tip().attr('class', 'd3-tip')
        .html(function(d) {temp = ""; temp2 = 0; data.forEach(function(i) {if (i.states == d.properties.name) {temp = i.region; temp2 = i.ten;};}); 
        return "<div>State: " + d.properties.name + "</div><div>Region: " + temp + "</div><div>NumCrimes: " + temp2 + "</div>"; });
    svg.call(tip);

    max_num = d3.max(data, d => d['ten']);
    color.domain([1, max_num]);

    svg.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
    .attr("fill", function(d) {temp = "black"; data.forEach(function(i) {if (i.states == d.properties.name) {temp = color(i.ten);};}); return temp;})
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)

    svg.append("path").attr("class", "state-borders")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })).attr("d", path);