viz.js
import { csvParse, select } from 'd3';
export const viz = (
container,
{ state, setState }
) => {
select(container)
.selectAll('pre')
.data([null])
.join('pre')
.text(JSON.stringify(state.data, null, 2));
// state.data could be:
// * undefined
// * 'LOADING'
// * An array of objects
const { data } = state;
if (data === undefined) {
setState((state) => ({
...state,
data: 'LOADING',
}));
fetch('data.csv')
.then((response) => response.text())
.then((csvString) => {
const data = csvParse(csvString);
for (const d of data) {
d.petal_length = +d.petal_length;
d.petal_width = +d.petal_width;
d.sepal_length = +d.sepal_length;
d.sepal_width = +d.sepal_width;
}
