Published
Edited
Jan 15, 2020
1 fork
#Your task is to design a static (i.e., single image) visualization that you believe effectively communicates this data and provide a short write-up (no more than 4 paragraphs) describing your design. While you must use the data set given, note that you are free to filter, transform and augment the data as you see fit to highlight the elements that you think are most important in the data set.
#As different visualizations can emphasize different aspects of a data set, you should document what aspects of the data you are attempting to most effectively communicate. In short, what story (or stories) are you trying to tell? Just as important, also note which aspects of the data might be obscured or down-played due to your visualization design.
#In your write-up, you should provide a rigorous rationale for your design decisions. Document the visual encodings you used and why they are appropriate for the data. These decisions include the choice of visualization type, size, color, scale, and other visual elements, as well as the use of sorting or other data transformations. How do these decisions facilitate effective communication?
cols = {
let cols = [];
for (let key in data[0]) {
if (key !== 'Bacteria' && data[0].hasOwnProperty(key)) {
cols.push({
name: key
});
}
}
return cols;
}
grid = {
let grid = [];
// Start filling up the data grid.
let i = 0;
for (let row of data) {
let id = row.ID;
let rowValues = [];
for (let col of cols) {
rowValues.push({
value: parseFloat(data[i][col.name])
});
}
grid.push(rowValues);
i++;
}
return grid;
}
normalizedGrid = {
let normalizedGrid = [];
for (let row of grid) {
let minimum = row.reduce((currentMin, el) => Math.min(currentMin, el.value), Infinity);
let maximum = row.reduce((currentMax, el) => Math.max(currentMax, el.value), -Infinity);
normalizedGrid.push(row.map(el => {
return {
value: maximum !== 0 ? (el.value - minimum) / maximum : 0
}
}));
}
return normalizedGrid;
}
heatmapDiv = html`<div></div>`;
heatmap = new unipeptHeatmap.Heatmap(heatmapDiv, {
rows: rows,
columns: cols,
values: normalizedGrid
});
heatmap.cluster();
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.
