add a new rccord to parallel coordinate chart in d3

Hi I am implementing a parallel coordinate chart using D3. This code below is the actual visalization page code. I am getting some information from the user using an input form and I would like to add these details to the visualization.

For example, if the details of the new record are as follows: african-american,45,supraglottic,T4,N0, 1,induction, PLRT, 0.5

Is that possible to add this new record to the visualization?

A screenshot of the data:

Ethnicity,AgeAtTx,Site,Tcategory,Nodal_Disease,ecog,Chemotherapy,Local_Therapy,Probability of Survival
white,65.93972603,supraglottic,T3,N+,0,no chemo,LP/RT alone,0.366190068
white,69.42465753,supraglottic,T3,N+,0,induction,PLRT,0.396018836
white,68.14246575,supraglottic,T3,N0,3,no chemo,LP/RT alone,0.439289384
white,40.30410959,supraglottic,T3,N+,1,no chemo,LP/RT alone,0.512773973
white,47.96438356,supraglottic,T3,N+,0,no chemo,PLRT,0.472208904
white,70.3369863,supraglottic,T3,N+,0,no chemo,LP/RT alone,0.324965753
white,60.50136986,supraglottic,T3,N+,2,no chemo,LP/RT alone,0.323424658
white,60.72328767,supraglottic,T3,N+,1,no chemo,LP/RT alone,0.321344178
white,59.36986301,supraglottic,T3,N0,1,induction,LP/chemoRT,0.646532534
other,57.64931507,supraglottic,T3,N+,1,concurrent,LP/chemoRT,0.662662671
asian/pacific islander,62.93972603,glottic,T3,N+,2,concurrent,LP/chemoRT,0.769315068

Code:

<!DOCTYPE html>

<style>
    #wrapper {
        position: relative;
        float: left;
        top: 20px;
        font-family: sans-serif;
        font-size: 10px;
    }

    #tooltip{
        font-family: sans-serif;
        font-size: 14px;
        font-weight: bold;
        color:black;
    }

</style>
<link rel="stylesheet" type="text/css" href="http://mostapharoudsari.github.io/Honeybee/pc_source_files/css/d3.parcoords.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src = "http://mostapharoudsari.github.io/Honeybee/pc_source_files/d3/d3.parcoords.js"></script>
<body>
        <div id="wrapper" class="parcoords" style="width:100%; height:420px; margin-top:10px;"></div>

    <script>

        var color_set = d3.scale.ordinal()
                .domain(['white', 'other', 'african-american', 'hispanic', 'asian/pacific islander'])
                .range(['#ffae19', '#4ca64c', '#4682B4', '#737373', '#ff4c4c']);


        // load default chart
        d3.csv("SurvivalProbability.csv", function (data) {

            // collect text for first column to adjust left margin
            var firstCell = data.map(function (d) {
                return d3.values(d)[0]
            });

            // find the longest text size in the first row to adjust left margin
            var textLength = 0;
            firstCell.forEach(function (d) {
                if (d.length > textLength)
                    textLength = d.length;
            });


            // get parallel coordinates
            graph = d3.parcoords()('#wrapper')
                    .data(data)
                    .margin({top: 30, left: 3 * textLength, bottom: 40, right: 0})
                    .alpha(0.6)
                    .mode("queue")
                    .rate(5)
                    .render()
                    .brushMode("1D-axes")  // enable brushing
                    //.reorderable() // I removed this for now as it can mess up with tooltips
                    .interactive();

            // add instruction text
            var instructions = "-Drag around axis to begin brush. -Click axis to clear brush. -Click a label to color data based on axis values. -Hover on each line to highlight."


            // set the initial coloring based on the 3rd column
            update_colors(d3.keys(data[0])[0]);

            // click label to activate coloring
            graph.svg.selectAll(".dimension")
                    .on("click", update_colors)
                    .selectAll(".label")
                    .style("font-size", "14px"); // change font sizes of selected lable

            //add hover event
            d3.select("#wrapper svg")
                    .on("mousemove", function () {
                        var mousePosition = d3.mouse(this);
                        highlightLineOnClick(mousePosition, true); //true will also add tooltip
                    })
                    .on("mouseout", function () {
                        cleanTooltip();
                        graph.unhighlight();
                    });
        });




        // update color and font weight of chart based on axis selection
        // modified from here: https://syntagmatic.github.io/parallel-coordinates/
        function update_colors(dimension) {
            // change the fonts to bold
            graph.svg.selectAll(".dimension")
                    .style("font-weight", "normal")
                    .filter(function (d) {
                        return d == dimension;
                    })
                    .style("font-weight", "bold");

            // change color of lines
            // set domain of color scale
            var values = graph.data().map(function (d) {
                return parseFloat(d[dimension])
            });
            color_set.domain([d3.min(values), d3.max(values)]);

            // change colors for each line
            graph.color(function (d) {
                return color_set([d[dimension]])
            }).render();
        }
        ;


        // Add highlight for every line on click
        function getCentroids(data) {
            // this function returns centroid points for data. I had to change the source
            // for parallelcoordinates and make compute_centroids public.
            // I assume this should be already somewhere in graph and I don't need to recalculate it
            // but I couldn't find it so I just wrote this for now
            var margins = graph.margin();
            var graphCentPts = [];

            data.forEach(function (d) {

                var initCenPts = graph.compute_centroids(d).filter(function (d, i) {
                    return i % 2 == 0;
                });

                // move points based on margins
                var cenPts = initCenPts.map(function (d) {
                    return [d[0] + margins["left"], d[1] + margins["top"]];
                });

                graphCentPts.push(cenPts);
            });

            return graphCentPts;
        }

        function getActiveData() {
            // I'm pretty sure this data is already somewhere in graph
            if (graph.brushed() != false)
                return graph.brushed();
            return graph.data();
        }

        function isOnLine(startPt, endPt, testPt, tol) {
            // check if test point is close enough to a line
            // between startPt and endPt. close enough means smaller than tolerance
            var x0 = testPt[0];
            var y0 = testPt[1];
            var x1 = startPt[0];
            var y1 = startPt[1];
            var x2 = endPt[0];
            var y2 = endPt[1];
            var Dx = x2 - x1;
            var Dy = y2 - y1;
            var delta = Math.abs(Dy * x0 - Dx * y0 - x1 * y2 + x2 * y1) / Math.sqrt(Math.pow(Dx, 2) + Math.pow(Dy, 2));
            //console.log(delta);
            if (delta <= tol)
                return true;
            return false;
        }

        function findAxes(testPt, cenPts) {
            // finds between which two axis the mouse is
            var x = testPt[0];
            var y = testPt[1];

            // make sure it is inside the range of x
            if (cenPts[0][0] > x)
                return false;
            if (cenPts[cenPts.length - 1][0] < x)
                return false;

            // find between which segment the point is
            for (var i = 0; i < cenPts.length; i++) {
                if (cenPts[i][0] > x)
                    return i;
            }
        }

        function cleanTooltip() {
            // removes any object under #tooltip is
            graph.svg.selectAll("#tooltip")
                    .remove();
        }

        function addTooltip(clicked, clickedCenPts) {

            // sdd tooltip to multiple clicked lines
            var clickedDataSet = [];
            var margins = graph.margin()

            // get all the values into a single list
            // I'm pretty sure there is a better way to write this is Javascript
            for (var i = 0; i < clicked.length; i++) {
                for (var j = 0; j < clickedCenPts[i].length; j++) {
                    var text = d3.values(clicked[i])[j];
                    // not clean at all!
                    var x = clickedCenPts[i][j][0] - margins.left;
                    var y = clickedCenPts[i][j][1] - margins.top;
                    clickedDataSet.push([x, y, text]);
                }
            }
            ;

            // add rectangles
            var fontSize = 14;
            var padding = 2;
            var rectHeight = fontSize + 2 * padding; //based on font size

            graph.svg.selectAll("rect[id='tooltip']")
                    .data(clickedDataSet).enter()
                    .append("rect")
                    .attr("x", function (d) {
                        return d[0] - d[2].length * 5;
                    })
                    .attr("y", function (d) {
                        return d[1] - rectHeight + 2 * padding;
                    })
                    .attr("rx", "2")
                    .attr("ry", "2")
                    .attr("id", "tooltip")
                    .attr("fill", "grey")
                    .attr("opacity", 0.9)
                    .attr("width", function (d) {
                        return d[2].length * 10;
                    })
                    .attr("height", rectHeight);

            // add text on top of rectangle
            graph.svg.selectAll("text[id='tooltip']")
                    .data(clickedDataSet).enter()
                    .append("text")
                    .attr("x", function (d) {
                        return d[0];
                    })
                    .attr("y", function (d) {
                        return d[1];
                    })
                    .attr("id", "tooltip")
                    .attr("fill", "white")
                    .attr("text-anchor", "middle")
                    .attr("font-size", fontSize)
                    .text(function (d) {
                        return d[2];
                    })
        }

        function getClickedLines(mouseClick) {
            var clicked = [];
            var clickedCenPts = [];

            // find which data is activated right now
            var activeData = getActiveData();

            // find centriod points
            var graphCentPts = getCentroids(activeData);

            if (graphCentPts.length == 0)
                return false;

            // find between which axes the point is
            var axeNum = findAxes(mouseClick, graphCentPts[0]);
            if (!axeNum)
                return false;

            graphCentPts.forEach(function (d, i) {
                if (isOnLine(d[axeNum - 1], d[axeNum], mouseClick, 2)) {
                    clicked.push(activeData[i]);
                    clickedCenPts.push(graphCentPts[i]); // for tooltip
                }
            });

            return [clicked, clickedCenPts]
        }


        function highlightLineOnClick(mouseClick, drawTooltip) {

            var clicked = [];
            var clickedCenPts = [];

            clickedData = getClickedLines(mouseClick);

            if (clickedData && clickedData[0].length != 0) {

                clicked = clickedData[0];
                clickedCenPts = clickedData[1];

                // highlight clicked line
                graph.highlight(clicked);

                if (drawTooltip) {
                    // clean if anything is there
                    cleanTooltip();
                    // add tooltip
                    addTooltip(clicked, clickedCenPts);
                }

            }
        };

    </script>
</body>

Answers


First I moved your code which makes the graph into a new function

 function makeGraph(data){
            // collect text for first column to adjust left margin
      var firstCell = data.map(function(d) {
        return d3.values(d)[0]
      });
//...old code

Next I call this makeGraph function from csv load

d3.csv("my.csv", function(data) {
  makeGraph(data);

Now when ever your data changes Delete the old DOM Call MakeGraph with new data set.

I am doing dynamic value via timeout.

window.setTimeout(function(){
          var k = {Ethnicity:"african-american",
          AgeAtTx:"45",
          Site:"supraglottic",
          Tcategory:"T4",
          Nodal_Disease:"N+",
          ecog:"1",
          Chemotherapy:"induction",
          Local_Therapy:"PLRT",
          "Probability of Survival": "0.5"
          }
          data.push(k);
          //remove the old DOM
          d3.selectAll("#wrapper").selectAll("*").remove();
          //make the graph
          makeGraph(data);
        }, 5000);

Working code here

Hope this helps!


Need Your Help

Get current URL from IFRAME

javascript url iframe

Is there a simple way to get the current URL from an iframe?