diff --git a/docs/examples/generate-dashboard-from-picture.md b/docs/examples/generate-dashboard-from-picture.md index bbd36dd..7534389 100644 --- a/docs/examples/generate-dashboard-from-picture.md +++ b/docs/examples/generate-dashboard-from-picture.md @@ -16,7 +16,7 @@ Then ask Claude to recreate it: Please study the attached image. Then plan how to recreate the dashboard. Use ECharts for plotting. ``` -When the plan is ready, ask Claude Code to implement it: +When the plan is ready, ask Claude to implement it: ```text Please implement the plan. diff --git a/docs/examples/generate-viz-from-picture.md b/docs/examples/generate-plot-from-picture.md similarity index 96% rename from docs/examples/generate-viz-from-picture.md rename to docs/examples/generate-plot-from-picture.md index 49a2afe..b28cff6 100644 --- a/docs/examples/generate-viz-from-picture.md +++ b/docs/examples/generate-plot-from-picture.md @@ -1,4 +1,4 @@ -# Generate Visualization from Picture +# Generate Plot from Picture Upload an image of a plot and ask Claude Code to recreate it! @@ -10,8 +10,6 @@ Upload the image below to Claude Code. ![Distribution of Electricity Plot - Input](../assets/images/examples/distribution-of-electricity-input.png) -(Source: [ECharts Examples](https://echarts.apache.org/examples/en/index.html)) - Then ask Claude to recreate it using the HoloViz ecosystem: ```text @@ -26,7 +24,7 @@ Please implement the plan. ## Result -Not perfect but a really good starting point. +Not perfect, but a really good starting point. ![Distribution of Electricity Plot - Output](../assets/images/examples/distribution-of-electricity-output.png) @@ -222,3 +220,7 @@ create_plot() ``` + +## Credits + +The original plot is from [ECharts Examples](https://echarts.apache.org/examples/en/index.html). diff --git a/docs/examples/index.md b/docs/examples/index.md index a7e9611..af65ea9 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -4,19 +4,19 @@ Get inspired by what you can build with HoloViz MCP. --- -## Generate Visualization from Picture +## Generate Plot from Picture Upload a plot image and Claude recreates it with HoloViews. -[![Input](../assets/images/examples/distribution-of-electricity-input.png)](generate-viz-from-picture.md) +[![Input](../assets/images/examples/distribution-of-electricity-input.png)](generate-plot-from-picture.md) -[View Example →](generate-viz-from-picture.md) +[View Example →](generate-plot-from-picture.md) --- ## Generate Dashboard from Picture -Upload a dashboard image and Claude recreates it. +Upload a dashboard image and Claude recreates it with Panel. [![Input](../assets/images/examples/dashboard-from-image-input.png)](generate-dashboard-from-picture.md) diff --git a/mkdocs.yml b/mkdocs.yml index 5a1fbd5..61a39cb 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -106,7 +106,7 @@ nav: - Weather Dashboard (Claude): tutorials/weather-dashboard-claude-code.md - Examples: - examples/index.md - - Visualization from Picture: examples/generate-viz-from-picture.md + - Plot from Picture: examples/generate-plot-from-picture.md - Dashboard from Picture: examples/generate-dashboard-from-picture.md - How-To Guides: - Installation: