javascript - I have an svg element that i want to alter the color of with a button click. Involves, json, and csv -

-

what code create map projection using g.selectall("path)... assigns small circles perimeters of associated countries. want able create buttons in html file when pressed "select"/"deselect" or color/uncolor circles and/or associated countries. want able choose countries , circles colored. know how create buttons , reference them , such, calling functions them. hangup not sure how svg or g element redraw or reupdate canvas. if debug, shows call stack not going g.selectall more once method executes multiple times. first time writing js forgive inconsistencies or rough code outline.thanks!

var svg = d3.select("#container").append("svg")         .attr("width", width)         .attr("height", height)         .append("g");    //create secondary layer canvas svg  var g = svg.append("g");  function buildmap() {        d3.json("countries.geo.json", function(json) {   d3.csv("map_of_the_gods.csv", function(data) {     // go through each element of csv      (var = 0; < data.length; i++) {         // data csv element         var csvname = data[i].name;         var csvculture = data[i].culture;         var csvlocation = data[i].location;         var csvgender = data[i].gender;         var csvspecies  = data[i].species;         var csvtype = data[i].type;         var csvwikilink = data[i].linkwik;         var csvgclink = data[i].linkgc;         var csvpicture = data[i].picture;           // go through each element of json looking country         //      match country of csv.         (var j = 0; j < json.features.length; j++) {             var jsoncountry = json.features[j].properties.name;             //console.log(jsoncountry);             //console.log(j);             if (csvlocation == jsoncountry) {                 // assign color retrieved csv                 //      matching json element.                 json.features[j].properties.name = csvname;                 json.features[j].properties.culture = csvculture;                 json.features[j].properties.location = csvlocation;                 json.features[j].properties.gender = csvgender;                 json.features[j].properties.species = csvspecies;                 json.features[j].properties.type = csvtype;                 json.features[j].properties.wikilink = csvwikilink;                 json.features[j].properties.picture = csvpicture;                 json.features[j].properties.initialcolor = 1;                   break;             }//if(csvlocation == jsoncountry         }//for loop     }//outer loop      g.selectall("path")      .data(json.features)      .enter()      .append("path")      .attr("d", path)      .style("fill", function(d) {         var country = d.properties.location;         var colorchange = d.properties.initialcolor;          if( country === "mexico") {             console.log("yo");                 return "#410d66";}//purple                    if(country === "greece") {                return "#000072";}//aqua         if(country === "japan") {                return "#c90e0e";}//red         if(country === "united kingdom") {                return "#194719";}         if(country === "ireland") {                return "#194719";}//green                 if(country === "nigeria") {                return "#ff9900";}//light brown         if(country === "peru") {                return "#85ad33";}//green yellow         if(country === "egypt") {                return "#ff5050";}//salmony         if(country === "denmark") {                return "#75a3a3";}//bluegrey         if(country === "finland") {                return "#75a3a3";}         if(country === "norway") {                return "#75a3a3";}         if(country === "sweden") {                return "#75a3a3";}         else {             return "grey";}     });//this stlye attribute path     // g.selectall("circle").remove();  //we create of circles , gods     g.selectall("circle")      .data(data)      .enter()      .append("circle")      .attr("cx", function(d) {             return projection([d.lon,d.lat])[0];})       .attr("cy", function(d) {             return projection([d.lon, d.lat])[1];})       .attr("r", 3)       .style("fill", function(d) {                 var typeofgod = d.type;                  if(typeofgod === "storm" ) {                     return "yellow";}                 else if(typeofgod ==="sky"){                     return "#87cefa";}                 else if(typeofgod === "death" || typeofgod ==="chaos") {                     return "black";}                 else if(typeofgod === "agriculture") {                     return "#006300";}                 else if(typeofgod === "motherhood") {                     return "#99ff99";}                 else if(typeofgod === "war" ) {                     return "#9e0e0e";}                 else if(typeofgod === "moon") {                     return "white";}                 else if(typeofgod === "sun") {                     return "orange";}                 else if(typeofgod === "love") {                     return "#ff99ff";}                 else if(typeofgod ===  "wisdom") {                     return "#9900ff";}                 else if(typeofgod === "sea") {                     return "blue";}                  else{                     return "grey";}              })//these brackets match style circles , end selectall()       .on('mouseover', function(d) {         tooltip.transition()                .duration(400)                .style("opacity", 0);         tooltip.transition()                .duration(100)                .style("fill", "black")                .style("opacity", ".9");         tooltip.html("<img src = " + d.picture+">" + "<br>" + "name: " + d.name + "<br>"                      + "type: " + d.type + "<br>"                      + "culture: " + d.culture + "<br>" + "region: " + d.location + "<br>"                     + "gender: " + d.gender + "<br>" + "species: " + d.species + "<br>" +                     '<a href = "' + d.linkwik + '">' + "wikipedia" + "</a>" + "<br>"                     + '<a href = "' + d.linkgc + '">' +"godchecker" + "</a>")                .style("left", (d3.event.pagex ) + "px")                .style("top", (d3.event.pagey) + "px")});        });//these bracets d3.csv line above });//these brackets d3.json line //this bracket function countriesselect


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more