Using dynamic input(CSV) in d3js

Question

I am trying to use dynamic input to a draw function in d3js. So when the user changes the csv it would remove the current selection and draw the visualization for the new input. So my question is would I be using a onChange function with the select and then within this function parse the csv and call for the draw function.The current working code is here in plunker:

https://plnkr.co/edit/AjVBK3rTOF5aI4eDDbV5?p=preview

    <svg width="1250" height="1080"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        var svg = d3.select("svg"),
            width = +svg.attr("width");

        var format = d3.format(",d");

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        var pack = d3.pack()
            .size([width, width])
            .padding(1.5);

        var inputs = {};

      function  selectCity(){


            //storing the drop-dsown selection in the ddSelection var
            var ddSelection = document.getElementById("city").value;

            //feeding that to create the csv filename you want

            var str1 = ddSelection;
            var str2 = ".csv";
             var csvFile = str1.concat(str2);


            str1.concat(str2);
            console.log(csvFile);


        d3.csv(csvFile, function(d) {
            d.sno = +d.sno;
            return d;
        }, function(error, data) {
            if (error) throw error;

            d3.selectAll("input").on("change", function(){
              inputs[this.id] = +this.value;
              console.log(inputs.myValue + "-" + inputs.myRating)
              if(inputs.myValue && inputs.myRating){
                 var classes = data.filter(d => d.value < inputs.myValue && d.rating >= inputs.myRating);
                draw(classes);
              }
            })

            function draw(classes) {
                console.log(classes.length);
                var root = d3.hierarchy({
                        children: classes
                    })
                    .sum(function(d) {
                        return d.value;
                    })
                    .each(function(d) {
                        if (id = d.data.id) {
                            var id, i = id.lastIndexOf(".");
                            d.id = id;
                            d.package = id.slice(0, i);
                            d.class = id.slice(i + 1);
                        }
                    });

                var node = svg.selectAll(".node")
                    .data(pack(root).leaves())
                    .enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    });

                node.append("circle")
                    .attr("id", function(d) {
                        return d.id;
                    })
                    .attr("r", function(d) {
                        return d.r;
                    })
                    .style("fill", function(d) {
                        return color(d.package);
                    });

                node.append("clipPath")
                    .attr("id", function(d) {
                        return "clip-" + d.id;
                    })
                    .append("use")
                    .attr("xlink:href", function(d) {
                        return "#" + d.id;
                    });

                node.append("text")
                    .attr("clip-path", function(d) {
                        return "url(#clip-" + d.id + ")";
                    })
                    .selectAll("tspan")
                    .data(function(d) {
                        return d.class.split(/(?=[A-Z][^A-Z])/g);
                    })
                    .enter().append("tspan")
                    .attr("x", 0)
                    .attr("y", function(d, i, nodes) {
                        return 13 + (i - nodes.length / 2 - 0.5) * 10;
                    })
                    .text(function(d) {
                        return d;
                    });

                node.append("title")
                    .text(function(d) {
                        return d.data.id + "\n" + format(d.value);
                    });
            }
        });
      }
    </script>
</div>

I did find this similar question but the solutions given doesnt seem to work for me :stackoverflow.com/questions/28998464/… — SNT
– SNT, Commented Feb 19, 2017 at 17:19

Johannes Filter · Accepted Answer · 2017-02-26 15:57:24Z

1

Here is one example how to do it: http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html

You don't have to redraw everything but update certain elements.

I don't understand your part about changing the CSV. The user does not change the CSV but your visual output is depending on some user data. So yes, within the callback function of d3.csv(), you write your code that calls some kind of a draw function. But the draw function does not have to be defined there. You can write the function outside and just call it there. This increased the readable of your code dramatically. ;)

answered Feb 26, 2017 at 15:57

Johannes Filter

1,9313 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using dynamic input(CSV) in d3js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related