I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Plot.plot({
marks: [
Plot.cell(
links
.filter((d) => d.source !== "NA" && d.target !== "Want NA")
.map((d) => ((d.stay = d.source == d.target.replace("Want ", "")), d)),
{
x: (d) => d.source,
y: (d) => d.target,
fill: "pct"
}
)
]
})
fromVar = `${variable}HaveWorkedWith`
toVar = `${variable}WantToWorkWith`
color = {
const concatScale = d3.schemeTableau10.concat(d3.schemeAccent);
// .concat(d3.schemeCategory10);
return d3.scaleOrdinal(
selectedLanguages.length > concatScale.length
? d3.quantize(d3.interpolateSpectral, selectedLanguages.length)
: concatScale
);
}
viewof unrolledResultsAll = aq
.from(results)
.select("ResponseId", fromVar, toVar)
.derive({
fromList: aq.escape((d) => op.split(d[fromVar], ";")),
toList: aq.escape((d) => op.split(d[toVar], ";"))
})
.unroll("fromList")
.unroll("toList")
.view()
viewof unrolledResults = unrolledResultsAll
.filter(
aq.escape(
(d) =>
selectedLanguages.includes(d.fromList) &&
selectedLanguages.includes(d.toList)
)
)
.sample(+sampleSize)
.view()
viewof nodesFrom = unrolledResultsAll
.groupby("fromList")
.count()
.rename({
fromList: "id",
count: "value"
}).view()
viewof nodes = nodesFrom
.union(
unrolledResultsAll.groupby("toList").count()
.derive({
toList: d => `Want ${d.toList}`
})
.rename({
toList: "id",
count: "value"
})
)
.view()
viewof joinedResults = unrolledResults
.join(unrolledResults, (s, t, $) => op.equal(s.ResponseId, t.ResponseId))
.groupby([`fromList_1`, `toList_2`])
.rollup({
fullCount: op.count(),
value: op.distinct("ResponseId_1")
})
.groupby(["fromList_1"])
.derive({
pct: d => d.value/op.sum(d.value),
sum: d => op.sum(d.value),
source: d => d.fromList_1,
target: d => `Want ${d.toList_2}`
})
.orderby("fromList_1")
.view()
links = joinedResults.objects()
// // My library seems too slow for this 🤷🏼
// network = tableToNetwork(unrolledResults.objects().slice(0, 100), {
// matchBy: "ResponseId",
// nodesBy: fromVar,
// linkFrom: fromVar,
// linkTo: toVar,
// selfLinks: true,
// directed: true
// })
vars = Object.keys(results[0])
.filter((d) => d.endsWith("HaveWorkedWith"))
.map((d) => d.replace("HaveWorkedWith", ""))
languages = nodesFrom
.orderby(aq.desc("value"))
.objects()
.map((d) => d.id)
// languages = [
// "JavaScript",
// "SQL",
// "HTML/CSS",
// "Python",
// "Bash/Shell (all shells)",
// "TypeScript",
// "Java",
// "C++",
// "C#",
// "C",
// "PHP",
// "PowerShell",
// "Rust",
// "Go",
// "Kotlin",
// "Dart",
// "Ruby",
// "Assembly",
// "Visual Basic (.Net)",
// "Swift",
// "VBA",
// "MATLAB",
// "Lua",
// "Haskell",
// "Elixir",
// "R",
// "MicroPython",
// "Delphi",
// "Groovy",
// "Perl",
// "Scala",
// "Solidity",
// "F#",
// "Fortran",
// "Erlang",
// "NA",
// "Apex",
// "Clojure",
// "Objective-C",
// "GDScript",
// "OCaml",
// "Zig",
// "Lisp",
// "Crystal",
// "Julia",
// "Cobol",
// "Prolog",
// "Nim",
// "Zephyr"
// ]
results = zip.file("survey_results_public.csv").csv({typed: true})
viewof selectAttrb = searchCheckbox(Object.keys(results[0]))
navio(results, {attribs: selectAttrb})
fmtPct = (f => d => `${f(d)}`)(d3.format(",.1%"))
// schema = zip.file("survey_results_schema.csv").csv({typed: true})
import {aq, op} from "@uwdata/arquero"
import {navio} from "@john-guerra/navio"
import { SankeyChart } from "@john-guerra/sankey-diagram-component"
zip = FileAttachment("stack-overflow-developer-survey-2024.zip").zip()
import {PersistInput} from "@john-guerra/persist-input"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import {vl} from "@vega/vega-lite-api-v5"
links
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
