simplest-way-to-start: fixed import & click_function override

 docs: update README port to 3344

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.
 

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: {