CODEWITHSUNDEEP
javascriptd3.jsvisualizationparallel-coordinates
Amit Tomar
Amit Tomar

Reputation: 4858

Dynamically updating the parallel coordinate data

I am using the parallel coordinate system from here: http://syntagmatic.github.io/parallel-coordinates/

I am loading a csv file at the beginning using onload:

onload="loadVisualization('./csv/DataSet1.csv')"

and want to reload data on click of a button, from another csv file.

<script>

    var parcoords = d3.parcoords()("#NetworkData").alpha(.1)

function loadVisualization(source)
{
    parcoords = d3.parcoords()("#NetworkData").alpha(.1)
    d3.csv(source, function(data) 
    {
         parcoords
         .data( data.map(function(d) 
              { 
                  return {  "Time":        d3.time.format("%H:%M:%S").parse(d.Time),                                    
                            "Source":      (d.Source),
                            "Destination": (d.Destination),
                            "Protocol":    (d.Protocol),
                            "Length":      (d.Length),
                            "Destination Port": (d.DestPort),
                         } 
              }) )
        .color( "steelblue" )
        .mode("queue")
        .render()
        .reorderable()
        .interactive() 
        .brushable();  
    });
}

function reloadNewData()
{
    // Delete all data and reload from new source
    d3.select("#NetworkData").remove();
    source = './csv/DataSet_New.csv'
    loadVisualization(source)    
}

</script>

When I am calling the reload function, I get an error : TypeError: selection[0][0] is null.

How should I proceed?

I read about dynamically changing data from here, but couldn't figure out how to apply it in this case.

Upvotes: 2

Views: 1092

Answers (2)

George Lydakis
George Lydakis

Reputation: 509

You don't need to delete the chart in order to update it. You could empty the dimensions and data properties, repopulate them and then update the chart.

For example:

To empty the chart

parcoords
      .dimensions({})
      .data([])
      .render();

and to repopulate it with new data

parcoords
    .data(data)
    .dimensions(generateParcoordsDimensions())
    .render()
    .updateAxes();

All the other settings are kept so you don't need to set for example .color or .mode again.

Upvotes: 1

Jeff Rossiter
Jeff Rossiter

Reputation: 15

I've also been trying to use parcoords.js with dynamic data. At the beginning of my loadVisualization function I set my NetworkData div's innerHTML to "". I don't have a reloadNewData function but you should be able to clear NetworkData as shown below.

function reloadNewData()
{
    // Delete all data and reload from new source
    // d3.select("#NetworkData").remove();
    document.getElementById("NetworkData").innerHTML = "";
    source = './csv/DataSet_New.csv'
    loadVisualization(source)    
}

Upvotes: 1

Related Questions