diff --git a/pages/connected-scatter-plot.tsx b/pages/connected-scatter-plot.tsx index c0f38b1f..9c323991 100644 --- a/pages/connected-scatter-plot.tsx +++ b/pages/connected-scatter-plot.tsx @@ -9,6 +9,7 @@ import DatavizInspirationParallaxLink from '../component/DatavizInspirationParal import { ResponsiveExplanationSection } from 'component/ResponsiveExplanationSection'; import { LinkAsButton } from 'component/LinkAsButton'; import { ConnectedScatterplotBasicDemo } from 'viz/ConnectedScatterplotBasic/ConnectedScatterplotBasicDemo'; +import { ToDoSection } from 'component/UI/ToDoSection'; const graphDescription = ( <> @@ -144,6 +145,8 @@ export default function Home() { // Inspiration // */} + +
@@ -187,57 +190,3 @@ export const ConnectedScatterplot = ({ width, height, data }: ConnectedScatterpl ); }; `.trim(); - -const snippetLineBuilder = ` -const lineBuilder = d3 - .line() - .x((d) => xScale(d.x)) - .y((d) => yScale(d.y)); -`.trim(); - -const snippetLinePath = ` -const linePath = lineBuilder(data); - -// console.log(linePath) -// 'M31.02,26.99 L63.02,59.9 L287.1,194.4 L319,178.2' -`.trim(); - -const snippetRendering = ` - - - - - -`.trim(); - -const snippetLine = ` -type LineItemProps = { - path: string; - color: string; -}; - -const LineItem = ({ path, color }: LineItemProps) => { - const springProps = useSpring({ - to: { - path, - color, - }, - config: { - friction: 100, - }, - }); - - return ( - - ); -};`.trim();