Published
Edited
May 15, 2018
2 forks
1 star
function transformJson(jsonData) {
// If your jsonData isn't just a flat array, access the flat array of items here.
// e.g. for a file: { data: [point1, point2, ...] }, you'd do return jsonData.data;
// jsonData.forEach((d, i) => {
// d.x = Math.cos(i);
// d.y = Math.sin(i);
// });
return jsonData;
}
css = html`
<i>CSS styling defined here.</i>
<style>
.vis-container {
position: relative;
}
.highlight-svg {
// pointer-events: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
}
.highlight-circle {
fill: tomato;
fill-opacity: 0.5;
stroke: tomato;
stroke-width: 1px;
}
.pretty-table {
overflow: auto;
display: block;
max-width: 100%;
max-height: 600px;
}
.legend-swatch {
width: 80px;
height: 40px;
display: block;
margin-bottom: 4px;
}
.legend-item {
font-size: 16px;
background: #fff;
border-radius: 4px;
border: 1px solid #ccc;
margin-right: 4px;
margin-bottom: 4px;
cursor: pointer;
opacity: 0.6;
}
.legend-item.active {
opacity: 1;
}
.legend-item:hover {
background: #eee;
opacity: 1;
}
input[type="text"] {
font-size: 16px;
padding: 4px;
}
select {
font-size: 16px;
padding: 4px;
}
.highlight-info-container {
position: absolute;
background: rgba(255,255,255,0.95);
border: 1px solid #ccc;
padding: 4px;
max-width: 400px;
z-index: 1000;
pointer-events: none;
}
</style>
`
data = {
return Files.text(inputFile)
.then(text => {
console.log('got inputFile', inputFile.name);
let rawData;
// handle parsing CSV
if (/\.csv$/.test(inputFile.name)) {
rawData = d3.csvParse(text, d => {
// try to be smart about converting types
Object.keys(d).forEach(key => {
if (d[key] === "true") {
d[key] = true;
} else if (d[key] === "false") {
d[key] = false;
} else if (d[key] === "null" || d[key] === "undefined" || d[key] === "") {
d[key] = undefined;
} else if (!isNaN(+d[key])) {
d[key] = +d[key]
}
});
return d;
});
} else {
rawData = JSON.parse(text);
}
let transformedData = transformJson(rawData);
if (dataType.type === 'tree') {
try {
transformedData = treeLayout(transformedData, dataType.idKey, dataType.parentKey, dataType.sortKey);
} catch (e) { console.error(e) }
}
// ensure x, y, and id are present for each data point
rawData.forEach((d, i) => {
if (d.id == null) {
d.id = makeId()
}
});
// assign random x and y values if no x and y provided
if (transformedData.every(d => d.x == null && d.y == null)) {
randomLayout(transformedData);
}
return transformedData;
})
}
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.
