Merge pull request #8 from argrecsys/dev

Dev
argrecsys · Nov 25, 2023 · b95b623 · b95b623
2 parents 3abb994 + 6810388
commit b95b623
Show file tree

Hide file tree

Showing 2 changed files with 401 additions and 72 deletions.
diff --git a/code/website/index.html b/code/website/index.html
@@ -5,12 +5,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DM DataViz</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
     <link rel="icon" href="favicon.ico" type="image/x-icon">
+
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 
 <body>
@@ -21,6 +27,7 @@ <h1>Digital Government - DM Visual Analytics with ChatGPT</h1>
     <main>
         <div class="container">
             <!-- Word cloud -->
+            <h3>Analysis of Decide Madrid Proposal 152</h3>
             <div style="text-align: center;"><img src="../../result/images/152.png" alt="Proposal word cloud"></div>
 
             <!-- Network chart -->
@@ -43,6 +50,13 @@ <h3>Display a DM debate in the form of a indented tree</h3>
                     target="_blank">Observable</a>
             </div>
             <div id="chart-3" class="chart"></div>
+
+            <!-- ChatGPT extracted arguments table -->
+            <h3>ChatGPT Extracted Arguments</h3>
+            <div style="width: 100%; padding-top: 10px;">
+                <table id="tb-data" class="display" width="100%"></table>
+                <div class="divSubTitle">Table 1 - ChatGPT extracted arguments.</div>
+            </div>
         </div>
 
         <script type="module">
@@ -62,6 +76,40 @@ <h3>Display a DM debate in the form of a indented tree</h3>
             new Runtime().module(notebook3, name => {
                 if (name === "chart") return new Inspector(document.querySelector("#chart-3"));
             });
+
+            const filepath = "https://raw.githubusercontent.com/argrecsys/dgov-visual-analytics/main/data/gpt_data/arguments.csv"
+            d3.csv(filepath).then(
+                function (data) {
+
+                    // Load and parse data
+                    let argData = [];
+                    data.forEach(function (d, i) {
+                        d.proposal_id = +d["proposal_id"];
+                        if (d.proposal_id === 152) {
+                            d.arguments_name = d["arguments name"];
+                            d.argument_types = (d["argument types"] == "A favor" ? "support" : "attack");
+                            argData.push(d);
+                        }
+                    });
+
+                    console.log(argData);
+                    $("#tb-data").DataTable({
+                        data: argData,
+                        columns: [
+                            { title: "Argument", data: "arguments_name" },
+                            { title: "Argument Description", data: "argument_description" },
+                            { title: "Argument Intent", data: "argument_types" },
+                            { title: "Comment Ids", data: "comment_id" }
+                        ]
+                    });
+                },
+                function (error) {
+                    // Error log message
+                    console.log(error);
+                }
+            );
+
+
         </script>
 
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>