d3 play pause slider updating viz graph

[animesh singh]

I hey ,guys i am new to d3. I am trying to implement

  http://vizuly.io/product/weighted-tree/

for this i am trying to make a play pause slider which reloads or regenerate the tree again and again based on a year attribute in csv file

so when year on slider updates the tree also updates according to data in csv in that year.

what i have tried is

function slideupdate() {                    

        

            d3.selectAll("#viz_container")

               .transition()

               .duration(1000)

                .attr("class", function(d){

            

                    switch ($("#slider").val()) {

                        case "2000":

                           loadData0();

                           return viz;

                            break;

                        case "2001":

                            loadData1();

                              return viz;

                            break;

                        case "2002":

                            loadData2();

                              return viz;

                            break;

                        case "2003":

                            loadData3();

                              return viz;

                            break;

                        case "2004":

                            loadData4();

                              return viz;

                            break;

                        case "2005":

                            loadData5();

                              return viz;

                            break;

                        case "2006":

                            loadData6();

                              return viz;

                            break;

                        case "2007":

                            loadData7();

                              return viz;

                            break;

                        case "2008":

                            loadData8();

                              return viz;

                            break;

                        case "2009":

                            loadData9();

                              return viz;

                            break;

                        case "2010":

                            loadData10();

                              return viz;

                            break;

                        case "2011":

                            loadData11();

                              return viz;

                            break;

                    }

where load data function is like

function loadData0()

 {

 d3.csv("data/weightedtree_federal_budget7.csv", function (csv) 

    {

        data.values=prepData(csv);

         var blob = JSON.stringify(data);

         initialize();        

});    

}

however i am not able to bind tree data to slider so when slider moves nothing is happening.

[Ibrahim Tanyalcin]

Hi Animesh,

it depends on what is called inside the initialize function. If it only handles enter selections than it might be that it does not update. Also check first if there are any errors thrown or console messages. I did a similar project where the state updates based on a json file as the slide changes. These lines might help you:

-main render : https://github.com/IbrahimTanyalcin/lexicon-rainbow/blob/master/pretty/lexiconRainbow.d3v4.pretty.js#L1378

handling enter/update/exit (called by the main render above):

https://github.com/IbrahimTanyalcin/lexicon-rainbow/blob/master/pretty/lexiconRainbow.d3v4.pretty.js#L1400

https://github.com/IbrahimTanyalcin/lexicon-rainbow/blob/master/pretty/lexiconRainbow.d3v4.pretty.js#L1624

These lines probably can be cut down for other projects. Also I would suggest making a call to fetch the file only once rather than making requests every time you change the slider. Get the json once and then visualize parts of the json based on a parameter.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[animesh singh]

Thank you for your indulgence .

My intialize is :

function initialize()

 {

    viz = vizuly.viz.weighted_tree(document.getElementById("viz_container"));

    //Here we create three vizuly themes for each radial progress component.

    //A theme manages the look and feel of the component output.  You can only have

    //one component active per theme, so we bind each theme to the corresponding component.

    theme = vizuly.theme.weighted_tree(viz).skin(vizuly.skin.WEIGHTED_TREE_AXIIS);

    

    //Here we set some bases line properties for all three components.

    viz.data(data)                                                      // Expects hierarchical array of objects.

        .width(600)                                                     // Width of component

        .height(600)                                                    // Height of component

        .children(function (d) { return d.values })                     // Denotes the property that holds child object array

        .key(function (d) { return d.id })                              // Unique key

        .value(function (d) {

            return Number(d["agg_" + valueField]) })                    // The property of the datum that will be used for the branch and node size

        .fixedSpan(-1)                                                  // fixedSpan > 0 will use this pixel value for horizontal spread versus auto size based on viz width

        .branchPadding(.07)

        .label(function (d) {                                           // returns label for each node.

            return trimLabel(d.key || (d['Level' + d.depth]))})

        .on("measure",onMeasure)                                        // Make any measurement changes

        .on("mouseover",onMouseOver)                                    // mouseover callback - all viz components issue these events

        .on("mouseout",onMouseOut)                                      // mouseout callback - all viz components issue these events

        .on("click",onClick);                                           // mouseout callback - all viz components issue these events

    //We use this function to size the components based on the selected value from the RadiaLProgressTest.html page.

    changeSize(d3.select("#currentDisplay").attr("item_value"));

    // Open up some of the tree branches.

    viz.toggleNode(data.values[2]);

    viz.toggleNode(data.values[2].values[0]);

    viz.toggleNode(data.values[5]);

// viz.toggleNode(data.values[4]);

 viz.toggleNode(data.values[5].values[2]);

//  viz.toggleNode(data.values[6].values[0]);

   viz.toggleNode(data.values[9]);

viz.toggleNode(data.values[9].values[0]);

// viz.toggleNode(data.values[11]);

// viz.toggleNode(data.values[11].values[0]);

    //draw2();

    //draw3();

    drawLegend();

 //  toggleLegend();  

    slideupdate();          

   

} 

I tried calling fetching the csv file onece however i am not able to figure how to bind specific column of year attribute in csv data to my viz tree so that it can return the viz when slider value modifies.

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/U_qV3YCchDo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.