Checkbox filtering in d3

I am learning javascript & d3.js and was trying to create an interactive visualization based on the tutorial that I found online. I have created a grouped bar chart and I am trying to filter data based on category. What I have in mind is having checkboxes next to the legends and selecting the checkbox should show data only from those categories. I am unable to get the checkboxes beside the legends and even if I am able to get them in between svg I am not sure how I will proceed with the filters. I have referred these two questions that address a similar topic but could not figure out how to apply it to my code.

d3 map with checkbox filtering D3 v3 appending checkbox?

Here's how far I got: Image to Grouped Bar Chart

Here is my code to generate this chart:

window.onload = function ()
    {
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1200 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {

        return "<strong>Percentage:</strong> <span style='color:white'>" + d.value + "%</span> <br> <br>Category: " + d.name;

    })

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left + 100)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.call(tip);

d3.csv("data.csv", function (error, data) {
    var genreNames = d3.keys(data[0]).filter(function (key) {

        return key !== "Year";
    });

    data.forEach(function (d) {
        d.genre = genreNames.map(function (name) {
            return {name: name, value: +d[name]};
        });

    });

    x0.domain(data.map(function (d) {
        return d.Year;
    }));
    x1.domain(genreNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function (d) {
        return d3.max(d.genre, function (d) {
            return d.value;
        });
    })])


    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Percentage");

    var Year = svg.selectAll(".Year")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "g")
        .attr("transform", function (d) {
            return "translate(" + x0(d.Year) + ",0)";
        });


    var draw;
    draw = Year.selectAll("rect")
        .data(function (d) {
            return d.genre;
        })
        .enter().append("rect")

        .attr("width", x1.rangeBand())
        .attr("x", function (d) {
            return x1(d.name);
        })
        .attr("y", function (d) {
            return y(d.value);
        })
        .attr("height", function (d) {
            return height - y(d.value);
        })
        .style("fill", function (d) {
            return color(d.name);
        })

        .on("mouseout", tip.hide)
        .on("mouseover",tip.show)
        .on("click",color);

    var legend = svg.selectAll(".legend")
        .data(genreNames.slice().reverse())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function (d, i) {
            return "translate(0," + i * 20 + ")";
        });

    legend.append("rect")

        .attr("x", width + 10)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color)

    legend.append("text")
        .attr("x", width + 30)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "start")
        .text(function (d) {
            return d;
        });




});}

Any help will be highly appreciated