diff --git a/package.json b/package.json index a72ad98..123a2bc 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "d3-scale": "^4.0.2", "d3-scale-chromatic": "^3.1.0", "deck.gl": "^9.1.1", + "hyparquet": "^1.8.4", "maplibre-gl": "^5.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/public/f.parquet b/public/f.parquet new file mode 100644 index 0000000..3444d4a Binary files /dev/null and b/public/f.parquet differ diff --git a/src/App2.tsx b/src/App2.tsx new file mode 100644 index 0000000..36150e3 --- /dev/null +++ b/src/App2.tsx @@ -0,0 +1,84 @@ +import { scaleLinear } from 'd3-scale'; +import { interpolateViridis } from 'd3-scale-chromatic'; +import { DeckGL, GridCellLayer } from 'deck.gl'; +import 'maplibre-gl/dist/maplibre-gl.css'; +import Map from 'react-map-gl/maplibre'; + +import { asyncBufferFromUrl, parquetRead } from 'hyparquet'; +import { useState } from 'react'; + +let data: any +await parquetRead({ + file: await asyncBufferFromUrl({ url: "./f.parquet" }), + onComplete: d => data = d +}) + +const grid = data.map(d => { + return { + id: d[0], + x: d[1], + y: d[2], + } +}) + +const colorScale = scaleLinear().domain([0, 10]).range([interpolateViridis(0), interpolateViridis(1)]); + +function App2() { + const [clickedSquare, setClickedSquare] = useState(null); + + const clickedData = clickedSquare && data.find(d => d[0] === clickedSquare.object.id); + const clickedGrid = clickedSquare && clickedData[3].map((element: any, i: number) => { + return { + ...grid.find(d => d.id === element), + value: clickedData[4][i] + } + }) + + + const layers = [ + new GridCellLayer({ + id: 'deckgl-grid', + //@ts-ignore + data: grid, + getPosition: d => [d.x, d.y], + getFillColor: [100, 100, 100, 100], + //@ts-ignore + cellSize: 505, + extruded: false, + pickable: true, + autoHighlight: true, + highlightColor: [0, 255, 0], + onClick: info => setClickedSquare(info) + }), + new GridCellLayer({ + id: 'clicked-grid', + //@ts-ignore + data: clickedGrid, + getPosition: d => [d.x, d.y], + //@ts-ignore + getFillColor: d => colorScale(Number(d.value)).slice(4, -1).split(", ").map(Number), + cellSize: 505, + extruded: false + }), + ]; + + return ( + <> + "crosshair"} + > + + + + + ); +} + +export default App2 diff --git a/src/main.tsx b/src/main.tsx index 611a792..dd4f310 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,14 +3,19 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' +import App2 from './App2.tsx' import './index.css' const queryClient = new QueryClient() +const currentUrl = new URL(window.location.href) + +console.log(currentUrl.searchParams.get('page')) + createRoot(document.getElementById('root')!).render( - + {currentUrl.searchParams.get('page') == '2' ? : } , diff --git a/yarn.lock b/yarn.lock index ef0353b..d9c6d5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2933,6 +2933,11 @@ hasown@^2.0.2: dependencies: function-bind "^1.1.2" +hyparquet@^1.8.4: + version "1.8.4" + resolved "https://registry.yarnpkg.com/hyparquet/-/hyparquet-1.8.4.tgz#073504baed10d10a8a6b44094765a5e29c57a89d" + integrity sha512-D/7xIqcapCBAjloymZEPKFXU7w88GcJ5ApjwoOV9DoGSg/t529Z9TdO3zBdMuv/OBehgMdy5vhybtjLplKSa+w== + iconv-lite@0.4: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"