avilella
commented
3 days ago See my current code:
``
// src/index.js
import as vega from 'vega';
import React, { useEffect } from 'react';
import as ReactDOM from 'react-dom';
import as SandDanceReact from '@msrvida/sanddance-react';
//import as fluentui from '@fluentui/react';
import Papa from 'papaparse';
// import "@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css";
// import "./style.css";
function App() {
SandDanceReact.use(React, ReactDOM, vega);
// fluentui.initializeIcons();
// use(fluentui, React, ReactDOM, vega);
const [data, setData] = React.useState([]);
const [insight, setInsight] = React.useState({
columns: {},
scheme: "set1",
chart: "scatterplot",
view: "2d" });
const handleFileUpload = (event) => {
const file = event.target.files[0];
if (file) {
Papa.parse(file, {
header: true,
dynamicTyping: true,
complete: (result) => {
const csvData = result.data;
// Check if required columns exist in the CSV
const columns = Object.keys(csvData[0]);
if (columns.includes("x") && columns.includes("y") && columns.includes("cluster_id")) {
setInsight({
columns: {
x: "x",
y: "y",
color: "cluster_id",
uid: "CLONE_ID"
},
scheme: "set1",
chart: "scatterplot",
view: "2d",
size: {
height: 1200,
width: 1200
}
});
setData(csvData);
} else {
console.error('CSV file must contain "x", "y", and "cluster_id" columns.');
}
},
error: (error) => {
console.error('Error parsing CSV file:', error);
}
});
}
};
return (
<div id="app">
ZetDance v0.1.9<input type="file" accept=".csv" onChange={handleFileUpload} />
<SandDanceReact.Viewer
data={data}
insight={insight}
/>
</div>
);}
ReactDOM.render(
Also:
<!DOCTYPE html>
Also:
package.json{
"name": "sanddance-react-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack serve --open",
"build": "webpack"},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"papaparse": "^5.4.1",
"react": "^17",
"react-dom": "^17",
"@fluentui/react": "^8",
"@msrvida/sanddance-explorer": "^4.1.6",
"@msrvida/sanddance-react": "^4.0.2",
"react-scripts": "5.0.1",
"vega": "^5.25.0"},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"babel-loader": "^9.1.3",
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"}
}
Also:
webpack.config.js
{
"name": "sanddance-react-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack serve --open",
"build": "webpack"},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"papaparse": "^5.4.1",
"react": "^17",
"react-dom": "^17",
"@fluentui/react": "^8",
"@msrvida/sanddance-explorer": "^4.1.6",
"@msrvida/sanddance-react": "^4.0.2",
"react-scripts": "5.0.1",
"vega": "^5.25.0"},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"babel-loader": "^9.1.3",
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"}
}
danmarshall
Hi, I've modified the initial SandDance React example to load data from a .csv file and put the x and y values of the columns in a 2d scatterplot, with colour being the cluster_id column.
The outcome is a tiny little chart area on top, and the Legend and Select & Filter sections are below, whereas I rather have them on the right-hand side, like it is shown in the example scatterplotTest, which is not a React example. (https://microsoft.github.io/SandDance/tests/v3/umd/scatterplotTest.html).
See the image below:
How do I make the chart occupy the majority of the screen, and the Legend and Select & Filter sections on the right, like in the test (see screenshot below)?