score:-1

Accepted answer

I change your code structure.

It seems you don't understand d3 update pattern.

all working example is here https://scrimba.com/c/cv8wD7H2

var dataSet = [
    {hour: "0.1",yval: "0.2",foo: "0", goo:"0", bar:"1", boo:"0"}, 
    {hour: "14",yval: "0.4",foo: "0", goo:"1", bar:"0", boo:"0"}, 
    {hour: "15",yval: "0.3",foo: "0", goo:"0", bar:"0", boo:"1"}, 
    {hour: "19",yval: "241",foo: "0", goo:"0", bar:"0", boo:"0"},
    {hour: "22",yval: "0.2",foo: "0", goo:"0", bar:"1", boo:"1"},
    {hour: "08",yval: "118",foo: "1", goo:"0", bar:"1", boo:"0"},
    {hour: "22",yval: "48",foo: "0", goo:"1", bar:"0", boo:"1"},
    {hour: "21",yval: "31",foo: "1", goo:"0", bar:"1", boo:"1"},
    {hour: "12",yval: "38",foo: "0", goo:"1", bar:"0", boo:"0"},
    {hour: "16",yval: "138",foo: "1", goo:"1", bar:"0", boo:"0"},
    {hour: "05",yval: "344",foo: "0", goo:"1", bar:"1", boo:"1"},
    {hour: "08",yval: "218",foo: "0", goo:"0", bar:"1", boo:"0"},
    {hour: "03",yval: "18",foo: "1", goo:"0", bar:"0", boo:"0"},
    {hour: "18",yval: "98",foo: "1", goo:"0", bar:"0", boo:"1"},
    {hour: "18",yval: "98",foo: "0", goo:"1", bar:"1", boo:"0"},
];

const COLOR_SET = {
    "goo": {
        "0:0": "blue",
        "1:1": "green",
        "1:0": "red",
        "0:1": "violet"
    },
    "bar": {
        "0:0": "green",
        "1:1": "red",
        "1:0": "violet",
        "0:1": "blue"
    },
    "boo": {
        "0:0": "red",
        "1:1": "violet",
        "1:0": "blue",
        "0:1": "green"
    }
}

function getColorByColorSet(colorSetName) {
    return function(data) {
        try {
            return COLOR_SET[colorSetName][ data.foo +':'+data.goo ]    
        }catch(e) {
            console.error(colorSetName, data)
            throw e;
        }   
    }
}

function MyScatterPlot(options={}) {
    var {w=500,h=500,top_pad=20,left_pad=100,target='body',dataSet=[],colorSetName='goo'} = options;
    this.dataSet = dataSet;
    this.colorSetName = colorSetName;

    // prepare
    this.xScale = d3.scale.linear()
        .domain([-1, 23])
        .range([left_pad, w - left_pad])

    this.yScale = d3.scale.linear()
        .domain([0, 350])
        .range([h - top_pad, top_pad]);

    this.svg = d3.select("body")
        .append("svg:svg")
        .attr("width", w + left_pad)
        .attr("height", h + top_pad);

    this.symbolTypes = {
        "circle": d3.svg.symbol().type("circle")
    };

    var fooColors = d3.scale.linear().domain([0, 50]).range(["#87CEFF", "#0000FF"]);
    var xAxis = d3.svg.axis().scale(this.xScale).orient("bottom");
    var yAxis = d3.svg.axis().scale(this.yScale).orient("left");

    this.svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0, " + (h - top_pad) + ")")
        .call(xAxis);

    this.svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + (left_pad) + ", 0)")
        .call(yAxis);

    // end of prepare    
}

MyScatterPlot.prototype.changeColorSet = function(selectedColorsetName) {
    this.colorSetName = selectedColorsetName;
    this.svg.selectAll("path.dot")
        .style("fill", getColorByColorSet(this.colorSetName))    
}


MyScatterPlot.prototype.setData = function(dataSet) {   
    this.dataSet = dataSet

    let allDots = this.svg.selectAll("path.dot").data(this.dataSet)

    allDots.exit().remove();

    allDots.enter().append("path")
        .attr("class", "dot")
        .attr("d", (d,i)=>{return this.symbolTypes.circle();})


    allDots.attr("transform", (d) => {
        return  "translate(" + (this.xScale(d.hour) + (Math.random() * 12 - 6)) + "," +  this.yScale(d.yval) + ")"; 
    }).style("fill", getColorByColorSet(this.colorSetName))    
}

var scatterChart = new MyScatterPlot()
scatterChart.setData(dataSet)

let myUpdateFunction = function(clickedButtonName)  {    
    console.log('clickedButtonName : ' + clickedButtonName)
    scatterChart.changeColorSet(clickedButtonName)
}

=== here is another answer for your comment. you need only on colorset. change color set like this 

const COLOR_SET = {
            "0:0": "blue",
            "1:1": "green",
            "1:0": "red",
            "0:1": "violet"
}

and then change getColorByColorSet() function as you want.

colorSetName parameter actually has clicked button name. so can not be removed just change parameter name to clickedButton

    function getColorByColorSet(clickedButton) {
    return function(data) {
        var finalColor;
        try { 
            if(clickedButton === 'goo') {
               finalColor = COLOR_SET[ data['bar']+':'+data['boo']]    
            }else if(clickedButton === 'bar'){
               finalColor = COLOR_SET[ data['goo']+':'+data['boo']]    
            }else if(clickedButton === 'boo'){
               finalColor = COLOR_SET[ data['goo']+':'+data['bar']] 
            }
            return finalColor

        }catch(e) {
            console.error(colorSetName, data)
            throw e;
        }   
    }

Related Query

More Query from same tag