Spaces:
Running
Running
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<meta name="generator" content="Observable Framework v1.11.0"> | |
<title>Forum Dashboard | Observable Forum Dashboard</title> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" crossorigin> | |
<link rel="preload" as="style" href="./_observablehq/theme-air,near-midnight,alt,wide.f6ca92af.css"> | |
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" crossorigin> | |
<link rel="stylesheet" type="text/css" href="./_observablehq/theme-air,near-midnight,alt,wide.f6ca92af.css"> | |
<link rel="modulepreload" href="./_observablehq/client.4d3b1f74.js"> | |
<link rel="modulepreload" href="./_observablehq/runtime.c4c9c1af.js"> | |
<link rel="modulepreload" href="./_observablehq/stdlib.b89f0aee.js"> | |
<link rel="modulepreload" href="./_node/d3-array@3.2.4/index.f89e3560.js"> | |
<link rel="modulepreload" href="./_npm/d3-dsv@3.0.1/407f7a1f.js"> | |
<link rel="modulepreload" href="./_npm/@observablehq/plot@0.6.16/e828d8c8.js"> | |
<link rel="modulepreload" href="./_node/internmap@2.0.3/index.4106013c.js"> | |
<link rel="modulepreload" href="./_npm/d3@7.9.0/7055d4c5.js"> | |
<link rel="modulepreload" href="./_npm/isoformat@0.2.1/c68fbd73.js"> | |
<link rel="modulepreload" href="./_npm/interval-tree-1d@1.0.4/a62ae5ce.js"> | |
<link rel="modulepreload" href="./_npm/d3-array@3.2.4/e95f898e.js"> | |
<link rel="modulepreload" href="./_npm/d3-axis@3.0.0/d44feff9.js"> | |
<link rel="modulepreload" href="./_npm/d3-brush@3.0.0/5830b12a.js"> | |
<link rel="modulepreload" href="./_npm/d3-chord@3.0.1/84d7b8e9.js"> | |
<link rel="modulepreload" href="./_npm/d3-color@3.1.0/2c0cdfa2.js"> | |
<link rel="modulepreload" href="./_npm/d3-contour@4.0.2/626bedc4.js"> | |
<link rel="modulepreload" href="./_npm/d3-delaunay@6.0.4/00c41b5d.js"> | |
<link rel="modulepreload" href="./_npm/d3-dispatch@3.0.1/b5f7cdc6.js"> | |
<link rel="modulepreload" href="./_npm/d3-drag@3.0.0/b22c5864.js"> | |
<link rel="modulepreload" href="./_npm/d3-ease@3.0.1/6f15f633.js"> | |
<link rel="modulepreload" href="./_npm/d3-fetch@3.0.1/ef1ec490.js"> | |
<link rel="modulepreload" href="./_npm/d3-force@3.0.0/5e1ff060.js"> | |
<link rel="modulepreload" href="./_npm/d3-format@3.1.0/5851d7ef.js"> | |
<link rel="modulepreload" href="./_npm/d3-geo@3.1.1/dcd02767.js"> | |
<link rel="modulepreload" href="./_npm/d3-hierarchy@3.1.2/f1db2593.js"> | |
<link rel="modulepreload" href="./_npm/d3-interpolate@3.0.1/034b7bcb.js"> | |
<link rel="modulepreload" href="./_npm/d3-path@3.1.0/4bb53638.js"> | |
<link rel="modulepreload" href="./_npm/d3-polygon@3.0.1/bbafde58.js"> | |
<link rel="modulepreload" href="./_npm/d3-quadtree@3.0.1/aa5b35a8.js"> | |
<link rel="modulepreload" href="./_npm/d3-random@3.0.1/32c7fec2.js"> | |
<link rel="modulepreload" href="./_npm/d3-scale@4.0.2/567840a0.js"> | |
<link rel="modulepreload" href="./_npm/d3-scale-chromatic@3.1.0/cf9b720b.js"> | |
<link rel="modulepreload" href="./_npm/d3-selection@3.0.0/5dcd62f4.js"> | |
<link rel="modulepreload" href="./_npm/d3-shape@3.2.0/f8e03c56.js"> | |
<link rel="modulepreload" href="./_npm/d3-time@3.1.0/5bc129e1.js"> | |
<link rel="modulepreload" href="./_npm/d3-time-format@4.1.0/19c92b44.js"> | |
<link rel="modulepreload" href="./_npm/d3-timer@3.0.1/f31b5398.js"> | |
<link rel="modulepreload" href="./_npm/d3-transition@3.0.1/8debb4ba.js"> | |
<link rel="modulepreload" href="./_npm/d3-zoom@3.0.0/4b0cc581.js"> | |
<link rel="modulepreload" href="./_npm/binary-search-bounds@2.0.5/1ee6c50d.js"> | |
<link rel="modulepreload" href="./_npm/internmap@2.0.3/5eed35fd.js"> | |
<link rel="modulepreload" href="./_npm/delaunator@5.0.1/e67acb27.js"> | |
<link rel="modulepreload" href="./_npm/robust-predicates@3.0.2/8ac9039b.js"> | |
<link rel="icon" href="./_file/observable.1af93621.png" type="image/png" sizes="32x32"> | |
<script type="module"> | |
import {define} from "./_observablehq/client.4d3b1f74.js"; | |
import {registerFile} from "./_observablehq/stdlib.b89f0aee.js"; | |
registerFile("./data/categories.csv", {"name":"./data/categories.csv","mimeType":"text/csv","path":"./_file/data/categories.f3fa0523.csv","lastModified":1727299665259,"size":662}); | |
registerFile("./data/config.json", {"name":"./data/config.json","mimeType":"application/json","path":"./_file/data/config.05513390.json","lastModified":1727299086052,"size":50}); | |
registerFile("./data/posts.csv", {"name":"./data/posts.csv","mimeType":"text/csv","path":"./_file/data/posts.36b9d40b.csv","lastModified":1727299664899,"size":6728921}); | |
define({id: "e35ec5a1", inputs: ["FileAttachment"], outputs: ["d3","config","url","posts","categoriesRaw","topics","users","topicsByCategory","categories","tenTopUsers","tenTopAcceptedUsers","NUM_USERS","topAcceptedUsersPerYear","intervals","interval","intervalLabel","color","years"], body: async (FileAttachment) => { | |
const d3 = await import("./_node/d3-array@3.2.4/index.f89e3560.js"); | |
const config = await FileAttachment("./data/config.json").json(); | |
const url = config.discourse_url; | |
const posts = await FileAttachment("./data/posts.csv").csv({ typed: true }); | |
const categoriesRaw = await FileAttachment("./data/categories.csv").csv({ | |
typed: true, | |
}); | |
const topics = [ | |
...d3 | |
.rollup( | |
posts, | |
(v) => ({ | |
topic_id: v[0].topic_id, | |
category_id: v[0].category_id, | |
posts: v, | |
users: new Set(v.map((d) => d.username)), | |
}), | |
(d) => d.topic_id | |
) | |
.values(), | |
]; | |
const users = d3.rollup( | |
posts, | |
(v) => ({ username: v[0].username, avatar_template: v[0].avatar_template }), | |
(d) => d.username | |
); | |
const topicsByCategory = d3.rollup( | |
topics, | |
(v) => v.length, | |
(d) => d.category_id | |
); | |
const categories = categoriesRaw.map((d) => ({ | |
...d, | |
topics: topicsByCategory.get(d.id) || 0, | |
})); | |
const tenTopUsers = d3 | |
.rollups( | |
posts, | |
(v) => v.length, | |
(d) => d.username | |
) | |
.sort((a, b) => d3.descending(a[1], b[1])) | |
.slice(0, 10) | |
.map((d) => ({ | |
username: d[0], | |
posts: d[1], | |
})); | |
const tenTopAcceptedUsers = d3 | |
.rollups( | |
posts.filter((d) => d.accepted_answer), | |
(v) => v.length, | |
(d) => d.username | |
) | |
.sort((a, b) => d3.descending(a[1], b[1])) | |
.slice(0, 10) | |
.map((d) => ({ | |
username: d[0], | |
posts: d[1], | |
})); | |
const NUM_USERS = 3; | |
const topAcceptedUsersPerYear = d3 | |
.rollups( | |
posts.filter((d) => d.accepted_answer), | |
(v) => v.length, | |
(d) => d.created_at.getFullYear(), | |
(d) => d.username | |
) | |
.flatMap(([year, users_stats]) => { | |
const top_usernames = users_stats | |
.sort(([_, posts_count_a], [__, posts_count_b]) => | |
d3.descending(posts_count_a, posts_count_b) | |
) | |
.slice(0, NUM_USERS) | |
.map(([username]) => username); | |
return top_usernames.map((username, i) => ({ | |
rank: i + 1, | |
year, | |
username, | |
src: url + users.get(username).avatar_template.replace("{size}", "400"), | |
})); | |
}); | |
const intervals = { month: "Month", year: "Year", day: "Day", week: "Week" }; | |
const interval = "month"; | |
const intervalLabel = intervals[interval]; | |
const color = { | |
users: "#e36209", | |
posts: "#3b5fc0", | |
accepted: "green", | |
}; | |
const years = d3.extent(posts, (d) => d.created_at.getFullYear()); | |
return {d3,config,url,posts,categoriesRaw,topics,users,topicsByCategory,categories,tenTopUsers,tenTopAcceptedUsers,NUM_USERS,topAcceptedUsersPerYear,intervals,interval,intervalLabel,color,years}; | |
}}); | |
define({id: "28e5ebab", mode: "inline", inputs: ["url","display"], body: async (url,display) => { | |
display(await( | |
url | |
)) | |
}}); | |
define({id: "8404f401", mode: "inline", inputs: ["years","display"], body: async (years,display) => { | |
display(await( | |
years[0] | |
)) | |
}}); | |
define({id: "18528b79", mode: "inline", inputs: ["years","display"], body: async (years,display) => { | |
display(await( | |
years[1] | |
)) | |
}}); | |
define({id: "ebe544d8", mode: "inline", inputs: ["topics","display"], body: async (topics,display) => { | |
display(await( | |
topics.length.toLocaleString("en-US") | |
)) | |
}}); | |
define({id: "a9ac2ae4", mode: "inline", inputs: ["posts","display"], body: async (posts,display) => { | |
display(await( | |
posts.length.toLocaleString("en-US") | |
)) | |
}}); | |
define({id: "9f3c82c4", mode: "inline", inputs: ["users","display"], body: async (users,display) => { | |
display(await( | |
users.size.toLocaleString("en-US") | |
)) | |
}}); | |
define({id: "3939618f", inputs: ["Plot","color"], outputs: ["postsMAU"], body: (Plot,color) => { | |
function postsMAU(data, { width } = {}) { | |
return Plot.plot({ | |
title: `Monthly active users`, | |
width, | |
height: 300, | |
y: { grid: true, label: `users` }, | |
// color: {...color, legend: true}, | |
marks: [ | |
Plot.lineY( | |
data, | |
Plot.binX( | |
{ y: "distinct" }, | |
{ | |
x: "created_at", | |
y: "username", | |
stroke: color.users, | |
interval: "month", | |
tip: true, | |
} | |
) | |
), | |
Plot.ruleY([0]), | |
], | |
}); | |
} | |
return {postsMAU}; | |
}}); | |
define({id: "694a2e8e", inputs: ["Plot","interval","color"], outputs: ["postsTimeline"], body: (Plot,interval,color) => { | |
function postsTimeline(data, { width } = {}) { | |
return Plot.plot({ | |
title: `Posts created every ${interval}`, | |
width, | |
height: 300, | |
y: { grid: true, label: "posts" }, | |
// color: {...color, legend: true}, | |
marks: [ | |
Plot.lineY( | |
data, | |
Plot.binX( | |
{ y: "count" }, | |
{ x: "created_at", stroke: color.posts, interval, tip: true } | |
) | |
), | |
Plot.ruleY([0]), | |
], | |
}); | |
} | |
return {postsTimeline}; | |
}}); | |
define({id: "df5d29c1", mode: "inline", inputs: ["resize","postsMAU","posts","display"], body: async (resize,postsMAU,posts,display) => { | |
display(await( | |
resize((width) => postsMAU(posts, {width})) | |
)) | |
}}); | |
define({id: "8db957c1", mode: "inline", inputs: ["resize","postsTimeline","posts","display"], body: async (resize,postsTimeline,posts,display) => { | |
display(await( | |
resize((width) => postsTimeline(posts, {width})) | |
)) | |
}}); | |
define({id: "35e85ade", inputs: ["Plot"], outputs: ["categoriesChart"], body: (Plot) => { | |
function categoriesChart(data, { width }) { | |
return Plot.plot({ | |
title: "Most active categories", | |
width, | |
height: 300, | |
marginTop: 0, | |
marginLeft: 150, | |
x: { grid: true, label: "Topics" }, | |
y: { label: null }, | |
marks: [ | |
Plot.barX(data, { | |
x: "topics", | |
y: "name", | |
fill: (d) => "#" + d.color, | |
tip: true, | |
sort: { y: "-x" }, | |
}), | |
Plot.ruleX([0]), | |
], | |
}); | |
} | |
return {categoriesChart}; | |
}}); | |
define({id: "4933adab", inputs: ["Plot","d3"], outputs: ["answersPerTopicChart"], body: (Plot,d3) => { | |
function answersPerTopicChart(data, { width }) { | |
return Plot.plot({ | |
title: "Answers per topic", | |
width, | |
height: 300, | |
marginTop: 0, | |
marginLeft: 150, | |
x: { grid: true, label: "Proportion (%)", percent: true }, | |
y: { label: "Answers", reverse: true }, | |
marks: [ | |
Plot.rectX( | |
data, | |
Plot.binY( | |
{ x: "proportion" }, | |
{ | |
y: { | |
value: (d) => d.posts.length - 1, | |
thresholds: d3.range(-0.5, 10.5), | |
}, | |
fill: (d) => (d.posts.length === 1 ? "#AAA" : "#DDD"), | |
tip: true, | |
} | |
) | |
), | |
Plot.ruleX([0]), | |
], | |
}); | |
} | |
return {answersPerTopicChart}; | |
}}); | |
define({id: "e3ec0bba", mode: "inline", inputs: ["resize","categoriesChart","categories","display"], body: async (resize,categoriesChart,categories,display) => { | |
display(await( | |
resize((width) => categoriesChart(categories, {width})) | |
)) | |
}}); | |
define({id: "4e86c617", mode: "inline", inputs: ["resize","answersPerTopicChart","topics","display"], body: async (resize,answersPerTopicChart,topics,display) => { | |
display(await( | |
resize((width) => answersPerTopicChart(topics, {width})) | |
)) | |
}}); | |
define({id: "1e4bc9aa", inputs: ["Plot","color"], outputs: ["topUsersChart","topAcceptedUsersChart","topAcceptedUsersPerYearChart"], body: (Plot,color) => { | |
function topUsersChart(data, { width }) { | |
return Plot.plot({ | |
title: "Top posters", | |
width, | |
height: 300, | |
marginTop: 0, | |
marginLeft: 150, | |
x: { grid: true, label: "Posts" }, | |
y: { label: null }, | |
marks: [ | |
Plot.barX(data, { | |
x: "posts", | |
y: "username", | |
fill: color.posts, | |
tip: true, | |
sort: { y: "-x" }, | |
}), | |
Plot.ruleX([0]), | |
], | |
}); | |
} | |
function topAcceptedUsersChart(data, { width }) { | |
return Plot.plot({ | |
title: "Users with most accepted answers", | |
width, | |
height: 300, | |
marginTop: 0, | |
marginLeft: 150, | |
x: { grid: true, label: "Posts" }, | |
y: { label: null }, | |
marks: [ | |
Plot.barX(data, { | |
x: "posts", | |
y: "username", | |
fill: color.accepted, | |
tip: true, | |
sort: { y: "-x" }, | |
}), | |
Plot.ruleX([0]), | |
], | |
}); | |
} | |
function topAcceptedUsersPerYearChart(data, { width }) { | |
return Plot.plot({ | |
title: "User with most accepted answers per year", | |
width, | |
height: 300, | |
marginTop: 0, | |
marginLeft: 50, | |
marginRight: 50, | |
x: { grid: false, label: "Year" }, | |
y: { grid: false, ticks: false, label: null, domain: [4, 0] }, | |
color: { domain: [1, 2, 3], range: ["#FFD700", "#C0C0C0", "#CD7F32"] }, | |
marks: [ | |
Plot.image(data, { | |
x: (d) => new Date(d.year + "-01-01"), | |
y: "rank", | |
src: "src", | |
tip: true, | |
r: 20, | |
preserveAspectRatio: "xMidYMin slice", | |
title: (d) => `${d.username} - rank ${d.rank} (${d.year})`, | |
}), | |
Plot.dot(data, { | |
x: (d) => new Date(d.year + "-01-01"), | |
y: "rank", | |
r: 20, | |
stroke: "rank", | |
strokeWidth: 2, | |
}), | |
Plot.ruleY([4]), | |
], | |
}); | |
} | |
return {topUsersChart,topAcceptedUsersChart,topAcceptedUsersPerYearChart}; | |
}}); | |
define({id: "0fa544ed", mode: "inline", inputs: ["resize","topUsersChart","tenTopUsers","display"], body: async (resize,topUsersChart,tenTopUsers,display) => { | |
display(await( | |
resize((width) => topUsersChart(tenTopUsers, {width})) | |
)) | |
}}); | |
define({id: "04e33544", mode: "inline", inputs: ["resize","topAcceptedUsersPerYearChart","topAcceptedUsersPerYear","display"], body: async (resize,topAcceptedUsersPerYearChart,topAcceptedUsersPerYear,display) => { | |
display(await( | |
resize((width) => topAcceptedUsersPerYearChart(topAcceptedUsersPerYear, {width})) | |
)) | |
}}); | |
define({id: "28e5ebab-1", mode: "inline", inputs: ["url","display"], body: async (url,display) => { | |
display(await( | |
url | |
)) | |
}}); | |
define({id: "78a1e913", mode: "inline", inputs: ["d3","posts","display"], body: async (d3,posts,display) => { | |
display(await( | |
d3.min(posts, d => d.created_at).getFullYear() | |
)) | |
}}); | |
define({id: "93beff2d", mode: "inline", inputs: ["d3","posts","display"], body: async (d3,posts,display) => { | |
display(await( | |
d3.max(posts, d => d.created_at).getFullYear() | |
)) | |
}}); | |
</script> | |
<div id="observablehq-center"> | |
<main id="observablehq-main" class="observablehq"> | |
<h1 id="forum-dashboard" tabindex="-1"><a class="observablehq-header-anchor" href="#forum-dashboard">Forum Dashboard</a></h1> | |
<!-- Load and transform the data --> | |
<div class="observablehq observablehq--block"><!--:e35ec5a1:--></div> | |
<p>Statistics for the <a href="./$%7Burl%7D"><observablehq-loading></observablehq-loading><!--:28e5ebab:--></a> forum.</p> | |
<h2 id="trends-over-time" tabindex="-1"><a class="observablehq-header-anchor" href="#trends-over-time">Trends over time</a></h2> | |
<!-- Cards with big numbers --> | |
<div class="grid grid-cols-4"> | |
<div class="card"> | |
<h2>Years</h2> | |
<span class="big"><observablehq-loading></observablehq-loading><!--:8404f401:-->—<observablehq-loading></observablehq-loading><!--:18528b79:--></span> | |
</div> | |
<div class="card"> | |
<h2>Topics</h2> | |
<span class="big"><observablehq-loading></observablehq-loading><!--:ebe544d8:--></span> | |
<p>Topics are the forum's questions, or threads.</p> | |
</div> | |
<div class="card"> | |
<h2>Posts</h2> | |
<span class="big"><observablehq-loading></observablehq-loading><!--:a9ac2ae4:--></span> | |
<p>The posts are comments in a thread, ie the answers to a question. The topics are not included.</p> | |
</div> | |
<!-- <div class="card"> | |
<h2>Posts per topic</h2> | |
<span class="big">${(posts.length / topics.size).toLocaleString("en-US", { | |
minimumFractionDigits: 2, | |
maximumFractionDigits: 2, | |
})}</span> | |
</div> | |
<div class="card"> | |
<h2>Users per topic</h2> | |
<span class="big">${(d3.sum(topics, d => d[1].users.size) / topics.size).toLocaleString("en-US", { | |
minimumFractionDigits: 2, | |
maximumFractionDigits: 2, | |
})}</span> | |
</div> --> | |
<!-- <div class="card"> | |
<h2>Categories</h2> | |
<span class="big">${categories.length.toLocaleString("en-US")}</span> | |
</div> --> | |
<div class="card"> | |
<h2>Users</h2> | |
<span class="big"><observablehq-loading></observablehq-loading><!--:9f3c82c4:--></span> | |
</div> | |
</div> | |
<!-- Plot of monthly active users --> | |
<div class="observablehq observablehq--block"><!--:3939618f:--></div> | |
<!-- Plot of posts history --> | |
<div class="observablehq observablehq--block"><!--:694a2e8e:--></div> | |
<div class="grid grid-cols-2"> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:df5d29c1:--> | |
</div> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:8db957c1:--> | |
</div> | |
</div> | |
<h2 id="topics" tabindex="-1"><a class="observablehq-header-anchor" href="#topics">Topics</a></h2> | |
<!-- Plot of topics per category --> | |
<div class="observablehq observablehq--block"><!--:35e85ade:--></div> | |
<!-- Posts per topic --> | |
<div class="observablehq observablehq--block"><!--:4933adab:--></div> | |
<div class="grid grid-cols-2"> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:e3ec0bba:--> | |
</div> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:4e86c617:--> | |
</div> | |
</div> | |
<h2 id="users" tabindex="-1"><a class="observablehq-header-anchor" href="#users">Users</a></h2> | |
<!-- Top users --> | |
<div class="observablehq observablehq--block"><!--:1e4bc9aa:--></div> | |
<div class="grid grid-cols-2"> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:0fa544ed:--> | |
</div> | |
<!-- | |
<div class="card"> | |
${resize((width) => topAcceptedUsersChart(tenTopAcceptedUsers, {width}))} | |
</div> | |
--> | |
<div class="card"> | |
<observablehq-loading></observablehq-loading><!--:04e33544:--> | |
</div> | |
</div> | |
<h2 id="data-and-code" tabindex="-1"><a class="observablehq-header-anchor" href="#data-and-code">Data and code</a></h2> | |
<p>The data of <a href="./$%7Burl%7D"><observablehq-loading></observablehq-loading><!--:28e5ebab-1:--></a> from <observablehq-loading></observablehq-loading><!--:78a1e913:--> to <observablehq-loading></observablehq-loading><!--:93beff2d:--> was downloaded using the <a href="https://docs.discourse.org/" target="_blank" rel="noopener noreferrer">Discourse API</a>.</p> | |
<p>The code is available on <a href="https://github.com/severo/discourse-dashboard" target="_blank" rel="noopener noreferrer">GitHub</a>.</p> | |
</main> | |
<footer id="observablehq-footer"> | |
<div>Built with <a href="https://observablehq.com/" target="_blank" rel="noopener noreferrer">Observable</a> on <a title="2024-09-25T21:18:02">Sep 25, 2024</a>.</div> | |
</footer> | |
</div> | |