From 0fb0468829c77bb26b23035ef7578cb3f5400cc4 Mon Sep 17 00:00:00 2001
From: Kenny Sheftel <kennysheftel@gmail.com>
Date: Thu, 31 Oct 2024 16:49:41 -0700
Subject: [PATCH] simplest-way-to-start: fixed import & click_function override

 docs: update README port to 3344
---
 README.md                        | 4 ++--
 index-simplest-way-to-start.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 0e6ba9a71..21eec9de1 100644
--- a/README.md
+++ b/README.md
@@ -89,11 +89,11 @@ quadfeather --files ../some-path-to/your-data.csv --tile_size 50000 --destinatio
 npm run dev
 ```
 
-and opening `http://localhost:3345/index-simplest-way-to-start.html` in your browser.
+and opening `http://localhost:3344/index-simplest-way-to-start.html` in your browser.
 
 To edit the visualization, or to troubleshoot, look at the file `index-simplest-way-to-start.html`, where you should find a bare-bones implementation of deepscatter.
 
-Explore `index.html`, and render it at `http://localhost:3345/index.html`, for a more advanced example.
+Explore `index.html`, and render it at `http://localhost:3344/index.html`, for a more advanced example.
 
 Note: Ideally, in a future release you'll be able to create these specs in away that doesn't require coding JSON directly.
 
diff --git a/index-simplest-way-to-start.html b/index-simplest-way-to-start.html
index f0752e67d..b30b36ef5 100644
--- a/index-simplest-way-to-start.html
+++ b/index-simplest-way-to-start.html
@@ -12,7 +12,7 @@
 </body>
 
 <script type="module">
-  import Scatterplot from './src/deepscatter';
+  import { Scatterplot } from './src/scatterplot';
 
   const prefs = {
     source_url: '/tiles', // the output of the quadfeather tiling engine
@@ -21,7 +21,7 @@
     zoom_balance: 0.7, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
     point_size: 5, // Default point size before application of size scaling
     background_color: '#000000',
-    click_function: 'console.log(JSON.stringify(datum, undefined, 2))',
+    click_function: (datum) => console.log({ ...datum }), // Overrides default click for easy customization
 
     // encoding API based roughly on Vega Lite: https://vega.github.io/vega-lite/docs/encoding.html
     encoding: {