Skip to content

Commit

Permalink
#8 make colors by timestep and build scatterplots in a loop so i can …
Browse files Browse the repository at this point in the history 
…add more models if i want
  • Loading branch information
@vskode
vskode committed Nov 15, 2024
1 parent 561811d commit 9fe8341
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 74 deletions.
45 changes: 25 additions & 20 deletions frontend/src/MainLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,20 @@ export const MainLayout = ({ width = 700, height = 400 }) => {
const [cursorPosition, setCursorPosition] = useState();
const [embeddings, setEmbeddings] = useState(null);
const [loading, setLoading] = useState(true);
const filePath1 = "/files/embeddings/2024-11-12_17-08___umap-bird_dawnchorus-birdnet/borneo_sunrise_20240208-063500_birdnet_umap.json";
const filePath2 = "/files/embeddings/2024-11-12_17-08___umap-bird_dawnchorus-perch/borneo_sunrise_20240208-063500_perch_umap.json";
const filePath1 = "/files/embeddings/2024-11-15_17-26___umap-bird_dawnchorus-birdnet/borneo_sunrise_20240208-063500_birdnet_umap.json";
const filePath2 = "/files/embeddings/2024-11-15_17-25___umap-bird_dawnchorus-perch/borneo_sunrise_20240208-063500_perch_umap.json";
const filepaths = [filePath1, filePath2];
// response = {};

useEffect(() => {
const fetchData = async () => {
try {
const response1 = await axios.get(filePath1);
const response2 = await axios.get(filePath2);
setEmbeddings({ 'data1': response1.data, 'data2': response2.data });
const response_dict = {};
for (let i = 0; i < filepaths.length; i++) {
const response = await axios.get(filepaths[i]);
response_dict[String('data'+(i+1))] = response.data;
}
setEmbeddings(response_dict);
} catch (error) {
console.error("Error fetching data:", error);
} finally {
Expand All @@ -26,31 +31,31 @@ export const MainLayout = ({ width = 700, height = 400 }) => {

fetchData();
}, []);

if (loading) {
return <div>Loading...</div>;
}

return (
<div style={{ display: "flex" }}>
<ScatterPlot
const plots = [];
// for (embedding in embeddings) {
for (let i = 0; i < Object.keys(embeddings).length; i++) {
plots.push(
<ScatterPlot
width={width / 2}
height={height}
data={embeddings.data1}
data={embeddings[String('data'+(i+1))]}
setSpecData={setSpecData}
cursorPosition={cursorPosition}
setCursorPosition={setCursorPosition}
color={"#e85252"}
/>
<ScatterPlot
width={width / 2}
height={height}
data={embeddings.data2}
setSpecData={setSpecData}
cursorPosition={cursorPosition}
setCursorPosition={setCursorPosition}
color={"#6689c6"}
/>
/>
)
}


return (
<div style={{ display: "flex" }}>
{plots}
<MakeSpectrogram
data={specData}
/>
Expand Down
73 changes: 20 additions & 53 deletions frontend/src/ScatterPlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ export const ScatterPlot = ({
.domain([xMin, xMax || 0])
.range([0, boundsWidth]);
}, [data, width]);

// t axis
const [tMin, tMax] = d3.extent(data.timestamp);
const tScale = useMemo(() => {
return d3
.scaleLinear()
.domain([tMin, tMax || 0]);
}, [data, width]);

// Render the X and Y axis using d3.js, not react
useEffect(() => {
Expand Down Expand Up @@ -70,26 +78,10 @@ export const ScatterPlot = ({
'meta': data.metadata,
};
PairingVariable = closest['z']
// let i = 0;
// for (const point of data.x) {
// const xDist = Math.abs(point - x)/xMax;
// const distance = xDist;
// if (distance < minDistance) {
// minDistance = distance;
// // closest = point;
// closest = {
// 'x': data.x[i],
// 'y': data.y[i],
// 'z': data.timestamp[i],
// 'meta': data.metadata,
// };
// PairingVariable = closest['z']
// }
// i++
// }
}
else {
let index = data.timestamp.findIndex((e) => e == PairingVariable)
let index = argMin(data.timestamp.map((e, i) => Math.abs(e-PairingVariable)))
PairingVariable = data.timestamp[index]
closest = {
'x': data.x[index],
'y': data.y[index],
Expand Down Expand Up @@ -117,48 +109,17 @@ export const ScatterPlot = ({
event.stopPropagation(); // Prevent event from being swallowed by other elements
console.log("Circle clicked:", dataPoint);
const url = "http://127.0.0.1:8000/";
let speccy = null;
axios.post(url+'getDataPoint/', dataPoint)
.then(response => {
console.log(response.data)
speccy = response.data.spectrogram_data;
setSpecData(speccy)
setSpecData(response.data.spectrogram_data)
})
.catch(function (error) {
// handle error
console.log(error);
})
};

// const Cursor = (index, color) => {
// console.log(index)
// const width = 150;
// const height = 50;
// const x = xScale(data.x[index])
// const y = yScale(data.y[index])
// {<>
// <circle
// cx={x}
// cy={y}
// r={5}
// fill={color}
// />
// <rect
// x={x-width}
// y={y-height}
// width={width}
// height={height}
// fill="#AAAAAA"
// visibility={'visible'}></rect>
// <text
// x={x-width+2}
// y={y-height+12}
// fontFamily="Verdana"
// fontSize="12"
// fill="white">{PairingVariable}</text>
// </>}
// }

const points = [];
for (let i = 0; i <= data.x.length; i++){
points.push(
Expand All @@ -168,7 +129,7 @@ export const ScatterPlot = ({
cx={xScale(data.x[i])} // position on the X axis
cy={yScale(data.y[i])} // on the Y axis
opacity={1}
stroke="#cb1dd1"
stroke={toColor(data.timestamp[i])}
fill="#ABABAB"
fillOpacity={0.2}
strokeWidth={1}
Expand All @@ -178,6 +139,12 @@ export const ScatterPlot = ({
)
}

function toColor(num) {
const col = tScale(num);
const c = d3['interpolateViridis'](col);
return c;
}

return (
<div>
<svg width={width} height={height}>
Expand All @@ -192,7 +159,7 @@ export const ScatterPlot = ({
height={boundsHeight}
x={xScale(getClosestPoint(cursorPosition)?.x)}
y={yScale(getClosestPoint(cursorPosition)?.y)}
color={color}
color={toColor(getClosestPoint(cursorPosition)?.z)}
/>
)}
<rect
Expand Down Expand Up @@ -221,7 +188,7 @@ export const ScatterPlot = ({

const Cursor = ({ x, y, color }) => {

const width = 150;
const width = 50;
const height = 50;

return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/Spectrogram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const MakeSpectrogram = ({
}) => {
const [initSpec, setInitSpec] = useState(null);
let specData = data;
const fileSpec = "test.json";
const fileSpec = "init_spec.json";
const canvasRef = useRef(null);

if (!initSpec) {
Expand Down

0 comments on commit 9fe8341

Please sign in to comment.