How to do thIs diagram with force-directed graph in D3.js? -
i made diagram viz.js.
the dot code simple:
<script type="text/vnd.graphviz" id="mydiagram"> digraph g { graph [ fontname = "arial", fontsize = 18, label = "digest email flow chart", size = "4,4" ]; node [ shape = ellipse, sides = 4, distortion = "0.0", orientation = "0.0", skew = "0.0", bgcolor = lightgray, style = filled, fontname = "arial" ]; "email notification" [shape=ellipse, shape = "mrecord" label="digest email\n(scheduled)"]; "sentiment analysis" [shape=ellipse, shape = "mrecord" label="sentiment analysis\n(triggered)"]; "google news" [shape=ellipse, shape = "mrecord" label="google news\n(scheduled)"]; "dilbert daily comics" [shape=ellipse, shape = "mrecord" label="dilbert daily comics\n(scheduled)"]; "time series chart" [shape=ellipse, shape = "mrecord" label="time series chart\n(triggered)"]; "twitter stream" [shape=ellipse, shape = "mrecord" label="twitter stream\n(scheduled)"]; "email notification" -> "time series chart" [dir = "back"]; "email notification" -> "dilbert daily comics" [dir = "back"]; "time series chart" -> "twitter stream" [dir = "back"]; "sentiment analysis" -> "google news" [dir = "back"]; "email notification" -> "sentiment analysis" [dir = "back"]; } </script>
but viz.js library 2.3 mb! large.
is possible same force-directed graph in d3.js?
eventually decided write charting code myself, because jsplumb conflicted in areas jquery mobile js , css. not hard own drawing on html5 canvas , end 'lighter' app.
this result:
Comments
Post a Comment