D3 question, please help.. school project stressss

Question

Hi Guys, i'm making a d3 visualization for a school project.. but i'm stuck! Everything works.. all the dots are on the right place but when i trying to filter stuff it breaks..

I've a data_sheet that looks like this (it's much longer than the picture) http://postimg.org/image/68jzjj2br/

I wrote this code to show all the data in a d3 visualization

var all_data;
    var display_data;
    var svg;
    var positief = "positief";
    var neutraal = "neutraal";
    var negatief = "negatief";

    d3.csv("data/oh_data.csv", function(dataset){
      all_data = dataset;
      display_data = all_data;
      drawGraphic();
    });

    function drawGraphic(){
      svg = d3.select("#svg-3");
      svg.selectAll("circle")
        .data(display_data)
        .enter()
        .append("circle")
        .attr("cy", function(d){
          return (d["y"]);
        })
        .attr("cx", function(d){
          return (d["x"]);
        })

        svg.selectAll("circle")
          .data(display_data)
          .transition()
          .duration(1000)
          .attr("r", 5)

        .style("fill",function(d){
          if(d["waarde"] == positief){
            return "green";
          }else if(d["waarde"] == neutraal){
            return "yellow";
          }else{
            return "red";
          }
        })

    }//Einde drawGraphic

This works and looks like this http://postimg.org/image/ofxpeoiet/

But now the problem comes.. i want to filter Let's say i only want to see the circles of Romeo I wrote this code

   function filterRomeo(){
      clearGraphic();

      display_data = new Array();
      for(i=0; i<all_data.length; i++){
        if(all_data[i]["persoon"] == "Romeo"){
          display_data.push(all_data[i]);
        }
      }
      setTimeout("drawGraphic()",500);
    }

    function clearGraphic(){
      svg.selectAll("circle")
        .transition()
        .duration("1000")
        .attr("r", 0);

    }

What happens looks like this http://postimg.org/image/3vkvuuydj

It gets everything of Romeo but places it at te wrong x and y coordinates. For example.. i finds the first Romeo Match at line 8 but places it at the coordinates of line 2.. what am i doing wrong?

Welcome to the Treehouse Community

Looking to learn something new?

Bram Huisman

Bram Huisman

D3 question, please help.. school project stressss

Peter Smith

Peter Smith