Data visualization and analysis at the University of Washington, Seattle.
printTable(await fetch(antibiotics).then(res => res.json())) // JavaScript Fetch API
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: { field: 'Neomycin', type: 'Q' }
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: { field: 'Neomycin', type: 'Q', scale: { type: 'sqrt' } }
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: { field: 'Neomycin', type: 'Q', scale: { type: 'log' } }
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending'
}
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
title: 'Neomycin MIC (μg/ml, reverse log scale)'
}
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
axis: { orient: 'top' },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
}
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Streptomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
title: 'Streptomycin MIC (μg/ml, reverse log scale)'
}
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log' }, sort: 'descending',
title: 'Penicillin MIC (μg/ml, reverse log scale)'
}
}
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
title: 'Penicillin MIC (μg/ml, reverse log scale)'
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle' },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: { field: 'Gram_Staining', type: 'N' }
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Gram_Staining', type: 'N',
scale: { domain: ['negative', 'positive'], range: ['hotpink', 'purple'] }
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Gram_Staining', type: 'N',
scale: { domain: ['negative', 'positive'], range: ['hotpink', 'purple'] },
legend: { orient: 'left' }
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Gram_Staining', type: 'N',
scale: { domain: ['negative', 'positive'], range: ['hotpink', 'purple'] },
legend: null
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: { field: 'Bacteria', type: 'N' }
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Bacteria', type: 'N',
scale: { schema: 'tableau20' }
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: { field: 'Bacteria', type: 'O' }
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Bacteria', type: 'O',
scale: { scheme: 'viridis' }
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
transform: [
{ calculate: 'split(datum.Bacteria, " ")[0]', as: 'Genus' }
],
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Genus', type: 'O',
scale: { scheme: 'tableau20' }
}
},
width: 250,
height: 250
})
render({
mark: { type: 'circle', size: 80 },
data: { url: antibiotics },
transform: [
{
calculate: 'split(datum.Bacteria, " ")[0]',
as: 'Split'
},
{
calculate: 'indexof(["Salmonella", "Staphylococcus", "Streptococcus"], datum.Split) >= 0 ? datum.Split : "Other"',
as: 'Genus'
}
],
encoding: {
x: {
field: 'Neomycin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Neomycin MIC (μg/ml, reverse log scale)'
},
y: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', domain: [0.001, 1000] }, sort: 'descending',
axis: { tickCount: 5 },
title: 'Penicillin MIC (μg/ml, reverse log scale)'
},
color: {
field: 'Genus', type: 'O',
scale: {
domain: ['Salmonella', 'Staphylococcus', 'Streptococcus', 'Other'],
range: ['rgb(76,120,168)', 'rgb(84,162,75)', 'rgb(228,87,86)', 'rgb(121,112,110)']
}
}
},
width: 250,
height: 250
})
render({
mark: { type: 'rect' },
data: { url: antibiotics },
encoding: {
y: {
field: 'Bacteria', type: 'N',
sort: { op: 'max', field: 'Penicillin', order: 'descending' }
},
color: {
field: 'Penicillin', type: 'Q',
scale: { nice: true } // align domain to human-friendly numbers
}
}
})
render({
mark: { type: 'rect' },
data: { url: antibiotics },
encoding: {
y: {
field: 'Bacteria', type: 'N',
sort: { op: 'max', field: 'Penicillin', order: 'descending' },
axis: {
orient: 'right', // orient axis on right side of chart
titleX: 7, // set x-position to 7 pixels right of chart
titleY: -2, // set y-position to 2 pixels above chart
titleAlign: 'left', // use left-aligned text
titleAngle: 0 // undo default title rotation
}
},
color: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', scheme: 'plasma', nice: true },
legend: { titleOrient: 'right', tickCount: 5 },
title: 'Penicillin MIC (μg/ml)'
}
}
})
render({
mark: { type: 'rect' },
data: { url: antibiotics },
encoding: {
y: {
field: 'Bacteria', type: 'N',
sort: { op: 'max', field: 'Penicillin', order: 'descending' },
axis: { orient: 'right', title: null }
},
color: {
field: 'Penicillin', type: 'Q',
scale: { type: 'log', scheme: 'plasma', nice: true },
legend: { titleOrient: 'right', tickCount: 5 },
title: 'Penicillin MIC (μg/ml)'
}
},
title: {
text: 'Penicillin Resistance of Bacterial Strains',
anchor: 'start', // anchor and left-align title
offset: 5 // set title offset from chart
}
})
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.
