The avatar for @vizzuhq
Vizzu
Open-source JavaScript library designed to easily create animated data visualizations and data stories. Repo: https://github.com/vizzuhq/vizzu-lib/
Published
Edited
Nov 24, 2021
Fork of Google Sheets Starter
Insert cell
# Stackoverflow survey 2021 results - Interactive Explorer, brought to you by [Vizzu](http://vizzuhq.com) <br>
### <br> Change the contents of the charts with the drop-downs, radio buttons and checkboxes on the page. <br><br>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart.animate({
data: {
filter: record => (record[questiony] != 0 && record[questionx] != 0 // || countries.includes(record['Country code'])) && record['Age group'] != 'All' && answer.includes(record['Answer'])
)},
config: {
channels: {
x: { set: (orientation == "x" ? [questionx, measure] : [questionx]) },
y: { set: (orientation == "y" ? [questiony, measure] : [questiony]) },
color: [questionx]
},
split: split,
sort: order,
},
style: {
paddingRight: 0,
plot: { paddingLeft: 200,
paddingRight: 20,
paddingTop: '2%',
paddingBottom: '7%',
}}
});
Insert cell
viewof filter = Inputs.select(filterMap,
{ label: "Tech. category", value: ""}
)
Insert cell
Insert cell
Insert cell
viewof techselect = Inputs.select(techMap, {label: "Technologies", multiple: true})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = ({
series: Object.entries(rawdata[0]).map(
([key, value]) =>
({
name: key,
type: (isNaN(value) || value === null) && !key.startsWith('Years') ? "dimension" : "measure"
})
),
records: rawdata.map( record => {
if (!record['YearsCode']) record['YearsCode'] = 0;
else if (String(record['YearsCode']).startsWith('Less')) record['YearsCode'] = 0;
else if (String(record['YearsCode']).startsWith('More')) record['YearsCode'] = 50;
if (!record['YearsCodePro']) record['YearsCodePro'] = 0;
else if (String(record['YearsCodePro']).startsWith('Less')) record['YearsCodePro'] = 0;
else if (String(record['YearsCodePro']).startsWith('More')) record['YearsCodePro'] = 50;
return Object.values(record)
.map(value => (value ? value : 0))
})
})
Insert cell
Vizzu = (await import('https://cdn.jsdelivr.net/npm/vizzu@0.3.3/dist/vizzu.min.js')).default;

Insert cell
chart = new Vizzu(myVizzu, { data });
Insert cell
chart.initializing.then(chart => {
chart.feature('tooltip',true);
return chart;
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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