scheidan
commented
4 years ago Minimal example of how to visualize a sanitation system in a webpage with d3-graphviz. Note, a json export from Santiago contains the dotstring.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<h1> Visualisation of a sanitations system with d3-graphviz </h1>
<div id="graph" style="text-align: center;"></div>
<script>
var dotstring = "digraph system {\nrankdir=LR;\nnode[style=filled colorscheme=pastel15];\nlabel=\"ID: 2\";\nlabelfontsize=22.0;\nlabelloc=\"top\";\nlabeljust=left\nt12_hssfcw_3_trans [shape=box, fillcolor=\"# 70BF54\" label=\"t12_hssfcw\n(T)\"];\nd4_application_compost_2 [shape=box, fillcolor=\"# 00B6CD\" label=\"d4_application_compost\n(D)\"];\nd_10irrigation_4 [shape=box, fillcolor=\"# 00B6CD\" label=\"d_10irrigation\n(D)\"];\nc3_motorized_transport_dry_6 [shape=box, fillcolor=\"# C1C430\" label=\"c3_motorized_transport_dry\n(C)\"];\nu2_pour_flush [shape=box, fillcolor=\"# F15A31\" label=\"u2_pour_flush\n(U)\"];\nd11_surface_solids_disposal_6 [shape=box, fillcolor=\"# 00B6CD\" label=\"d11_surface_solids_disposal\n(D)\"];\ns4_single_pit_3 [shape=box, fillcolor=\"# F99D34\" label=\"s4_single_pit\n(S)\"];\nt3_drying_bed_2_trans [shape=box, fillcolor=\"# 70BF54\" label=\"t3_drying_bed\n(T)\"];\nt9_cocomposting_6_trans [shape=box, fillcolor=\"# 70BF54\" label=\"t9_cocomposting\n(T)\"];\nt3_drying_bed_2_trans -> t12_hssfcw_3_trans [label=\"transportedeffluent\"];\nt12_hssfcw_3_trans -> t9_cocomposting_6_trans [label=\"transportedsludge\"];\ns4_single_pit_3 -> c3_motorized_transport_dry_6 [label=\"sludge\"];\nu2_pour_flush -> s4_single_pit_3 [label=\"blackwater\"];\nt12_hssfcw_3_trans -> d_10irrigation_4 [label=\"transportedsecondaryeffluent\"];\nt9_cocomposting_6_trans -> d4_application_compost_2 [label=\"transportedcompost\"];\nc3_motorized_transport_dry_6 -> t3_drying_bed_2_trans [label=\"transportedsludge\"];\nt3_drying_bed_2_trans -> d11_surface_solids_disposal_6 [label=\"transportedprocessedsludge\"];\n{ rank=same d4_application_compost_2 d_10irrigation_4 d11_surface_solids_disposal_6 }\n{ rank=same u2_pour_flush }\n}\n"
d3.select("#graph").graphviz().renderDot(dotstring);
</script>
</body>
Collection of links that may be of use.
Misc
Tools/libraries