Published
Edited
May 25, 2020
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {rasterize, serialize} from '@mbostock/saving-svg'
Insert cell
html`
${DOM.download(await rasterize(vennChart), `$venn-diagram.png`, 'Save as PNG')}
${DOM.download(await serialize(vennChart), `$venn-diagram.svg`, 'Save as SVG')}
`
Insert cell
Insert cell
nationalityData = FileAttachment("nationality_distribution@2.csv").text()
Insert cell
import {chart as nChart, viewof order, update as nUpdate, styles as nStyle} with {nationalityData as dataSource} from "@dunderdan/sortable-bar-chart-of-wot-nationality"

Insert cell
viewofNationalityOrder = viewof order

Insert cell
nationalityChart = nChart
Insert cell
nationalityUpdate = nUpdate
Insert cell
nationalityStyle = nStyle
Insert cell
nationalityPeople = FileAttachment("nationality-ordered@1.csv").text()
Insert cell
import { chart as peopleChart, tooltip as peopleTooltip } with { nationalityPeople as dataSource} from "@dunderdan/blue-noise-people"
Insert cell
pplChart = peopleChart
Insert cell
pplTooltip = peopleTooltip
Insert cell
md`## Continue Sunburst`
Insert cell
continueData = FileAttachment("continue-hierarchy-sunburst@1.csv").text()
Insert cell
import { viewof sunburst as cSunburst, legends as cLegends, breadcrumb as cBreadcrumbs } with {continueData as dataSource} from "@dunderdan/continuing-sunburst"
Insert cell
Insert cell
Insert cell
continueSunburst = viewof cSunburst
Insert cell
md`## Complete Sunburst`
Insert cell
completeData = FileAttachment("complete-hierarchy-sunburst@1.csv").text()
Insert cell
import { breadcrumb as cpBreadcrumb, legends as cpLegends, viewof sunburst as cpSunburst} with {completeData as dataSource } from "@dunderdan/modified-sequences-sunburst"

Insert cell
Insert cell
Insert cell
completeSunburst = viewof cpSunburst
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

leavingPplNationality = FileAttachment("leaving-nationality-ordered.csv").text()
Insert cell
leave = true
Insert cell

import { chart as leavingPeopleChart } with { leavingPplNationality as dataSource, leave as leaving} from "@dunderdan/blue-noise-people"
Insert cell

leavingPplChart = leavingPeopleChart
Insert cell

completeLeavingData = FileAttachment("complete-hierarchy-sunburst-leaving.csv").text()
Insert cell

import { breadcrumb as lBreadcrumb, legends as lLegends, viewof sunburst as lSunburst} with {completeLeavingData as dataSource } from "@dunderdan/modified-sequences-sunburst"
Insert cell
leavingBreadcrumb = lBreadcrumb

Insert cell
leavingSunburst = viewof lSunburst
Insert cell
md`## Word Clouds`
Insert cell
md`### Hair`
Insert cell
hairData = FileAttachment("hair-color.json").json()
Insert cell
hairDivider = 0.4
Insert cell
import {chart as hChart} with {hairData as dataSource, hairDivider as divider} from "@dunderdan/word-cloud"
Insert cell
hairCHart = hChart
Insert cell

eyeData = FileAttachment("eye.json").json()
Insert cell
eyeDivider = 0.3
Insert cell
import {chart as eChart} with {eyeData as dataSource, eyeDivider as divider}from "@dunderdan/word-cloud"
Insert cell
eyeChart = eChart
Insert cell
heightData = FileAttachment("height.json").json()
Insert cell
heightDivider = 0.3
Insert cell
import {chart as hgChart} with {heightData as dataSource, heightDivider as divider}from "@dunderdan/word-cloud"
Insert cell
heightChart = hgChart
Insert cell
buildData = FileAttachment("build.json").json()
Insert cell
buildDivider = 0.3
Insert cell
import {chart as bdChart} with {buildData as dataSource, buildDivider as divider} from "@dunderdan/word-cloud"
Insert cell
buildChart = bdChart
Insert cell
occupationData = FileAttachment("occupation.json").json()
Insert cell
occupationDivider = 0.4
Insert cell
import {chart as occChart} with {occupationData as dataSource, occupationDivider as divider} from "@dunderdan/word-cloud"
Insert cell
occupationChart = occChart
Insert cell
occupationScale = 20
Insert cell

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.
Learn more