Menu
Hi everyone– I am new to javascript and I am stuck. Basically, I have created a map with a bunch of dots on it, each dot representing a person. I want to be able to click on the dot and it show the information as
Name: _______
Gender: ___
Age:
at the moment, its like this: Name: _______ , Gender: ___, Age:
And I also want to have it that when I click the next dot, the previous dot of information disappears. At the moment they all show up like this:
Here is the code :
//draw dots for shootings
g.selectAll(‘.shots’)
.data(shootings)
.enter()
.append(‘circle’)
.attr(‘cx’, function(d){return proj([d.Longitude,d.Latitude])[0]})
.attr(‘cy’, function(d){return proj([d.Longitude,d.Latitude])[1]})
.attr(‘r’,1.5)
.attr(‘opacity’,.7)
.attr(‘class’,’shots’)
.attr(‘fill’,function(d){
//change dot color depending on dataset
if(d.signs_of_mental_illness == “True”){
return ‘#e0ffff’
}
else{
return ‘#90ee90’
}
})
//returns information
.on(‘click’, function(d){
g.append(‘text’)
.attr(‘x’,
proj([d.Longitude,d.Latitude])[0]
)
.attr(‘y’, proj([d.Longitude,d.Latitude])[1]).text(“name: “+ d.name + “, gender: ” + d.gender + “, age: ” + d.age )
.attr(‘fill’, ‘white’)
.attr(‘font-family’, “Lato”)
.attr(‘font-size’, 16)
//when the user clicks one of the dots, change the data and the previous disappears.
var topic = “total”;
d3.select(“#total”).style(‘background-color’, ‘#A147AD’);
//when the user clicks one of the switches, change the data
d3.select(‘body’)
.selectAll(‘.shots’)
.on(‘click’, function(d){
//reset all buttons
d3.selectAll(‘.shots’).style(‘background-color’, ‘#333’)
//make the background of selected button a different color
d3.select(this).style(‘background-color’, ‘#A147AD’)
//change topic variable to hold the data that the user wants to see
topic = this.id;
//run the update routine
update(this.id);
})
})
})
})
})