Published
Edited
Apr 28, 2020
4 stars
chart = vl.markRect({tooltip: {"content": "encoding"}})
.data(pairedInterests)
.encode(
vl.x().fieldN('a').sort(interestsSorted),
vl.y().fieldN('b').sort(interestsSorted),
vl.color().fieldQ('n'),
// vl.tooltip().fieldN('tooltip')
)
.render()
vl.markBar({tooltip: {"content": "encoding"}})
.data(interestsFiltered)
.encode(
vl.y().fieldN('interest').sort('-x'),
vl.x().fieldQ('*').aggregate("count"),
vl.color().fieldQ('*').aggregate("count"),
).render()
survey = d3.csv("https://futureofcoding.org/episodes/046/survey-results.csv")
interests = survey
.map(x=>x["What FoC topics interest you most?"])
.map(x=>x.split(';'))
.flatMap((x,id) => x.map(interest=>({id, interest})))
n_respondents = survey
.filter(x=> workingOn.includes(x[filterQ])).length
_pairedInterests = survey
.filter(x=> workingOn.includes(x[filterQ]))
.map(x=>x["What FoC topics interest you most?"])
.map(x=>x.split(';'))
.flatMap(x=> d3.cross(x,x))
.map(([a,b]) => ({a,b}))
//.filter(x => x.a <= x.b)
//.filter(x=> interestsSorted.indexOf(x.a) <= interestsSorted.indexOf(x.b))
.filter(x=> interestsSorted.indexOf(x.a) < interestsSorted.length - 12)
.filter(x=> interestsSorted.indexOf(x.b) < interestsSorted.length - 12)
tooltip = x => `${x.n} people who are interested in ${x.a} are also interested in ${x.b}`
pairedInterests = groupedCount(_pairedInterests).map(x=> ({...x, tooltip: tooltip(x)}))
interestsFiltered = survey
.filter(x=> workingOn.includes(x[filterQ]))
.map(x=>x["What FoC topics interest you most?"])
.map(x=>x.split(';'))
.flatMap((x,id) => x.map(interest=>({id, interest})))
counts = _(interests).countBy("interest").toPairs().map(([name, count]) => ({name, count})).value()
interestsSorted = _(counts).sortBy('count').reverse().map(x=>x.name).value()
// what I'm doing instead of dplyr::count(a,b)
groupedCount = X => {
const counts = {};
for (const x of X) {
const key = JSON.stringify(x);
if (!(key in counts)) {
counts[key] = 1;
} else {
counts[key] ++;
}
}
const f = (val,key) => {
return { ...JSON.parse(key), n: val}
}
return _.map(counts, f)
}
d3 = require('d3@5')
import {vl} from '@vega/vega-lite-api'
_ = require('lodash')
import {checkbox, select} from '@jashkenas/inputs'
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.
