Dependency parsing tree visualization on web page

Question

Below is an example of dependency parsing tree.

I want to visualize it on html web page, can any one show me some examples or directions? I'm familiar with C/C++, Python, but not familiar with html/javascript.

Many thanks!

Answer 1

Covert the output into json and pass it to some js graph library like d3, raphael etc.

Demo & Reference

For example Parse tree for

"I am going to do a seminar on NLP at SXSW in Austin."

would be

(ROOT
  (S
    (NP (PRP I))
    (VP (VBP am)
      (VP (VBG going)
        (S
          (VP (TO to)
            (VP (VB do)
              (NP
                (NP (DT a) (NN seminar))
                (PP (IN on)
                  (NP (NNP NLP))))
              (PP (IN at)
                (NP (NNP SXSW)))
              (PP (IN in)
                (NP (NNP Austin))))))))
    (. .)))

can be transformed to

[{
    "data": {
        "type": "ROOT"
    },
    "children": [{
        "data": {
            "type": "S"
        },
        "children": [{
            "data": {
                "type": "NP"
            },
            "children": [{
                "data": {
                    "type": "PRP"
                },
                "children": [{
                    "data": {
                        "ne": "O",
                        "word": "I",
                        "type": "TK",
                        "pos": "PRP"
                    },
                    "children": []
                }]
            }]
        }, {
            "data": {
                "type": "VP"
            },
            "children": [{
                "data": {
                    "type": "VBP"
                },
                "children": [{
                    "data": {
                        "ne": "O",
                        "word": "am",
                        "type": "TK",
                        "pos": "VBP"
                    },
                    "children": []
                }]
            }, {
                "data": {
                    "type": "VP"
                },
                "children": [{
                    "data": {
                        "type": "VBG"
                    },
                    "children": [{
                        "data": {
                            "ne": "O",
                            "word": "going",
                            "type": "TK",
                            "pos": "VBG"
                        },
                        "children": []
                    }]
                }, {
                    "data": {
                        "type": "S"
                    },
                    "children": [{
                        "data": {
                            "type": "VP"
                        },
                        "children": [{
                            "data": {
                                "type": "TO"
                            },
                            "children": [{
                                "data": {
                                    "ne": "O",
                                    "word": "to",
                                    "type": "TK",
                                    "pos": "TO"
                                },
                                "children": []
                            }]
                        }, {
                            "data": {
                                "type": "VP"
                            },
                            "children": [{
                                "data": {
                                    "type": "VB"
                                },
                                "children": [{
                                    "data": {
                                        "ne": "O",
                                        "word": "do",
                                        "type": "TK",
                                        "pos": "VB"
                                    },
                                    "children": []
                                }]
                            }, {
                                "data": {
                                    "type": "NP"
                                },
                                "children": [{
                                    "data": {
                                        "type": "NP"
                                    },
                                    "children": [{
                                        "data": {
                                            "type": "DT"
                                        },
                                        "children": [{
                                            "data": {
                                                "ne": "O",
                                                "word": "a",
                                                "type": "TK",
                                                "pos": "DT"
                                            },
                                            "children": []
                                        }]
                                    }, {
                                        "data": {
                                            "type": "NN"
                                        },
                                        "children": [{
                                            "data": {
                                                "ne": "O",
                                                "word": "seminar",
                                                "type": "TK",
                                                "pos": "NN"
                                            },
                                            "children": []
                                        }]
                                    }]
                                }, {
                                    "data": {
                                        "type": "PP"
                                    },
                                    "children": [{
                                        "data": {
                                            "type": "IN"
                                        },
                                        "children": [{
                                            "data": {
                                                "ne": "O",
                                                "word": "on",
                                                "type": "TK",
                                                "pos": "IN"
                                            },
                                            "children": []
                                        }]
                                    }, {
                                        "data": {
                                            "type": "NP"
                                        },
                                        "children": [{
                                            "data": {
                                                "type": "NN"
                                            },
                                            "children": [{
                                                "data": {
                                                    "ne": "ORGANIZATION",
                                                    "word": "NLP",
                                                    "type": "TK",
                                                    "pos": "NN"
                                                },
                                                "children": []
                                            }]
                                        }]
                                    }]
                                }]
                            }, {
                                "data": {
                                    "type": "PP"
                                },
                                "children": [{
                                    "data": {
                                        "type": "IN"
                                    },
                                    "children": [{
                                        "data": {
                                            "ne": "O",
                                            "word": "at",
                                            "type": "TK",
                                            "pos": "IN"
                                        },
                                        "children": []
                                    }]
                                }, {
                                    "data": {
                                        "type": "NP"
                                    },
                                    "children": [{
                                        "data": {
                                            "type": "NNP"
                                        },
                                        "children": [{
                                            "data": {
                                                "ne": "ORGANIZATION",
                                                "word": "SXSW",
                                                "type": "TK",
                                                "pos": "NNP"
                                            },
                                            "children": []
                                        }]
                                    }]
                                }]
                            }, {
                                "data": {
                                    "type": "PP"
                                },
                                "children": [{
                                    "data": {
                                        "type": "IN"
                                    },
                                    "children": [{
                                        "data": {
                                            "ne": "O",
                                            "word": "in",
                                            "type": "TK",
                                            "pos": "IN"
                                        },
                                        "children": []
                                    }]
                                }, {
                                    "data": {
                                        "type": "NP"
                                    },
                                    "children": [{
                                        "data": {
                                            "type": "NNP"
                                        },
                                        "children": [{
                                            "data": {
                                                "ne": "LOCATION",
                                                "word": "Austin",
                                                "type": "TK",
                                                "pos": "NNP"
                                            },
                                            "children": []
                                        }]
                                    }]
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        }, {
            "data": {
                "type": "."
            },
            "children": [{
                "data": {
                    "ne": "O",
                    "word": ".",
                    "type": "TK",
                    "pos": "."
                },
                "children": []
            }]
        }]
    }]
}]

and can be drawn using d3.

Answer 2

You should be able to do that using Raphaël JS

Look at the demos they have put up, for ex: the ones with curves etc.. That should point you in the right direction.

NOTE: The above would still require you to code it in JS, but picking up JS very straight forward. You probably can start off straight with Raphael and pick up the parts as you go.

Good luck.