digraph G {
    bgcolor=transparent
    graph [rankdir="LR" fontname="helvetica" labeljust="l"]
    node [shape="box" fontname="monospace" fontsize=8 color=gray70 style=filled fillcolor=white];
    edge [color="#EDEBDF" arrowsize=0.8]
    
    subgraph cluster_browser {
        graph [
            label="\lBrowser";
            color="#CADEE1";
            margin=10
            style=filled;
            fontcolor=gray30
        ]
        subgraph cluster_2 {
            graph [
                label="\lWebWorker 1";
                style=filled
                margin=10
                fillcolor="#2D4C68"
                color=none
                fontcolor="#EDEBDF"
                fontsize=10
            ]
            table1 [
                label="table(csv)"
                width=1
                color=none
                fillcolor="#E6E2DA"
            ]
           
         
            view2 [
                label="view({\l    group_by: [\"Sub-Category\"]\l})\l"
                width=2.5
                color=none
                fillcolor="#EDEBDF"
            ]
  
            table1 -> {view2};
        }

        view2 -> viewer2 [penwidth=2 style=dashed arrowhead=none color="#666"];

        subgraph cluster_41 {
           graph [
                label="\l<html>";
                color=none
                fillcolor=white
                fontcolor=gray30
                fontsize=10
                fontname="monospace" fontsize=8 color=none 

            ]
          
            viewer2 [
                label = "<perspective-viewer\l    view=\"xy_scatter\"\l    row-pivots='[\"Sub-Category\"]'>\l"
                width=2.8
                color=lightgrey
            ];
           
        }
      
        
    }	
}