The avatar for @tiborudvari
Tibor Udvari
Master Media Design Student at HEAD Geneva
Public
Processing Project Visualizations
Edited
Oct 14, 2023
1 star
3
Processing Project Visualizations
Processing Git ContributionsRange of Alpha forum contributionsProcessing Releases DataEdge BundlingForce Directed GraphProcessing Libraries
The story of the Processing project told through data
Utils for loading HuggingFace dataset on the Processing Project
Insert cell
Insert cell
Insert cell
toc()
Insert cell
Insert cell
posts = d3.csv("https://raw.githubusercontent.com/TiborUdvari/ma-thesis/main/03-data/alpha-forum-data.csv")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
JSON.stringify(posts.slice(0, 2))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
commits = d3.csv("https://raw.githubusercontent.com/TiborUdvari/ma-thesis/main/03-data/processing-commits-flat.csv")
Insert cell
Insert cell
githubDuplicates = {
const duplicates = {
'benfry': 'Ben Fry',
'REAS': 'Casey Reas',
'shiffman': 'Daniel Shiffman',
}
return duplicates
}
Insert cell
githubDuplicates.benfry
Insert cell
commits
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
title: "Top 12 contributors by code commits",
width: 800,
marginLeft: 260,
y: {label: null},
x: {grid: true},
marks: [
Plot.barX(commitsTable, Plot.groupY({x: "count"}, {y: "Name", sort: {y: "x", reverse: true, limit: 12}})),
Plot.ruleX([0])
]
})


Insert cell
commitsTable
X*
—
Y*
—
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
title: "Commits over time",
marks: [
Plot.ruleY([0]),
Plot.lineY(
commitsTable,
Plot.binX({ y: "count" }, { x: "commit.author.date", tip: true })
)
]
})
Insert cell
Insert cell
Insert cell
processing-alpha-reduced-for-observable.csv
SELECT p.author, p.date
FROM ( SELECT author, count(*)::Int as posts FROM "processing-alpha-reduced-for-observable"
GROUP BY author
ORDER BY posts DESC
LIMIT 25
) AS top_authors
JOIN "processing-alpha-reduced-for-observable" AS p ON p.author = top_authors.author;

Insert cell
data
X
date
Y
author
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
//screenshot20230916At011830 = FileAttachment("Screenshot 2023-09-16 at 01.18.30.png").image({width: 500})
// Ben Fry. https://www.youtube.com/watch?v=Xs21XFN8XrA&t=1013s
Insert cell
postsTable
X
date
Y
count
topic
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(
postsTable,
Plot.binX({ y: "count" }, { x: "date", y: "topic", tip: true })
)
]
})
Insert cell
Insert cell
import { toSVG } from "@fil/plot-figure-to-svg"
Insert cell
import {toc} from "@mbostock/toc"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more