reddit-data-tool/index.html at main · dpfu/reddit-data-tool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Reddit Research Exporter</title>
  <meta charset="utf-8"/>
  <meta name="author" content="Daniel Pfurtscheller @dpfu on GitHub"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
  />
  <style>
    th {
      cursor: pointer; /* indicates columns are sortable */
    }
    #output-table {
      width: 100%;
      border-collapse: collapse;
    }
    #output-table th, #output-table td {
      border: 1px solid #ccc;
      padding: 8px;
      vertical-align: top;
    }
    .hidden {
      display: none;
    }
    .description {
      font-size: 0.95em;
      color: #555;
      margin-bottom: 15px;
    }
    #tool-title {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .help-block {
      font-size: 0.9em;
      color: #666;
    }

    /* Visualization styling */
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 1.5px;
    }
    .node rect {
      cursor: pointer;
      stroke-width: 1.5px;
    }
    .node text {
      font: 12px sans-serif;
      fill: #333;
    }
  </style>
</head>
<body onload="onDocumentReady()">

<div class="container">

  <!-- Title and short instructions -->
  <h1 id="tool-title">Reddit Data Tool</h1>
  <p class="description">
    A simple, browser-based tool for exporting Reddit posts and comment threads for research, analysis, and archival.
    This tool fetches comment data as JSON, formats it hierarchically, and offers multiple output options.
  </p>

  <h4>How to Use</h4>
  <ol>
    <li>Paste a valid Reddit post URL in the field below.</li>
    <li>Adjust any settings you need (date format, layout, newline handling, etc.).</li>
    <li>Click <strong>Export</strong> to view the results in a sortable table.</li>
    <li>Use the <strong>Download CSV</strong> or <strong>Copy Table (HTML)</strong> buttons for further analysis.</li>
  </ol>

  <!-- Reddit URL input -->
  <div class="form-group">
    <label for="url-field"><strong>1. Reddit Post URL</strong></label>
    <input
      name="url"
      class="form-control"
      type="text"
      id="url-field"
      placeholder="https://www.reddit.com/r/.../comments/..."
      required
    />
    <p class="help-block">Example: https://www.reddit.com/r/TikTokCringe/comments/gbkmga/godlevel_shitpost</p>
  </div>

  <!-- Options panel -->
  <div class="panel panel-default">
    <div class="panel-heading"><strong>2. Options</strong></div>
    <div class="panel-body">

      <!-- Date Format Selection -->
      <label>Date Format (UTC Only):</label>
      <div class="radio">
        <label>
          <input type="radio" name="dateFormat" value="iso8601" checked>
          ISO-8601 (2025-03-11T14:19:10+00:00)
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="dateFormat" value="rfc1123">
          RFC 1123 (Tue, 11 Mar 2025 14:19:10 GMT)
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="dateFormat" value="utc">
          UTC (2025-03-11T14:19:10Z)
        </label>
      </div>

      <!-- Compact Mode Checkbox -->
      <div class="checkbox">
        <label>
          <input class="form-check-input" type="checkbox" id="compactMode">
          Compact Comments Mode (metadata appended to body)
        </label>
      </div>

      <!-- Escape New Line -->
      <div class="checkbox">
        <label>
          <input class="form-check-input" type="checkbox" id="escapeNewLine">
          Strip newline characters from comments
        </label>
      </div>
    </div>
  </div>

  <!-- Action buttons -->
  <div class="form-group">
    <label><strong>3. Generate and Download</strong></label><br/>
    <button class="btn btn-primary" onclick="startExport()">Export</button>
    <button class="btn btn-success" onclick="downloadCSV()" disabled id="download-btn">Download CSV</button>
    <button class="btn btn-info" onclick="copyTableAsHTML()" disabled id="copy-btn">Copy Table (HTML)</button>
  </div>

  <!-- Post Info area -->
  <div id="post-info-block" class="hidden">
    <h2>Post Details</h2>
    <div id="post-info"></div>
  </div>

  <!-- Output area -->
  <div id="output-block" class="hidden">
    <h3>Comment Thread (Sortable Table)</h3>
    <div id="table-wrapper"></div>
  </div>

  <!-- Visualization panel (hidden until data is ready) -->
  <div id="visualization-panel" class="panel panel-default hidden" style="margin-top:20px;">
    <div class="panel-heading">
      <strong>4. Visualization</strong>
    </div>
    <div class="panel-body">
      <p class="help-block">
        View a collapsible, left-to-right thread map. Each node is a rectangle with the comment numbering, score,
        and hidden-child info. Drag/scroll to pan/zoom. Click to expand/collapse deeper replies.
      </p>
      <button class="btn btn-primary" id="show-visualization-btn" onclick="initVisualization()">
        Render Visualization
      </button>

      <!-- Container for D3 chart -->
      <div id="viz-container" style="width:100%; height:700px; margin-top:20px; border:1px solid #ccc;"></div>
    </div>
  </div>

  <footer style="margin-top: 30px;">
    <hr/>
    <p>If you find this software useful in your work, please cite it as follows:</p>
    <blockquote>
      <p dir="auto">
        <strong>Pfurtscheller, D.</strong> (2025). <em>Reddit Data Tool</em> [Computer software].
        <a href="https://doi.org/10.5281/zenodo.15024196" rel="nofollow">https://doi.org/10.5281/zenodo.15024196</a>
      </p>
    </blockquote>
    </p>
  </footer>
</div>

<!-- Load D3 (for visualization) and main script -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>