Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Typewriter
Simple chatbot generator
html`
<div class='chatbot'>
${ data.map(d =>
html `
<div class='${d.block} block'>
<div class='${d.class}' data-title='${d.to}'>
${d.text}
</div>
</div>
`
)}
</div>
<div class='bottom'></div>
`
{
showGroup('.intro');
$('.choice').click(function() {
let classes = $(this).attr('class');
let thisClass = classes.split(' ')[1];
$('.' + thisClass).addClass('notSelected');
$(this).removeClass('notSelected')
.addClass('selected');
// show To class
let toClass = $(this).data('title');
showGroup('.' + toClass);
});
}
function showGroup(group) {
$(group).each(function(index) {
let thisDelay = .53*index + .4;
$(this).addClass('show');
$(this).css('transition-delay', thisDelay+'s')
.css('-webkit-transition-duration', '.6s')
.css('transition-duration', '.6s');
});
}
data = [
{ 'block': 'comments intro', 'class':'comment', 'text': 'Do you like a coffee?' },
{ 'block': 'choices intro', 'class':'choice askcoffee', 'text': 'Yes', 'to': 'yescoffee' },
{ 'block': 'choices intro', 'class':'choice askcoffee', 'text': 'No', 'to': 'nocoffee' },
{ 'block': 'comments yescoffee', 'class':'comment', 'text': "Coffee is great" },
{ 'block': 'comments yescoffee', 'class':'comment', 'text': "What kind of coffee do you like?" },
{ 'block': 'choices yescoffee', 'class':'choice coffeetype', 'text': 'Americano', 'to': 'toamericano' },
{ 'block': 'choices yescoffee', 'class':'choice coffeetype', 'text': 'Latte', 'to': 'tolatte' },
{ 'block': 'comments toamericano ', 'class':'comment', 'text': 'I love Americano!' },
{ 'block': 'comments tolatte', 'class':'comment', 'text': 'I like it too!' },
{ 'block': 'comments nocoffee', 'class':'comment', 'text': "What else do you like?" },
{ 'block': 'choices nocoffee', 'class':'choice othertype', 'text': "Water", 'to': 'towater' },
{ 'block': 'choices nocoffee', 'class':'choice othertype', 'text': "Tea", 'to': 'totea' },
{ 'block': 'comments towater totea', 'class':'comment', 'text': 'Sounds good!' }
]
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.
