diff --git a/docs/ TODO FIXES.md b/docs/ TODO FIXES.md index b666c2f15..f627fd96c 100644 --- a/docs/ TODO FIXES.md +++ b/docs/ TODO FIXES.md @@ -2,7 +2,7 @@ ## GLOBAL -1. Sticky header +1. Sticky header allows for examples to scroll under and allowing for adjustments of svg/canvas/etc layers for debugging w/o scrolling. NOTE: if stickyheader then can remove debug from individual example page controls. ```css :root { @@ -29,7 +29,7 @@ or tailwind } -
+
@@ -38,8 +38,6 @@ or tailwind ``` -NOTE: if stickyheader then can remove debug from individual example page controls. - 1. [ ] Go to top overlay ```html @@ -48,29 +46,33 @@ NOTE: if stickyheader then can remove debug from individual example page control ``` -2. [ ] Export data from example when coming from API even when large? consitency, shows user schema expected, use in open in Playground/Stackblitz, performance? +1. [ ] For related examples/components in md file instead of pointing to main file point to the directely related example for clarity. Ie "components/Labels" currently relates to "components/Spline" instead have it point to "components/Spline#basic-start-and-end-snippets" (ie 1st use example using the related on page). Only thing I don't like it quite long url, but better for user. + +1. [ ] Export data from example when coming from API even when large? consitency, shows user schema expected, use in open in Playground/Stackblitz, performance? -4. [ ] Within Examples only, example like "SubmarineCablesGlobe" rename to "Submarine Cables Globe"? +1. [ ] Within Examples only, example like "SubmarineCablesGlobe" rename to "Submarine Cables Globe"? -5. Blockquote +1. [ ] Blockquote multiline text is odd: larger x-gap, less line-height: add "leading-tight break-keep” reduced line-height and prevents breaks on ?/?. -- [ ] Multiline text is odd: larger x-gap, less line-height: add "leading-tight break-keep” reduced line-height and prevents breaks on ?/?. +1. [ ] SVG/Canvas/HTML toggle - user-select:none or TW "select-none" -1. [ ] script section defined import order/sectioning w/empty lines for consistency? svelte -> d3 -> layerchart -> other libs -> local imports? +1. [ ] script section imports order/sectioning w/empty lines for consistency? svelte -> d3 -> layerchart -> other libs -> local imports? -1. [ ] script order for constancy? +1. [ ] script order for consistency? + + - imports - var assignments - functions - deriveds - export {data} -2. [ ] Titles for example - normalize all for Capitalize initial, rest lowercase unless its a component? +1. [ ] Titles for examples - normalize all for Capitalize initial, rest lowercase unless its a component? -3. [ ] Break out all controls to separate files for simpler examples. I have done some of this already. Noted in individual components/examples. +1. [ ] Break out all controls to separate files for simpler examples. I have most of these already, in $lib/components. They are named like ArcControls.svelte. I haven't updated examples to use them yet. Note the ??Controls.svelte file you can copy out the calling HTML such as ``. -4. [ ] Choosing inspect on an example could be a little confusing, I see the "Return to examples" at the top of the page, but some other indication (not sure what) might help. Modal instead? Dim sidebar? Maybe it's just me. +1. [ ] Choosing inspect on an example could be a little confusing, I see the "Return to examples" at the top of the page, but some other indication might help. I am not sure what that might be: Large Modal instead? Dim sidebar? Maybe it's just me and it's fine. -5. [ ] For fruit examples define css var corresponding to expected color. Something about non corresponding colors feels off +1. [ ] For fruit examples define css var corresponding to expected color. Something about non corresponding colors feels off ```css banana { --color: yellow; } @@ -79,43 +81,102 @@ cherry { --color: red; } grape { --color: purple; } ``` +- searched references for grapes: +docs/src/examples/BarChart/group-series-bar-click.svelte +docs/src/examples/BarChart/group-series-horizontal.svelte +docs/src/examples/BarChart/group-series-labels.svelte +docs/src/examples/BarChart/group-series-series-long-data.svelte +docs/src/examples/BarChart/group-series.svelte +docs/src/examples/BarChart/legend-custom-labels.svelte +docs/src/examples/BarChart/legend-group-series.svelte +docs/src/examples/BarChart/legend-placement.svelte +docs/src/examples/BarChart/legend-stack-series.svelte +docs/src/examples/BarChart/stack-series-expand.svelte +docs/src/examples/BarChart/stack-series-horizontal.svelte +docs/src/examples/BarChart/stack-series-padded.svelte +docs/src/examples/BarChart/stack-series.svelte +examples/daisyui-5/src/routes/+page.svelte +examples/shadcn-svelte-1/src/routes/+page.svelte +examples/skeleton-3/src/routes/+page.svelte +examples/standalone/src/routes/+page.svelte +examples/svelte-ux-2/src/routes/+page.svelte + ## Examples -### Columns +### Arc 10/31/25 + +- [ ] Description - "Visualizes data using curved segments to represent proportions or relationships within a circular layout" +- [ ] Show controls broken out - ShowControls.svelte + +### Area 10/31/25 + +- [ ] Description - "Shaded region under a line chart to emphasize magnitude and trend of data over a range" +- [ ] Breakout controls for "Clip tween on mount" - ShowControls.svelte + +### Bar Chart (Horizontal) 10/31/25 + +- [ ] Description - "Creates horizontal bars to represent and compare discrete data values visually" +- [ ] Breakout controls for "Tween on mount", "Stagger tween on mount", "Stagger tween on mount (rounded edge) - ShowControls.svelte +- [ ] "Tooltip and click handlers for indvidual stack/grouped bar", Group stacked, group & stacked mode is broken + +### Bar Chart (Vertical) 10/31/25 + +- [ ] Description - "Creates vertical bars to represent and compare discrete data values visually" +- [ ] Breakout controls for "Tween on mount", "Tween in mount (rounded edge), "Stagger tween on mount", "Stagger tween on mount (rounded edge) - ShowControls.svelte +- [ ] "Tooltip and click handlers for indvidual stack/grouped bar", Group stacked, group & stacked mode is broken + +### Candlestick 10/31/25 + +- [ ] Description - "Visualizes price movements over time using candles that show opening, closing, high, and low values for each period." +- [ ] Canvas cut off top of Y axis labels x 2 examples, needs padding -- [ ] in 2nd Cartesian & Polar category (probably case issue) +### Compound 10/31/25 -### Arc +- [ ] Description - "Combines multiple chart types or multiple of same chart types to provide a more comprehensive view of the related data." +- [ ] "Separate scales with stacked charts and overridden marks" colors change when switching Canvas to SVG +- [ ] Drop in my 3 axis example (w/Tariffs) +- [ ] Related examples/Bars -nothing -### Area +### Duration 10/31/25 -### Bars +- [ ] Description - "Visualizes time intervals or durations on a chart to represent events, activities, or processes over a specified period." +- [ ] "Bars (dense lanes)" add identify data "World Events"? +- [ ] Export data? -### Candlestick +### Histogram 10/31/25 -### Compound +- [ ] Description - "Groups continuous data into bins and displays their frequencies as bars to show data distribution" +- [ ] All examples broken - Referencing Duration not Histogram + +### Line 10/31/2025 -### Duration +- [ ] Description - "Connects data points with straight lines to show trends, patterns, or relationships over a continuous range" -### Histogram +### Lollipop 10/31/25 -### Line +- [ ] Description - "Combines lines and markers to represent data points, highlighting individual values along a vertical or horizontal axis" -### Lollipop +### Oscilloscope 10/31/25 -### Oscilloscope +- [ ] Description - "Visualizes real-time waveform or signal data to display changes in amplitude over time." +- [ ] New example x2 Time-live and Oscilloscope-live using the microphone. -### PunchCard +### PunchCard 10/31/25 -### RadialLine +- [ ] Description - "Displays data in a grid format where the size or color of each cell represents the magnitude of values, often used to show patterns over time." -### Scatter +### RadialLine 10/31/25 + +- [ ] Description - "Plots data points in a circular layout, connecting them with lines to reveal patterns or trends radiating from a central point." + +### Scatter 10/31/25 + +- [ ] Description - "plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines" ### Sparkbar 10/30/25 - [ ] Description "Very small, simple bar chart used to show data over time within a compact space" - -- [ ] "fixed position tooltip" and "Within a paragraph with Tooltip and Highlight" too many decimal places shown +- [ ] "fixed position tooltip" and "Basic within a paragraph with Tooltip and Highlight" too many decimal places shown ### Sparkline 10/30/25 @@ -125,10 +186,19 @@ grape { --color: purple; } ### Threshold -### Heirarchy +- [ ] Description "visualizes data relative to predefined limits, highlighting values that exceed or fall below set thresholds" +- [ ] no need to breakout, single controls + +### Hierarchy + +- [ ] Description - "Visualizes hierarchical data structures using nested shapes to represent parent-child relationships and proportions." +- [ ] Build out examples +- [ ] Split out controls - not done ## Pack +- [ ] Description - "Represents hierarchical data as a set of nested circles, where each circle's size corresponds to a data value." + ## Partition - [ ] "Filterable" move apply partial filter to controls @@ -149,423 +219,552 @@ grape { --color: purple; } ### Dagre -### Sankey +- [ ] Description - "Visualizes directed graphs using a layered approach to represent relationships between nodes." +- [ ] Split out controls - not done + +### Sankey 10/31/25 + +- [ ] Description - "Visualizes flow and distribution of resources or data between different stages or categories using proportional arrows." +- [ ] Build out examples + +### Beeswarm 10/31/25 -### Beeswarm +- [ ] Description - "Displays individual data points along a single axis while avoiding overlap, revealing distribution and clustering patterns" -### Collision Detection +### Collision Detection 10/31/25 -### Force DisjointGraph +- [ ] Description - "Manages overlapping elements in a visualization by adjusting their positions to ensure clarity and readability." -### ForceDrag +### Force DisjointGraph 10/31/25 -### ForceGraph +- [X] Description +- [ ] Broken link for "basic" -### ForceGroup +### ForceDrag 10/31/25 -### ForceLattice +- [ ] did not break out sticky, single setting. -### ForceText +### ForceGraph 10/31/25 -### ForceTree +- [ ] Description - "Creates interactive force-directed graphs to visualize relationships and connections between nodes dynamically." -### Animated Globe +### ForceGroup 10/31/25 -### Bubble Map +- [ ] Description - "Groups nodes in a force-directed graph to visualize clusters and relationships effectively." -### Choropleth +### ForceLattice 10/31/25 -### CountryMap +- [ ] Description - "Generates a lattice structure using force-directed layout to visualize relationships in a grid-like pattern." + +### ForceText 10/31/25 + +- [ ] Description - "Positions text elements within a force-directed layout to visualize relationships and connections dynamically." +- [ ] broke out controls to ForceTextControls.svelte + +### ForceTree 10/31/25 + +- [ ] Description - "Visualizes hierarchical data structures using a force-directed layout to illustrate parent-child relationships dynamically." + +### Animated Globe 10/31/25 + +- [ ] Description - "Creates an interactive 3D globe visualization with animated features to represent geographical data dynamically." +- [ ] controls at right are easy to miss, move to left? + +### BubbleMap 10/31/25 + +- [ ] Description - "Displays data points on a geographical map using bubbles to represent values or magnitudes at specific locations." + +### Choropleth 10/31/25 + +- [ ] Description - "Visualizes data by shading geographical regions on a map according to specific values or categories." + +### Bubble Map 10/31/25 + +- [ ] Description - "Displays data points on a geographical map using bubbles to represent values or magnitudes at specific locations." +- [ ] + +### CountryMap 10/31/25 + +- [ ] Description - "Displays data points on a geographical map using country boundaries to represent values or magnitudes at specific locations." +- [ ] fix example ### EarthquakeGlobe -### ExclipsesGlobe +- [ ] Description - "Creates an interactive 3D globe visualization to represent earthquake data dynamically." +- [ ] broken out controls - EarthquakeEclipsesGlobeControls.svelte + +### ExclipsesGlobe 10/31/25 + +- [ ] Description - "Visualizes solar and lunar eclipses on a 3D globe, showing their paths and visibility across the Earth." +- [ ] broken out controls - EarthquakeEclipsesGlobeControls.svelte + +### GeoPath 10/31/25 -### GeoPath +- [ ] Description - "Renders geographical features on a map using path data to represent shapes like countries, states, or regions." -### GeoPoint +### GeoPoint 10/31/25 + +- [ ] Description - "Plots individual geographical points on a map to represent locations, events, or data tied to specific coordinates." vs CURRENT "GeoPoint examples demonstrating geographic point placement with various datasets" +- [ ] Broken examples ### GeoProjection -### GeoTile +- [ ] Description - "Transforms geographical coordinates into a flat map representation using various projection techniques." vs CURRENT "Geographic projection examples demonstrating various map projections with interactive controls" +- [ ] Broken examples ### GeoTile -### LoftedArcs +- [ ] Description - "Renders map tiles to display geographical data efficiently, allowing for zooming and panning across different regions." vs CURRENT "GeoTile examples demonstrating tile-based mapping with interactive controls" -### SketchyGlobe +### LoftedArcs 10/31/25 -### SpikeMap +- [ ] Description - "Draws elevated arcs on a globe or map to represent connections or flows between geographical locations." +- [ ] "Draggable globe with EdgeFade" switch between svg/canvas seems to change lofts? -### StateMap +### SketchyGlobe 10/31/25 -### SubmarineCablesGlobe +- [ ] Description - "Creates a hand-drawn, sketch-like representation of a 3D globe to visualize geographical data." +- [ ] broken "basic link -### Timezones +### SpikeMap 10/31/25 -### Translucent Globe +- [ ] Description - "Visualizes data on a geographical map using spikes to represent values or magnitudes at specific locations." -### Zoomable Map +### StateMap 10/31/25 -### Zoomable Tile Map +- [ ] Description - "Displays data on a geographical map using state or regional boundaries to represent values or magnitudes at specific locations." +- [ ] broke out StateMapControls.svelte -## Components +### SubmarineCablesGlobe 10/31/25 -### ArcChart +- [ ] Description - "Visualizes submarine communication cables on a 3D globe to represent global connectivity and data flow." +- [ ] broken out controls - use EarthquakeEclipsesGlobeControls.svelte -- [ ] Gradient with text missing export +### Timezones 10/31/25 -### AreaChart +- [ ] Description - "Displays global time zones on a 3D globe, illustrating the division of time across different regions of the Earth." +- [ ] fix broken example link +- [ ] broken out controls - use TimezonesControls.svelte +- [ ] remove wrapping div and add height to Chart -- [ ] More gradient for visibility -- [ ] Stack series with separate data under stack series? -- [ ] Sparkling needs more padding-top for tooltip -- [ ] :locking and clickable tooltip, nothing in console? -- [ ] Fix Tooltip below chart and hide delay, need padding bottom +### Translucent Globe 10/31/25 -### Area Simple Chart +- [ ] Description - "Creates a semi-transparent 3D globe visualization to represent geographical data with a focus on underlying structures." +- [ ] broken out controls - use EarthquakeEclipsesGlobeControls.svelte -- [ ] More gradient for visibility -- [ ] Stack series with separate data under stack series? -- [ ] Sparkling needs more padding -top for tooltip -- [ ] locking and clickable tooltip, nothing in console.? -- [ ] Fix Tooltip below chart and hide delay, need padding bottom -- [ ] Missing examples +### Zoomable Map 10/31/25 + +- [ ] Description - "Creates an interactive map that allows users to zoom in and out to explore geographical data at different scales." +- [ ] remove wrapping div and add height to Chart +- [ ] broke out controls - ZoomableMapControls.svelte + +### Zoomable Tile Map 10/31/25 + +- [ ] Description - "Implements an interactive map with zoomable tiles to efficiently display geographical data at various levels of detail." +- [ ] fix broken examples +- [ ] broke out controls - ZoomableTileMapControls.svelte + +## Components -### Bars +### ArcChart 10/31/25 -- [ ] Missing on this page? -- [ ] Inside labels label font-color: black; -- [ ] “Highlight individual bar”, no bar seen? -- [ ] Grouped, Stacked, Group & stacked - selecting either nothing happens or locks up. +- [ ] Description - "draws a curved segment on a chart to represent portions of a circle, such as in pie or radial charts." +- [ ] "Gradient with text" missing export +- [ ] Related components/Chart 404 -### BarChart +### AreaChart 10/31/25 -- [ ] Sparkline needs padding-top for tooltips -- [ ] Single dimension needs padding-top for tooltiips -- [ ] Custom Tooltip broken? -- [ ] Move all radials to bottom? -- [ ] Point Annotations- [ ] missing point +- [ ] "Gradient" apply gradient for visibility +- [ ] Move "Stack series with separate data" under stack series, calling attention to 2 ways to provide data? +- [ ] Sparkline needs more padding-top or overflow for tooltip +- [ ] "Markers" add "Click to Add" Marker to bottom of moving tooltip (remove Blockquote) +- [ ] "locking and clickable tooltip", nothing in console? +- [ ] "Tooltip below chart and hide delay", more padding-bottom or overlfow needed + +### Area Simple Chart 10/31/25 + +- [ ] Should this be here? redundant for AreaChart? + +### BarChart 10/31/25 + +- [ ] "Horizontal" Y Axis Labels needs padding, clipped on Canvas +- [ ] Sparkline tooltips clipped, needs overflow +- [ ] "Single dimension" needs padding-top or overflow for tooltiips +- [ ] Move all radials to bottom? preserve like examples +- [ ] Point Annotations Larger Point +- [ ] "Group series (labels)" more space b/w items of each group so labels don't abut - [ ] Stacked, stacked & grouped, etc not working -- [ ] Line annotation, line is broken. -- [ ] Range annotation single no range. -- [ ] Range annotation multiple no range. -- [ ] Range annotation (value) - [ ] no value +- [ ] "Range annotation (value)" - no range seen - [ ] Custom Chart emptying shows +- [ ] Related: components/Chart 404 -### LineChart +### LineChart 10/31/25 - [ ] "Sparkline" tooltip clipped, allow overlflow like "Sparkline" -- [ ] Radials to bottom? interrupts similar examples -- [ ] Axis label inside add axis y rule to better demonstrate, also add y rule to example above for comparison -- [ ] Missing examples -- [ ] Draw turning off show collapses, add wrapping dive w/height +- [ ] Move Radars x3, "Large radial series" to bottom? interrupts similar examples +- [ ] "Axis label inside" add axis y rule to better demonstrate, also add y rule to example above for comparison +- [ ] "Draw turning" off show collapses chart, move {#if show} inside chart +- [ ] On this page missing? +- [ ] Show control broken out ShowControl.svelte. +- [ ] components/Chart 404 -### Piechart +### Piechart 10/31/25 -- [ ] Legend placement, needs legend moved, legend={{ placement: ‘left’, orientation: 'vertical' }} +- [ ] "Legend placement" seems like a default, move it to somewhere unexpect like top/vertical +- [ ] "Segments" move controls to top for consistency, broken out controls PieChartControls.svelte. +- [ ] Broken out ShowControls.svelte for "Motion tween", "Motion spring" -### ScatterChart +### ScatterChart 10/31/25 -- [ ] Missing examples -- [ ] Range annotation (vertical) is only a line +- [ ] Description "plots individual data points on two axes to reveal relationships, patterns, or correlations between variables" vs CURRENT "Streamlined Chart configuration for Scatter charts" +- [ ] Missing On This page? ### Chart -- [ ] Feature is a Blockquote, not sure if there is different identifer than > to trigger feature, text is a little cryptic +- [ ] Description - "Base Components of Layerchart providing chart dimensions and contexts such as TooltipContext, GeoContext, and TransformContext. See also simplified charts such as `AreaChart` and `BarChart` for streamline configuration" vs CURRENT "Sets up chart context, including dimension scales and additional contexts such as `TooltipContext`, `GeoContext`, and `TransformContext`. See also simplified charts such as `AreaChart` and `BarChart` for streamline configuration" if stays REMOVE BACKTICKS +- [ ] Feature doesn't jive with any other pages, Remove? -### Axis +### Axis 10/31/25 -- [ ] description +- [ ] description - "displays the scale and reference lines on a chart, providing context for interpreting data values." -### Frame +### Frame 10/31/25 -- [ ] Border different Color call attention - [ ] stroke-danger/5 +- [ ] consider changing "Border" Frame to different Color call attention vs Rule - [ ] stroke-danger/5? -### Dashed lines +### Grid 10/31/25 -- [ ] Larger gaps to see w/o mag -- [ ] Radials as bottom +- [ ] Description minor tweak "draws horizontal and vertical lines respecting scales across a chart to enhance readability and help align data points with axis values" vs CURRENT "Draw x and/or y axis lines respecting scales" +- [ ] "Dashed lines" too opaque, closely spaced dashes to see. Probaly add more travel b/w dashes +- [ ] Radials to bottom, interrupts similar examples -### Legend +### Legend 10/31/25 -- [ ] Description -- [ ] Click handler nothing in console. -- [ ] Add see console info, or change to alert (I would prefer) +- [ ] Description - "Explains the symbols, colors, or patterns used in a chart, helping interpret the represented data categories. Filtering and toggling visibility of data series can be enabled for interactivity." +- [ ] Click handler nothing in console. Change to alert? If leave as console, add some text "Check console after clicking" +- [ ] No related, at least add examples/Spline#series-individual-tooltip-with-highlight (double check correct path here) -### Rule +### Rule 10/31/25 -- [ ] Description +- [ ] Description - "A visual guideline on a chart that helps align and measure data values along the axis. +- [ ] Thicker lines for data driven examples x4? -### Arc +### Arc 10/31/25 -- [ ] Label Direction, too compact, 3 per line? -- [ ] Description +- [ ] Description - "draws a curved segment on a chart to represent portions of a whole or highlight specific data ranges" +- [ ] "Label Direction" too compact, 3 per line? +- [ ] Less data shown w/Canvas - suspect its inherit to canvas? +- [ ] broken out playground controls ArcPlaygroundControls.svelte ### Bar -- [ ] no examples -- [ ] description +- [ ] description "creates individual rectangular bars on a chart to represent and compare discrete data values" +- [ ] Related all 3 locking -### Circle +### Circle 10/31/25 -- [ ] Ok +- [ ] Description "draws a circular shape on a chart to mark specific points or emphasize data visually." better than CURRENT " element with tweened properties using motionStore" +- [ ] rightmost circle changes depending on svg/Canvas/HTML layer? +- [ ] Related components/Pack 404 -### Connector +### Connector 10/31/25 -- [ ] Description +- [ ] Description - "draws a line or curve between two points on a chart to illustrate relationships or connections in the data" +- [ ] points dissapear when Canvas layer chosen +- [ ] Related example/Tree 404 -### Ellipse +### Ellipse 10/31/25 -- [ ] OK +- [ ] description "draws an oval shape on a chart to highlight areas, emphasize points, or decorate visual elements" better than CURRENT " element with tweened properties using motionStore" -### Group +### Group 10/31/25 -- [ ] OK +- [ ] description "clusters multiple chart elements together, allowing them to be managed, styled, or transformed as a single unit" better than CURRRENT " element with convenient x/y and center placement along with tweened properties using motionStore" +- [ ] Related: examples/Pack, exmaples/Partition, examples/Sunburst, examples/Tree, exmaples/Treemap 404 -### Line +### Line 10/31/25 -- [ ] Ok +- [ ] desription "draws a straight line on a chart to represent trends, connections, or boundaries between points." better than CURRENT " element with tweened properties using motionStore" ### Marker -- [ ] Need Show toggle for tweeted? +- [ ] Missing Show toggle for "spline", "spline-with-thicker-stroke", "styling", "orientation" +- [ ] controls not breakout control, lots of variations. Can do later. -### Polygon +### Polygon - 10/31/25 -- [ ] Description +- [ ] Description - "Renders a multi-sided shape on a chart to represent complex areas, boundaries, or regions of interest." +- [ ] Controls broken out - PolygonPlaygroundControls.svelte and PolygonControls.svelte ### Rect -- [ ] None +- [ ] Description "Draws a rectangle on a chart to highlight areas, ranges, or specific regions of interest" -### Text +### Text 10/31/25 -- [ ] Missing description -- [ ] Playground, show anchor to beginning? +- [ ] Missing description - "adds custom text directly onto a chart as a basic element for labeling, annotation, or commentary" +- [ ] "Word wrap with explicit \n" - for HTML need to use `
` tags? if so, change label from "\n" to "Line Breaks" +- [ ] Relate inpage link examples/Area#explicit-axis-ticks-min-max +- [ ] Breakout TextControls.svelte, created -### Area +### Area 10/31/25 -- [ ] Description -- [ ] Show area work for canvas? -- [ ] No on this page options -- [ ] No data -- [ ] Missing Custom chart example -- [ ] Related examples/Histogram 404 +- [ ] Description "Shades the space under a line on a chart to emphasize the magnitude and trend of data over a range. +- [ ] Why are there 19 files unnder components/Area ? when playground is only one on md? +- [ ] Related in page links examples/Area#gradient -### Bars +### Bars (Marker) 10/31/25 -- [ ] Description +- [ ] Description - "horizontal bars on a chart to represent and compare discrete data values visually. - [ ] BarChart Link Broken -- [ ] Grouped, Stacked, Group & stacked - selecting either nothing happens or locks up. -- [ ] Canvas cuts off axes text +- [ ] Related components/Bar locks +- [ ] Related in page links examples/Bar#vertical, examples/Columns#basic, examples/Histogram#basic -### Calendar +### Calendar 10/31/25 -- [ ] Description -- [ ] Weird rendering +- [ ] Description - "highlights specific dates or time periods on a chart to emphasize events, milestones, or temporal patterns" +- [ ] Weird rendering in svg/canvas and html - maybe start over - [ ] Multiple years, less empty years? - [ ] Weird rendering if returning from inspect -### Hull +### Hull 10/31/25 -- [ ] Description +- [ ] Description - "encloses a set of data points within a convex boundary to highlight clusters or groupings on a chart" - [ ] Missing examples -### Labels +### Labels 10/31/25 -- [ ] Description -- [ ] Missing example +- [ ] Description - "displays text directly on a chart to identify or annotate specific data points" +- [ ] Related examples/Bars - nothing/locks +- [ ] Related in page links examples/Area#with-labels, examples/Bars#outside-labels-default, examples/Columns#outside-labels-default, examples/Line#with-labels, examples/Scatter#with-labels, examples/Threshold#with-labels -### Link +### Link 10/31/25 -- [ ] Desciption -- [ ] Example +- [ ] Desciption - "highlights or connects specific data points on a chart to emphasize relationships or sequences" +- [ ] Related examples/Tree 404 -### Pie +### Pie 10/31/25 -- [ ] Description -- [ ] Same static data for basic and disable sorting. Clarifies the difference between the two. +- [ ] Description - "Represents data as proportional slices of a circle, showing the relative contribution of each category to the whole." +- [ ] Same static data for "basic" and "disable sorting". Clarifies the difference between the two without this it's unclear. - [ ] "Partial range (Chart xRange)" example same size pie as others -- [ ] Use > for info to trigger Blockquote (Inner radius, x3 -- [ ] Last 3, Left, right, center to single with control? +- [ ] Use > for info to trigger Blockquote (Inner radius x3), need spacing b/w these too +- [ ] broke out "Tweened" Show control - `` +- [ ] Labels "Centroid" and "Centroid Multiple" need more spacing b/w examples +- [ ] Placement (Left, Center, Right) combined to Single "placement.svelte +- [ ] "Placement" controls broken out - PieLeftCenterRightControls.svelte + +### Points 10/31/25 -### Points +- [ ] Description - "plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines" +- [ ] components/Zoom 404, conponents/DotPlot 404 -- [ ] Description -- [ ] Single example -- [ ] Capitalized Example Names -- [ ] Last one (end slot with draw and value (use > for info to use Blockquote) +### Spline 10/31/25 -### Threshold +- [ ] Description "data points connected by smooth, curved lines to show trends or patterns over a continuous range." or CURRENT "`` using `d3-shape` line generator to support `curve` and `defined`. Works as data-driven via context or `data` prop, or pre-made `pathData`. Adding tweening via `d3-interpolate-path`" REMOVE BACKTICKS +- [ ] remove show from all except "tweened", "end snippet with draw", "end slot with draw with value" examples +- [ ] Change comment for - to > +- [ ] Controls broken out - SplineControls.svelte - nonbound prop includeShow allows no show toggle for examples w/o tween/draw +- [ ] Controls broken out - SplinePlaygroundControls.svelte -- [ ] none +### Threshold 10/30/25 -### Annotation Line +- [ ] Description "visualizes data relative to predefined limits, highlighting values that exceed or fall below set thresholds" CURRENT "Areas between two values (`y={["value", "baseline"]}`) depending on which is greater (ex. green/red)" REMOVE BACKTICKS +- [ ] remove components/Threshold - referencing self +- [ ] components/AreaChart - nothing shown -- [ ] Description +### Annotation Line 10/30/25 + +- [ ] Not loading anymore +- [ ] Description - "Draws a straight marker across the chart to indicate a specific value, trend, or threshold" - [ ] Complete examples - [ ] Controls for Horizontal placement.vertical placement -### Annotation Point +### Annotation Point 10/30/25 -- [ ] Description +- [ ] Not loading anymore +- [ ] Description - "Marks a specific data value or coordinate on a chart to highlight key events or notable points." - [ ] Build out examples -- [ ] Annonationpointcontrols +- [ ] AnnonationPointControls -### AnnotationRange +### AnnotationRange 10/30/25 -- [ ] Description +- [ ] Not loading anymore +- [ ] Description - "Highlights a continuous span or interval on a chart to emphasize specific data ranges or thresholds" - [ ] Change range appearance to be w little more noticeable - [ ] Build out missing examples - [ ] Annotationrangecontrols -### BrushContext +### BrushContext 10/30/25 -- [ ] Description -- [ ] Selection not working -- [ ] Minimap rendering issue -- [ ] missing examples +- [ ] Description - "Providies an interactive brush context for charts, allowing selection, adjustment, and resetting of x/y domains with draggable handles and event callbacks." +- [ ] Selection not selectin anything +- [ ] Minimap rendering issue - data left squished +- [ ] export data? +- [ ] No Related? -### Highlight +### Highlight 10/30/25 -- [ ] Description -- [ ] Single example? +- [ ] Description - "Renders configurable visual highlights (points, lines, bars, or areas) on chart data for emphasis and interaction" -### Tooltip +### Tooltip 10/30/25 -- [ ] Description +- [ ] Description - "Provides a Svelte context to manage and display tooltips within charts, enabling dynamic information display based on user interactions. Typically used indirectly via the tooltip prop on Chart." Current "Setup tooltip context, include mode to identify related data based on pointer position. Typically used indirectly via the `tooltip` prop Chart" REMOVE BACKTICKS - [ ] Chart Types/Area, Stacked Area, Single Date/Time, Duration, Multi (Overlapping) Durations, simple bars, Multiple overlapping Bars, Scatterplot use > for Blockquote - [ ] Spacing of b/w 4 Position examples -### Tooltip Context +### Tooltip Context 10/30/25 - [ ] Ok +- [ ] components/Chart 404 -### TransformContext +### TransformContext 10/30/25 -- [ ] Description -- [ ] Need show for tweeted? -- [ ] Playground div in div? +- [ ] Description - "Provides a Svelte context to enable panning, zooming, and drag interactions for charts or SVG/canvas elements" +- [ ] Playground - Tweened working? curve not changing anything, Playground div in div? full width +- [ ] Playground Controls broken out - issues above before extraction +- [ ] components/Chart, examples/Pack, examples/Tree, examples/LoftedArcsGlobe 404 -### Voronoi +### Voronoi 10/30/25 -- [ ] Description +- [ ] Description - "Generates Voronoi diagrams to partition a plane based on proximity to a set of points, useful for spatial analysis and visualization." +- [ ] padding-bottom to controls, already split out -### GeoCircle +### GeoCircle 10/30/25 - [ ] Description +- [ ] export data? +- [ ] Controls broken out (new since email) -### GeoContext +### GeoContext 10/30/25 -- [ ] Ok +- [ ] update description - "provides geographic projection and scaling context to children for accurate rendering of geographic data." +current "Setup geo context, particularly the projection used by other geo components. Typically used indirectly via the `geo` prop on Chart" REMOVE BACKTICKS +- [ ] components/Chart 404 -### GeoEdgeFade +### GeoEdgeFade 10/30/25 -- [ ] Description +- [ ] Description - "Visualizes geographic connections or flows with edges that gradually fade, emphasizing direction and intensity across a map" +- [ ] example/LoftedArcsGlobe 404 -### GeoPath +### GeoPath 10/30/25 -- [ ] Description +- [ ] Description - "Renders geographic shapes such as countries, states, or regions by drawing their boundaries based on coordinate data" +- [ ] examples/BubbleMap, examples/Choropleth. examples/SpikeMap nothing shown +- [ ] examples/GeoPath, examples/LoftedArcsGlobe, ex 404 -### GeoPoint +### GeoPoint 10/30/25 -- [ ] Description +- [ ] Description - "Plots individual geographic locations as points on a map to visualize spatial distributions or events" -### GeoSpline +### GeoSpline 10/30/25 -- [ ] Description +- [ ] Description - "Smooth, curved lines connecting geographic points to represent paths or flows on a map" +- [ ] examples/LoftedArcGlove 404 -### GeoTile +### GeoTile 10/30/25 -- [ ] Description +- [ ] Description - "visualizes geographic data by rendering map tiles in a grid, supporting efficient zooming and panning for large-scale maps" +- [ ] examples/ZoomableTileMap - nothing shown -### GeoVisible +### GeoVisible 10/30/25 -- [ ] Description +- [ ] Description - "determines and renders only the geographic features currently within the visible map viewport to optimize performance and clarity" -### Graticule +### Graticule 10/30/25 -- [ ] Description +- [ ] Description - "Overlays latitude and longitude lines on a map to provide geographic reference and context" +- [ ] examples/LoftedArcGlove 404 -### Tile Image +### Tile Image 10/30/25 -- [ ] Description +- [ ] Description - "Geography chart renders map tiles as a background layer, enabling zoomable and pannable geographic visualizations." -### Dagre +### Dagre 10/30/25 -- [ ] Description +- [ ] Description - "layout arranges directed graphs in layers, positioning nodes to minimize edge crossings and create a clear, hierarchical flow" -### Force Simulation +### Force Simulation 10/30/25 -- [ ] Description -- [ ] Examples/pack 404 +- [ ] Description - "Layout chart positions nodes using physics-based forces, simulating attraction, repulsion, and link constraints to create an intuitive, collision-free network visualization." +- [ ] Examples/Beeswarm, examples/ForceGroup 404 -#### Partition +### Pack 10/30/25 -- [ ] Description +- [ ] Description - "creates a space-efficient, circular layout to represent hierarchical data, where each node is depicted as a circle sized according to its value and nested within its parent node." +- [ ] examples/Pack 404 -### Sankey +#### Partition 10/30/25 -- [ ] Description +- [ ] Description - "divides a hierarchical dataset into nested, space-filling rectangles or arcs to represent the structure and relative sizes of each node" +- [ ] examples/Partition, examples/Sunburst 404 -### Tree +### Sankey 10/30/25 -- [ ] Description +- [ ] Description - "chart layout arranges nodes and links to visualize flow magnitude between categories, with link widths proportional to the flow and nodes positioned to minimize overlap and crossings" -### Treemap +### Tree 10/30/25 -- [ ] Description +- [ ] NOT RENDERING +- [ ] Description - "layout organizes hierarchical data into a branching structure with parent nodes connected to child nodes, visually representing relationships and levels of the hierarchy" + +### Treemap 10/30/25 + +- [ ] NOT RENDERING +- [ ] Description - "visualizes hierarchical data as nested rectangles, where each rectangle’s size represents a quantitative value and nesting reflects the hierarchy." - [ ] "Playground" broken controls - [ ] Build out missing examples - [ ] Basic to top ### Linear Gradient +- [ ] Tailwind colors overflows x, horizontal scroll? or smaller width for each - [ ] Description “Configurable linear gradient for usage as a reusable fill for chart elements.” -### Pattern +### Pattern - 10/30/24 -- [ ] Description “Configurable line or circle-based patterns for chart elements. +- [ ] Description - "Configurable line or circle-based patterns for chart elements." -### Radial Gradient +### Radial Gradient 10/30/25 -- [ ] Description “Configurable radial gradient used as a fill in chart elements.” +- [ ] Description - "Configurable radial gradient for usage as a reusable fill for chart elements." -### ChartClipPath +### ChartClipPath 10/30/25 -- [ ] Ok +- [ ] description - "rectangular SVG clip path to constrain chart elements while optionally allowing others (like tooltips) to overflow." +- [ ] examples/Area, examples/Treemap 404 -### CircleClipPath +### CircleClipPath 10/30/25 -- [ ] Ok +- [ ] description - "defines an SVG clip path that conditionally applies circular clipping to its child elements based on the rendering context and provided properties." -ClipPath +### ClipPath 10/30/25 +- [ ] Add description - "Applies mask or clip parts of SVG graphics — e.g., to hide content outside a chart’s bounds or apply shape-based visibility limits. - [ ] To 1st of aside Clipping category? -- [ ] Add description -- [ ] Related Components/ClippCirclePath 404 +It works inside the LayerChart rendering context (getLayerContext())" -### RectClipPath +### RectClipPath 10/30/25 -- [ ] Ok +- [ ] desciption update - "defines an SVG clip path that conditionally applies clipping to its child elements based on the rendering context and provided properties. -### Blur +### Blur 10/30/25 -- [ ] Description - “Defines an SVG blur filter and applies it to its child elements using a configurable blur strength and unique ID.” +- [ ] Description - "Applies a Gaussian blur effect to chart elements, softening their appearance for visual emphasis or stylistic purposes." - [ ] Remove TODO for example? +- [ ] Related broken examples/Parition, examples/Treemap -### Bound +### Bounds 10/30/25 - [ ] Description - “Provides reactive, animated coordinate scaling for chart layouts, passing live x/y scales to its children within a shared chart context.” -### ColorRamp +### ColorRamp 10/30/25 -- [ ] Missing on this page -- [ ] breakout ColorRampControls.svelte +- [ ] Description - "Generates a color ramp (gradient) based on specified colors and stops, useful for mapping data values to colors in visualizations." ### MotionPath 10/30/25 +- [ ] Description - "Animates an object along a specified path using configurable motion parameters such as speed, duration, and easing." - [ ] convert "Repeat indefinitely" to same square of "Rotation object with path" to call attention to difference in rotate object along path vs moving along path - [ ] "Repeat indefinitely" same speed as "Rotation object with path"? -- [X] Breakout controls +- [ ] Breakout controls diff --git a/docs/src/content/components/AnnotationLine.md b/docs/src/content/components/AnnotationLine.md index f13429d55..45a3b8b70 100644 --- a/docs/src/content/components/AnnotationLine.md +++ b/docs/src/content/components/AnnotationLine.md @@ -1,5 +1,5 @@ --- -description: AnnotationLine +description: Annotation component drawing a straight marker across the chart to indicate a specific value, trend, or threshold. section: annotations layers: ['svg', 'canvas', 'html'] related: ['components/AnnotationPoint', 'components/AnnotationRange'] diff --git a/docs/src/content/components/AnnotationPoint.md b/docs/src/content/components/AnnotationPoint.md index fd08691b9..6bd31683f 100644 --- a/docs/src/content/components/AnnotationPoint.md +++ b/docs/src/content/components/AnnotationPoint.md @@ -1,5 +1,5 @@ --- -description: AnnotationPoint +description: Annotation component marking a specific data value or coordinate on a chart to highlight key events or notable points. section: annotations layers: ['svg', 'canvas', 'html'] related: ['components/AnnotationLine', 'components/AnnotationRange'] diff --git a/docs/src/content/components/AnnotationRange.md b/docs/src/content/components/AnnotationRange.md index e61c6d20b..2627e76c6 100644 --- a/docs/src/content/components/AnnotationRange.md +++ b/docs/src/content/components/AnnotationRange.md @@ -1,5 +1,5 @@ --- -description: AnnotationRange +description: Annotation component highlighting a continuous span or interval on a chart to emphasize specific data ranges or thresholds. section: annotations layers: ['svg', 'canvas', 'html'] related: ['components/AnnotationLine', 'components/AnnotationPoint'] diff --git a/docs/src/content/components/Arc.md b/docs/src/content/components/Arc.md index 3a5c09ab7..ed0915cf1 100644 --- a/docs/src/content/components/Arc.md +++ b/docs/src/content/components/Arc.md @@ -1,5 +1,5 @@ --- -# description: +description: Primitive component which draws a curved segment on a chart to represent portions of a whole or highlight specific data ranges. section: primitives layers: [svg, canvas] related: [components/Pie, examples/Arc] diff --git a/docs/src/content/components/ArcChart.md b/docs/src/content/components/ArcChart.md index 0a1eeea37..03ab33fc6 100644 --- a/docs/src/content/components/ArcChart.md +++ b/docs/src/content/components/ArcChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Arc charts +description: Streamlined visualization which draws curved segment of a chart to represent portions of a circle, such as in pie or radial charts. section: charts layers: [svg, canvas] related: [components/Chart, components/Pie, examples/Arc] diff --git a/docs/src/content/components/Area.md b/docs/src/content/components/Area.md index 894b2d0e2..63015e270 100644 --- a/docs/src/content/components/Area.md +++ b/docs/src/content/components/Area.md @@ -1,5 +1,5 @@ --- -description: Area +description: Marking component which shades the space under a line on a chart to emphasize the magnitude and trend of data over a range. section: marks layers: ['svg', 'canvas'] related: ['examples/Area'] diff --git a/docs/src/content/components/AreaChart.md b/docs/src/content/components/AreaChart.md index cdb2728aa..29e3811ad 100644 --- a/docs/src/content/components/AreaChart.md +++ b/docs/src/content/components/AreaChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Area charts +description: Visualization of quantitative data over a continuous interval, with filled areas beneath a line to emphasize magnitude or cumulative values. section: charts layers: [svg, canvas] related: [components/Chart, components/Area, examples/Area] diff --git a/docs/src/content/components/AreaChartSimple.md b/docs/src/content/components/AreaChartSimple.md index 30161fa4b..94bbebb3f 100644 --- a/docs/src/content/components/AreaChartSimple.md +++ b/docs/src/content/components/AreaChartSimple.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Area charts +description: Streamlined visualization of quantitative data over a continuous interval, with filled areas beneath a line to emphasize magnitude or cumulative values. section: charts layers: [svg, canvas] related: [components/Chart, components/Area, examples/Area] diff --git a/docs/src/content/components/Axis.md b/docs/src/content/components/Axis.md index 4bd2c2e5f..bdbb7063a 100644 --- a/docs/src/content/components/Axis.md +++ b/docs/src/content/components/Axis.md @@ -1,4 +1,5 @@ --- +description: Commonly used component displays the scale and reference lines on a chart, providing context for interpreting data values. section: common layers: [svg, canvas, html] related: [components/Grid, components/Rule] diff --git a/docs/src/content/components/Bar.md b/docs/src/content/components/Bar.md index 3eb4e7bf5..ed846d7de 100644 --- a/docs/src/content/components/Bar.md +++ b/docs/src/content/components/Bar.md @@ -1,5 +1,5 @@ --- -description: Bar +description: Primitive component creating individual rectangular bars to represent and compare discrete data values. section: primitives layers: ['svg', 'canvas'] related: ['components/Bars', 'examples/Bars', 'examples/Columns'] diff --git a/docs/src/content/components/BarChart.md b/docs/src/content/components/BarChart.md index 569eba273..8179bf4ec 100644 --- a/docs/src/content/components/BarChart.md +++ b/docs/src/content/components/BarChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Bar charts +description: Streamlined visualization displaying categorical data using rectangular bars whose lengths represent the values of each category. section: charts layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/components/Bars.md b/docs/src/content/components/Bars.md index f333067a1..8a966b226 100644 --- a/docs/src/content/components/Bars.md +++ b/docs/src/content/components/Bars.md @@ -1,5 +1,5 @@ --- -description: Bars +description: Marking component which applies horizontal bars to represent and visually compare discrete data values. section: marks layers: ['svg', 'canvas'] related: ['components/Bar', 'examples/Bars', 'examples/Columns', 'examples/Histogram'] diff --git a/docs/src/content/components/Blur.md b/docs/src/content/components/Blur.md index b284cccce..bc93b0754 100644 --- a/docs/src/content/components/Blur.md +++ b/docs/src/content/components/Blur.md @@ -1,5 +1,5 @@ --- -description: Blur +description: Component applies a Gaussian blur effect to chart elements, softening their appearance for visual emphasis or stylistic purposes. section: other layers: ['svg'] related: [] diff --git a/docs/src/content/components/Bounds.md b/docs/src/content/components/Bounds.md index ee5f2719f..d6c3de731 100644 --- a/docs/src/content/components/Bounds.md +++ b/docs/src/content/components/Bounds.md @@ -1,5 +1,5 @@ --- -description: Bounds +description: Component provides reactive, animated coordinate scaling for chart layouts, passing live x/y scales to its children within a shared chart context. section: other layers: ['svg', 'canvas'] related: ['examples/Partition', 'examples/Sunburst', 'examples/Treemap'] diff --git a/docs/src/content/components/BrushContext.md b/docs/src/content/components/BrushContext.md index 4af7d61ef..451c1b3ff 100644 --- a/docs/src/content/components/BrushContext.md +++ b/docs/src/content/components/BrushContext.md @@ -1,5 +1,5 @@ --- -description: BrushContext +description: Interaction component providing an interactive brush context allowing selection, adjustment, and resetting of x/y domains with draggable handles and event callbacks. section: interactions layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/components/Calendar.md b/docs/src/content/components/Calendar.md index 9e083f929..0f4bd8229 100644 --- a/docs/src/content/components/Calendar.md +++ b/docs/src/content/components/Calendar.md @@ -1,5 +1,5 @@ --- -description: Calendar +description: Marking component which highlights specific dates or time periods on a chart to emphasize events, milestones, or temporal patterns. section: marks layers: ['svg', 'canvas', 'html'] related: [] diff --git a/docs/src/content/components/Chart.md b/docs/src/content/components/Chart.md index a44181836..a6b8fd4bd 100644 --- a/docs/src/content/components/Chart.md +++ b/docs/src/content/components/Chart.md @@ -1,5 +1,5 @@ --- -description: Sets up the chart context, defining dimension scales and supporting contexts like TooltipContext, GeoContext, and TransformContext. For simpler configuration, see prebuilt charts such as AreaChart and BarChart. +description: Base Layerchart component providing chart dimensions and contexts such as TooltipContext, GeoContext, and TransformContext. See also simplified charts such as AreaChart and BarChart for streamlined implementations. section: charts layers: [] related: diff --git a/docs/src/content/components/ChartClipPath.md b/docs/src/content/components/ChartClipPath.md index 68ef2e397..effe1105d 100644 --- a/docs/src/content/components/ChartClipPath.md +++ b/docs/src/content/components/ChartClipPath.md @@ -1,5 +1,5 @@ --- -description: Convenient way to clip specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc) +description: Clipping component which applies a rectangular clip path for specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc). section: clipping layers: ['svg'] related: diff --git a/docs/src/content/components/Circle.md b/docs/src/content/components/Circle.md index 7407fbe74..da40ca62f 100644 --- a/docs/src/content/components/Circle.md +++ b/docs/src/content/components/Circle.md @@ -1,5 +1,5 @@ --- -description: element with tweened properties using motionStore +description: Primitive component which draws a circular shape to mark specific points or emphasize data visually. section: primitives layers: ['svg', 'canvas', 'html'] related: ['components/Points', 'examples/Pack', 'examples/PunchCard'] diff --git a/docs/src/content/components/CircleClipPath.md b/docs/src/content/components/CircleClipPath.md index 916303bb8..3ab5d8b38 100644 --- a/docs/src/content/components/CircleClipPath.md +++ b/docs/src/content/components/CircleClipPath.md @@ -1,5 +1,5 @@ --- -description: Circular Clip Path +description: Clipping component which conditionally applies a circular clip region to its child elements based on the rendering context and provided properties. section: clipping layers: ['svg'] related: [] diff --git a/docs/src/content/components/ClipPath.md b/docs/src/content/components/ClipPath.md index f0370eec1..6cccb88ae 100644 --- a/docs/src/content/components/ClipPath.md +++ b/docs/src/content/components/ClipPath.md @@ -1,5 +1,5 @@ --- -description: Clip Path +description: Clipping component which defines a clipping region to constrain the rendering of chart elements within a specified shape or boundary. section: clipping layers: ['svg'] related: diff --git a/docs/src/content/components/ColorRamp.md b/docs/src/content/components/ColorRamp.md index 1b6f73837..1150997e2 100644 --- a/docs/src/content/components/ColorRamp.md +++ b/docs/src/content/components/ColorRamp.md @@ -1,5 +1,5 @@ --- -description: Ramp in a color space +description: Component generates a color ramp (gradient) based on specified colors and stops, useful for mapping data values to colors in visualizations. section: other layers: ['svg'] related: [] diff --git a/docs/src/content/components/Connector.md b/docs/src/content/components/Connector.md index 04f31af39..c206d9c89 100644 --- a/docs/src/content/components/Connector.md +++ b/docs/src/content/components/Connector.md @@ -1,5 +1,5 @@ --- -description: Connector +description: Primitive component which draws a line or curve between two points on a chart to illustrate relationships or connections in the data. section: primitives layers: ['svg', 'canvas'] related: ['components/Link', 'examples/Tree'] diff --git a/docs/src/content/components/Dagre.md b/docs/src/content/components/Dagre.md index 55073dd16..f43c78078 100644 --- a/docs/src/content/components/Dagre.md +++ b/docs/src/content/components/Dagre.md @@ -1,5 +1,5 @@ --- -description: Dagre +description: Layout component which arranges directed graphs in layers, positioning nodes to minimize edge crossings and create a clear, hierarchical flow. section: layout layers: ['svg', 'canvas'] related: ['examples/Dagre'] diff --git a/docs/src/content/components/Ellipse.md b/docs/src/content/components/Ellipse.md index 73f60a8d0..4bc30a131 100644 --- a/docs/src/content/components/Ellipse.md +++ b/docs/src/content/components/Ellipse.md @@ -1,5 +1,5 @@ --- -description: element with tweened properties using motionStore +description: Primitive component which draws an oval shape to highlight areas, emphasize points, or decorate visual elements. section: primitives layers: ['svg', 'canvas', 'html'] related: [] diff --git a/docs/src/content/components/ForceSimulation.md b/docs/src/content/components/ForceSimulation.md index 41a7d1bdd..41d16a0d8 100644 --- a/docs/src/content/components/ForceSimulation.md +++ b/docs/src/content/components/ForceSimulation.md @@ -1,5 +1,5 @@ --- -description: ForceSimulation +description: Layout components which positions nodes using physics-based forces, simulating attraction, repulsion, and link constraints to create an intuitive, collision-free network visualization. section: layout layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/components/Frame.md b/docs/src/content/components/Frame.md index 81681bbcb..61f2f411c 100644 --- a/docs/src/content/components/Frame.md +++ b/docs/src/content/components/Frame.md @@ -1,5 +1,5 @@ --- -description: Rectangle of the Chart bounding box, respects padding or full size +description: Commonly used component representing a rectangular Chart bounding box and respecting padding or full size. section: common layers: [svg, canvas, html] related: [components/Rect] diff --git a/docs/src/content/components/GeoCircle.md b/docs/src/content/components/GeoCircle.md index 4737d1e30..cfc0ab413 100644 --- a/docs/src/content/components/GeoCircle.md +++ b/docs/src/content/components/GeoCircle.md @@ -1,4 +1,5 @@ --- +description: Geographic component which displays circular areas on a map to represent a specific geographic region or radius around a point. section: geo layers: [svg, canvas] related: [examples/Timezones] diff --git a/docs/src/content/components/GeoContext.md b/docs/src/content/components/GeoContext.md index 5269ec835..1f6838876 100644 --- a/docs/src/content/components/GeoContext.md +++ b/docs/src/content/components/GeoContext.md @@ -1,5 +1,5 @@ --- -description: Setup geo context, particularly the projection used by other geo components. Typically used indirectly via the `geo` prop on Chart +description: Geographic component which provides geographic projection and scaling context to children for accurate rendering of geographic data. section: geo layers: ['svg', 'canvas'] related: ['components/Chart'] diff --git a/docs/src/content/components/GeoEdgeFade.md b/docs/src/content/components/GeoEdgeFade.md index 0932cc1c8..58ea9554d 100644 --- a/docs/src/content/components/GeoEdgeFade.md +++ b/docs/src/content/components/GeoEdgeFade.md @@ -1,5 +1,5 @@ --- -description: GeoEdgeFade +description: Geographic component which visualizes connections or flows with edges that gradually fade, emphasizing direction and intensity across a map. section: geo layers: ['svg', 'canvas'] related: ['examples/LoftedArcs'] diff --git a/docs/src/content/components/GeoPath.md b/docs/src/content/components/GeoPath.md index 1865aa718..9368eea98 100644 --- a/docs/src/content/components/GeoPath.md +++ b/docs/src/content/components/GeoPath.md @@ -1,5 +1,5 @@ --- -description: GeoPath +description: Geographic component which renders shapes such as countries, states, or regions by drawing their boundaries based on coordinate data. section: geo layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/components/GeoPoint.md b/docs/src/content/components/GeoPoint.md index d5fef75ca..eed6d9c50 100644 --- a/docs/src/content/components/GeoPoint.md +++ b/docs/src/content/components/GeoPoint.md @@ -1,5 +1,5 @@ --- -description: GeoPoint +description: Geographic component which plots individual geographic locations as points on a map to visualize spatial distributions or events. section: geo layers: ['svg', 'canvas'] related: ['examples/GeoPoint'] diff --git a/docs/src/content/components/GeoSpline.md b/docs/src/content/components/GeoSpline.md index dccd52864..bf2d84c8d 100644 --- a/docs/src/content/components/GeoSpline.md +++ b/docs/src/content/components/GeoSpline.md @@ -1,5 +1,5 @@ --- -description: GeoSpline +description: Geographic component which renders smooth, curved lines connecting geographic points to represent paths or flows on a map. section: geo layers: ['svg', 'canvas'] related: ['examples/LoftedArcs'] diff --git a/docs/src/content/components/GeoTile.md b/docs/src/content/components/GeoTile.md index 8f90e95fb..40ef85901 100644 --- a/docs/src/content/components/GeoTile.md +++ b/docs/src/content/components/GeoTile.md @@ -1,5 +1,5 @@ --- -description: GeoTile +description: Geographic component which renders map tiles in a grid supporting efficient zooming and panning for larger scale maps. section: geo layers: ['svg', 'canvas'] related: ['examples/GeoTile', 'examples/ZoomableTileMap'] diff --git a/docs/src/content/components/GeoVisible.md b/docs/src/content/components/GeoVisible.md index 97fad289c..45acdbf7a 100644 --- a/docs/src/content/components/GeoVisible.md +++ b/docs/src/content/components/GeoVisible.md @@ -1,5 +1,5 @@ --- -description: GeoVisible +description: Geographic component which determines and renders only the geographic features currently within the visible map viewport to optimize performance and clarity. section: geo layers: ['svg', 'canvas'] related: ['examples/SubmarineCablesGlobe'] diff --git a/docs/src/content/components/Graticule.md b/docs/src/content/components/Graticule.md index f1567e745..d7b645262 100644 --- a/docs/src/content/components/Graticule.md +++ b/docs/src/content/components/Graticule.md @@ -1,5 +1,5 @@ --- -description: Graticule +description: Geographic component which overlays latitude and longitude lines on a map to provide geographic reference and context. section: geo layers: ['svg', 'canvas'] related: ['examples/AnimatedGlobe', 'examples/GeoProjection', 'examples/LoftedArcsGlobe'] diff --git a/docs/src/content/components/Grid.md b/docs/src/content/components/Grid.md index c9393345a..76b56ec21 100644 --- a/docs/src/content/components/Grid.md +++ b/docs/src/content/components/Grid.md @@ -1,5 +1,5 @@ --- -description: Draw x and/or y axis lines respecting scales +description: Commonly used component which draws horizontal and vertical lines respecting scales across a chart to enhance readability and help align data points with axis values. section: common layers: [svg, canvas, html] related: [components/Axis, components/Rule] diff --git a/docs/src/content/components/Group.md b/docs/src/content/components/Group.md index d52363dbd..b83e752c2 100644 --- a/docs/src/content/components/Group.md +++ b/docs/src/content/components/Group.md @@ -1,5 +1,5 @@ --- -description: element with convenient x/y and center placement along with tweened properties using motionStore +description: Primitive component which clusters multiple chart elements together, allowing them to be managed, styled, or transformed as a single unit. section: primitives layers: ['svg', 'html'] related: diff --git a/docs/src/content/components/Highlight.md b/docs/src/content/components/Highlight.md index 5fee3a456..997cbe031 100644 --- a/docs/src/content/components/Highlight.md +++ b/docs/src/content/components/Highlight.md @@ -1,5 +1,5 @@ --- -description: Highlight +description: Interaction component manages and displays tooltips allowing dynamic information to appear in response to user interactions. section: interactions layers: ['svg', 'canvas'] related: ['components/Tooltip', 'components/TooltipContext'] diff --git a/docs/src/content/components/Hull.md b/docs/src/content/components/Hull.md index 842cbc0f9..e9f86c9a6 100644 --- a/docs/src/content/components/Hull.md +++ b/docs/src/content/components/Hull.md @@ -1,5 +1,5 @@ --- -description: Hull +description: Marking component which encloses a set of data points within a convex boundary to highlight clusters or groupings on a chart. section: marks layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/components/Labels.md b/docs/src/content/components/Labels.md index 48db759b0..4e9e8ae1a 100644 --- a/docs/src/content/components/Labels.md +++ b/docs/src/content/components/Labels.md @@ -1,5 +1,5 @@ --- -description: Labels +description: Marking component which displays text directly on a chart to identify or annotate specific data points. section: marks layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/components/Legend.md b/docs/src/content/components/Legend.md index 02192c7cd..6aef4fb62 100644 --- a/docs/src/content/components/Legend.md +++ b/docs/src/content/components/Legend.md @@ -1,5 +1,5 @@ --- -# description: +description: Commonly used component which explains the symbols, colors, or patterns used in a chart, helping interpret the represented data categories. Filtering and toggling visibility of data series can be enabled for interactivity. section: common layers: [html] related: [] diff --git a/docs/src/content/components/Line.md b/docs/src/content/components/Line.md index 1eaa932d9..f6d16a489 100644 --- a/docs/src/content/components/Line.md +++ b/docs/src/content/components/Line.md @@ -1,5 +1,5 @@ --- -description: element with tweened properties using motionStore +description: Primitive component which draws a straight line on a chart to represent trends, connections, or boundaries between data points. section: primitives layers: ['svg', 'canvas', 'html'] related: ['components/Rule', 'components/Spline'] diff --git a/docs/src/content/components/LineChart.md b/docs/src/content/components/LineChart.md index ecd8b913a..17526df53 100644 --- a/docs/src/content/components/LineChart.md +++ b/docs/src/content/components/LineChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Line charts +description: Streamlined visualization of data points connected by lines to visualize trends or changes over time. section: charts layers: [svg, canvas] related: [components/Chart, components/Spline, examples/Line] diff --git a/docs/src/content/components/LinearGradient.md b/docs/src/content/components/LinearGradient.md index b8ebabcca..0bc988188 100644 --- a/docs/src/content/components/LinearGradient.md +++ b/docs/src/content/components/LinearGradient.md @@ -1,5 +1,5 @@ --- -description: Linear Gradient +description: Fill component providing a linear gradient fill pattern for chart elements. section: fill layers: ['svg', 'canvas', 'html'] related: ['components/RadialGradient', 'components/Pattern'] diff --git a/docs/src/content/components/Link.md b/docs/src/content/components/Link.md index 834885907..5fd62bc59 100644 --- a/docs/src/content/components/Link.md +++ b/docs/src/content/components/Link.md @@ -1,5 +1,5 @@ --- -description: Link +description: Marking component which highlights or connects specific data points on a chart to emphasize relationships or sequences. section: marks layers: ['svg', 'canvas'] related: ['components/Connector', 'components/Points', 'examples/Sankey', 'examples/Tree'] diff --git a/docs/src/content/components/Marker.md b/docs/src/content/components/Marker.md index d159ac48f..3facf787d 100644 --- a/docs/src/content/components/Marker.md +++ b/docs/src/content/components/Marker.md @@ -1,5 +1,5 @@ --- -description: Graphic used for drawing arrowheads or polymarkers on Line, Spline, etc +description: Primitive component which draws visual symbols like circles, squares, or custom shapes at individual data points. section: primitives layers: ['svg'] related: ['components/Spline', 'components/Line', 'components/Rule', 'components/GeoSpline'] diff --git a/docs/src/content/components/MotionPath.md b/docs/src/content/components/MotionPath.md index b4a992999..8cdece3a0 100644 --- a/docs/src/content/components/MotionPath.md +++ b/docs/src/content/components/MotionPath.md @@ -1,5 +1,5 @@ --- -description: Animate an object along a path +description: Component animates an object along a specified path using configurable motion parameters such as speed, duration, and easing. section: other layers: ['svg'] related: ['components/Spline'] diff --git a/docs/src/content/components/Pack.md b/docs/src/content/components/Pack.md index 50c0bece7..c0ea58a0e 100644 --- a/docs/src/content/components/Pack.md +++ b/docs/src/content/components/Pack.md @@ -1,5 +1,5 @@ --- -description: Pack +description: Layout component which creates a space-efficient, circular layout to represent hierarchical data, where each node is depicted as a circle sized according to its value and nested within its parent node. section: layout layers: ['svg', 'canvas'] related: ['examples/Pack'] diff --git a/docs/src/content/components/Partition.md b/docs/src/content/components/Partition.md index 72dd61664..b7f286edd 100644 --- a/docs/src/content/components/Partition.md +++ b/docs/src/content/components/Partition.md @@ -1,5 +1,5 @@ --- -description: Partition +description: Layout component which divides a hierarchical dataset into nested, space-filling rectangles or arcs to represent the structure and relative sizes of each node. section: layout layers: ['svg', 'canvas'] related: ['examples/Partition', 'examples/Sunburst'] diff --git a/docs/src/content/components/Pattern.md b/docs/src/content/components/Pattern.md index e2cbcb910..9461722dd 100644 --- a/docs/src/content/components/Pattern.md +++ b/docs/src/content/components/Pattern.md @@ -1,5 +1,5 @@ --- -description: Pattern +description: Fill component which provides a line or circle-based fill pattern for chart elements. section: fill layers: ['svg', 'canvas'] related: ['components/LinearGradient', 'components/RadialGradient'] diff --git a/docs/src/content/components/Pie.md b/docs/src/content/components/Pie.md index cb39d9c21..6a3f0ed7b 100644 --- a/docs/src/content/components/Pie.md +++ b/docs/src/content/components/Pie.md @@ -1,5 +1,5 @@ --- -description: Pie +description: Marking component which represents data as proportional slices of a circle, showing the relative contribution of each category to the whole. section: marks layers: ['svg', 'canvas'] related: ['components/Arc', 'examples/Arc'] diff --git a/docs/src/content/components/PieChart.md b/docs/src/content/components/PieChart.md index 9918d2ee9..8f5a0c224 100644 --- a/docs/src/content/components/PieChart.md +++ b/docs/src/content/components/PieChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Pie charts +description: Streamlined visualization of data as proportional slices of a circle to represent parts of a whole. section: charts layers: [svg, canvas] related: [components/Chart, components/Pie, examples/Arc] diff --git a/docs/src/content/components/Point.md b/docs/src/content/components/Point.md index 511741831..3bdf4fad0 100644 --- a/docs/src/content/components/Point.md +++ b/docs/src/content/components/Point.md @@ -1,5 +1,5 @@ --- -description: Convenient way to translate a data item to SVG x/y coordinates +description: Primitive components which provides a convenient way to translate a data to x/y coordinates. section: primitives layers: ['svg', 'canvas', 'html'] related: ['examples/Area'] diff --git a/docs/src/content/components/Points.md b/docs/src/content/components/Points.md index 0157dd5cf..eadba2d8c 100644 --- a/docs/src/content/components/Points.md +++ b/docs/src/content/components/Points.md @@ -1,5 +1,5 @@ --- -description: Points +description: Marking component which plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines. section: marks layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/components/Polygon.md b/docs/src/content/components/Polygon.md index 1588e96ed..42b0c5852 100644 --- a/docs/src/content/components/Polygon.md +++ b/docs/src/content/components/Polygon.md @@ -1,5 +1,5 @@ --- -description: Polygon +description: Primitive component which renders a multi-sided shape on a chart to represent complex areas, boundaries, or regions of interest. section: primitives layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/components/RadialGradient.md b/docs/src/content/components/RadialGradient.md index b8ef981f5..208b043d6 100644 --- a/docs/src/content/components/RadialGradient.md +++ b/docs/src/content/components/RadialGradient.md @@ -1,5 +1,5 @@ --- -description: Radial Gradient +description: Fill component which provides a radial gradient fill pattern for chart elements. section: fill layers: ['svg'] related: ['components/LinearGradient', 'components/Pattern'] diff --git a/docs/src/content/components/Rect.md b/docs/src/content/components/Rect.md index 75f7a94fd..201049dbb 100644 --- a/docs/src/content/components/Rect.md +++ b/docs/src/content/components/Rect.md @@ -1,5 +1,5 @@ --- -description: element with tweened properties using motionStore +description: Primitive component which draws a rectangle to highlight areas, ranges, or specific regions of interest. section: primitives layers: ['svg', 'canvas', 'html'] related: diff --git a/docs/src/content/components/RectClipPath.md b/docs/src/content/components/RectClipPath.md index 08c3b8963..7a519e4f7 100644 --- a/docs/src/content/components/RectClipPath.md +++ b/docs/src/content/components/RectClipPath.md @@ -1,5 +1,5 @@ --- -description: Rectangular Clip Path +description: Clipping component which defines a rectangular clip region to constrain the rendering of chart elements within a specified shape or boundary. section: clipping layers: ['svg'] related: ['components/ChartClipPath', 'examples/Partition', 'examples/Treemap'] diff --git a/docs/src/content/components/Rule.md b/docs/src/content/components/Rule.md index 8a4096957..5e11e0873 100644 --- a/docs/src/content/components/Rule.md +++ b/docs/src/content/components/Rule.md @@ -1,5 +1,5 @@ --- -# description: +description: Commonly used component acting as a visual guideline on a chart that helps align and measure data values along an axis. section: common layers: [svg, canvas, html] related: diff --git a/docs/src/content/components/Sankey.md b/docs/src/content/components/Sankey.md index 8efe44000..e189f8670 100644 --- a/docs/src/content/components/Sankey.md +++ b/docs/src/content/components/Sankey.md @@ -1,5 +1,5 @@ --- -description: Sankey +description: Layout component which arranges nodes and links to visualize flow magnitude between categories, with link widths proportional to the flow and nodes positioned to minimize overlap and crossings. section: layout layers: ['svg', 'canvas'] related: ['examples/Sankey'] diff --git a/docs/src/content/components/ScatterChart.md b/docs/src/content/components/ScatterChart.md index 975c264d4..da0662660 100644 --- a/docs/src/content/components/ScatterChart.md +++ b/docs/src/content/components/ScatterChart.md @@ -1,5 +1,5 @@ --- -description: Streamlined Chart configuration for Scatter charts +description: Streamlined visualization of data with individual data points on two axes to reveal relationships, patterns, or correlations between variables. section: charts layers: [svg, canvas, html] related: [components/Chart, components/Points, examples/Scatter] diff --git a/docs/src/content/components/Spline.md b/docs/src/content/components/Spline.md index e06a81c0d..33af5c9f8 100644 --- a/docs/src/content/components/Spline.md +++ b/docs/src/content/components/Spline.md @@ -1,5 +1,5 @@ --- -description: '`` using `d3-shape` line generator to support `curve` and `defined`. Works as data-driven via context or `data` prop, or pre-made `pathData`. Adding tweening via `d3-interpolate-path`' +description: Marking component which applies data points connected by smooth, curved lines to show trends or patterns over a continuous range. section: marks layers: ['svg', 'canvas'] related: ['components/MotionPath', 'examples/Sparkline'] diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md index 39a97bd16..bc7c963a2 100644 --- a/docs/src/content/components/Text.md +++ b/docs/src/content/components/Text.md @@ -1,5 +1,5 @@ --- -description: Text +description: Primitive component which adds custom text for labeling, annotation, or commentary. section: primitives layers: ['svg', 'canvas', 'html'] related: [] diff --git a/docs/src/content/components/Threshold.md b/docs/src/content/components/Threshold.md index 1e3df5b8f..4fe6d85d6 100644 --- a/docs/src/content/components/Threshold.md +++ b/docs/src/content/components/Threshold.md @@ -1,5 +1,5 @@ --- -description: Areas between two values (`y={["value", "baseline"]}`) depending on which is greater (ex. green/red) +description: Marking component visualizing data relative to predefined limits, highlighting values that exceed or fall below set thresholds. section: marks layers: ['svg'] related: ['components/Threshold', 'components/AreaChart'] diff --git a/docs/src/content/components/TileImage.md b/docs/src/content/components/TileImage.md index aff5d0df1..82535afd4 100644 --- a/docs/src/content/components/TileImage.md +++ b/docs/src/content/components/TileImage.md @@ -1,5 +1,5 @@ --- -description: TileImage +description: Geographic component which renders map tiles as a background layer, enabling zoomable and pannable visualizations. section: geo layers: ['svg', 'canvas'] related: ['components/GeoTile'] diff --git a/docs/src/content/components/Tooltip.md b/docs/src/content/components/Tooltip.md index 26586ba22..47a125cd0 100644 --- a/docs/src/content/components/Tooltip.md +++ b/docs/src/content/components/Tooltip.md @@ -1,5 +1,5 @@ --- -description: Tooltip +description: Interaction component manages and displays tooltips allowing dynamic information to appear in response to user interactions. section: interactions layers: ['svg', 'canvas'] related: ['components/TooltipContext', 'components/Highlight'] diff --git a/docs/src/content/components/TooltipContext.md b/docs/src/content/components/TooltipContext.md index 056919f28..2b5ac12b2 100644 --- a/docs/src/content/components/TooltipContext.md +++ b/docs/src/content/components/TooltipContext.md @@ -1,5 +1,5 @@ --- -description: Setup tooltip context, include mode to identify related data based on pointer position. Typically used indirectly via the `tooltip` prop Chart +description: Interaction component manages and provides the data and behavior needed to display dynamic tooltips within a chart. section: interactions layers: ['svg', 'canvas'] related: ['components/Chart', 'components/Tooltip', 'components/Highlight'] diff --git a/docs/src/content/components/TransformContext.md b/docs/src/content/components/TransformContext.md index 00583b8f5..0e9e6e237 100644 --- a/docs/src/content/components/TransformContext.md +++ b/docs/src/content/components/TransformContext.md @@ -1,5 +1,5 @@ --- -description: TransformContext +description: Interaction component which provides context to support panning, zooming, and dragging interactions for chart elements. section: interactions layers: ['svg', 'canvas', 'html'] related: diff --git a/docs/src/content/components/Tree.md b/docs/src/content/components/Tree.md index cfa737fdd..2f52dd6fb 100644 --- a/docs/src/content/components/Tree.md +++ b/docs/src/content/components/Tree.md @@ -1,5 +1,5 @@ --- -description: Tree +description: Layout component which organizes hierarchical data into a branching structure with parent nodes connected to child nodes, visually representing relationships and levels of the hierarchy. section: layout layers: ['svg', 'canvas'] related: ['examples/Tree'] diff --git a/docs/src/content/components/Treemap.md b/docs/src/content/components/Treemap.md index a359e2cbe..7c272d8ff 100644 --- a/docs/src/content/components/Treemap.md +++ b/docs/src/content/components/Treemap.md @@ -1,5 +1,6 @@ --- -section: layout +description: Layout component which visualizes hierarchical data as nested rectangles, where each rectangle’s size represents a quantitative value and nesting reflects the hierarchy. +section: hierarchy layers: [svg, canvas] related: [examples/Treemap] --- diff --git a/docs/src/content/components/Voronoi.md b/docs/src/content/components/Voronoi.md index 347a0a622..f09aeaae2 100644 --- a/docs/src/content/components/Voronoi.md +++ b/docs/src/content/components/Voronoi.md @@ -1,5 +1,5 @@ --- -description: Voronoi +description: Interaction component which creates Voronoi diagrams to divide a plane according to the nearest points, aiding spatial analysis and visualization. section: interactions layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/AnimatedGlobe.md b/docs/src/content/examples/AnimatedGlobe.md index b6296e35c..01b64f7be 100644 --- a/docs/src/content/examples/AnimatedGlobe.md +++ b/docs/src/content/examples/AnimatedGlobe.md @@ -1,5 +1,5 @@ --- -description: Animated Globe +description: Visualization of an interactive 3D globe visualization with animated features to represent geographical data dynamically. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Arc.md b/docs/src/content/examples/Arc.md index 9e0e24989..1e0b66418 100644 --- a/docs/src/content/examples/Arc.md +++ b/docs/src/content/examples/Arc.md @@ -1,5 +1,5 @@ --- -description: Arc +description: Visualization of data using curved segments to represent proportions or relationships within a circular layout. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Arc', 'components/Pie'] diff --git a/docs/src/content/examples/Area.md b/docs/src/content/examples/Area.md index bd436fe6f..94facd9bc 100644 --- a/docs/src/content/examples/Area.md +++ b/docs/src/content/examples/Area.md @@ -1,5 +1,5 @@ --- -description: Area +description: Visualization where shaded region under a line chart is used to emphasize magnitude and trend of data over a range. section: cartesian & polar layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Bars.md b/docs/src/content/examples/Bars.md index 7f435d9a1..ca3c777e7 100644 --- a/docs/src/content/examples/Bars.md +++ b/docs/src/content/examples/Bars.md @@ -1,6 +1,6 @@ --- name: Bar Chart (Horizontal) -description: Bar Chart (Horizontal) +description: Visualization where horizontal bars to represent and compare discrete data values visually. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Bars', 'examples/Columns', 'examples/Histogram', 'charts/BarChart'] diff --git a/docs/src/content/examples/Beeswarm.md b/docs/src/content/examples/Beeswarm.md index 675940767..87e4f785a 100644 --- a/docs/src/content/examples/Beeswarm.md +++ b/docs/src/content/examples/Beeswarm.md @@ -1,5 +1,5 @@ --- -description: Beeswarm +description: Visualization of individual data points along a single axis while avoiding overlap, revealing distribution and clustering patterns. section: force layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/BubbleMap.md b/docs/src/content/examples/BubbleMap.md index c635d54f3..1a6874fbf 100644 --- a/docs/src/content/examples/BubbleMap.md +++ b/docs/src/content/examples/BubbleMap.md @@ -1,5 +1,5 @@ --- -description: BubbleMap +description: Visualization which displays data points on a geographical map using bubbles to represent values or magnitudes at specific locations. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Candlestick.md b/docs/src/content/examples/Candlestick.md index c6e7212d5..a09145f31 100644 --- a/docs/src/content/examples/Candlestick.md +++ b/docs/src/content/examples/Candlestick.md @@ -1,5 +1,5 @@ --- -description: Candlestick +description: Visualization of price movements over time using candles that show opening, closing, high, and low values for each period. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Rule', 'components/Bars'] diff --git a/docs/src/content/examples/Choropleth.md b/docs/src/content/examples/Choropleth.md index 711a1434a..90ef72bf8 100644 --- a/docs/src/content/examples/Choropleth.md +++ b/docs/src/content/examples/Choropleth.md @@ -1,5 +1,5 @@ --- -description: Choropleth +description: Visualization of data by shading geographical regions on a map according to specific values or categories. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/CollisionDetection.md b/docs/src/content/examples/CollisionDetection.md index 46b15ab8c..35b88cb59 100644 --- a/docs/src/content/examples/CollisionDetection.md +++ b/docs/src/content/examples/CollisionDetection.md @@ -1,5 +1,5 @@ --- -description: CollisionDetection +description: Visualization manages overlapping elements by adjusting their positions to ensure clarity and readability. section: force layers: ['svg', 'canvas'] related: ['https://d3js.org/d3-force/collide', 'https://observablehq.com/@d3/collision-detection'] diff --git a/docs/src/content/examples/Columns.md b/docs/src/content/examples/Columns.md index da82ea7ad..a6b85c2e9 100644 --- a/docs/src/content/examples/Columns.md +++ b/docs/src/content/examples/Columns.md @@ -1,6 +1,6 @@ --- name: Bar Chart (Vertical) -description: Bar Chart (Vertical) +description: Visualization creating vertical bars to represent and compare discrete data values visually. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Bars', 'examples/Bars', 'examples/Histogram', 'examples/Sparkbar'] diff --git a/docs/src/content/examples/Compound.md b/docs/src/content/examples/Compound.md index ea3a5e2f3..43f1b431b 100644 --- a/docs/src/content/examples/Compound.md +++ b/docs/src/content/examples/Compound.md @@ -1,5 +1,5 @@ --- -description: Compound +description: Visualization combineing multiple chart types or multiple of same chart types to provide a more comprehensive view of the related data. section: cartesian & polar layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/CountryMap.md b/docs/src/content/examples/CountryMap.md index 52930baec..4d3462536 100644 --- a/docs/src/content/examples/CountryMap.md +++ b/docs/src/content/examples/CountryMap.md @@ -1,5 +1,5 @@ --- -description: CountryMap +description: Visualization of data points on a geographical map using country boundaries to represent values or magnitudes at specific locations. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Dagre.md b/docs/src/content/examples/Dagre.md index 08b3cad66..120297f08 100644 --- a/docs/src/content/examples/Dagre.md +++ b/docs/src/content/examples/Dagre.md @@ -1,5 +1,5 @@ --- -description: Dagre +description: Visualization of directed graphs using a layered approach to represent relationships between nodes. section: graph layers: ['svg'] related: ['components/Dagre', 'components/Link'] diff --git a/docs/src/content/examples/Duration.md b/docs/src/content/examples/Duration.md index 2d08a077f..5429929d8 100644 --- a/docs/src/content/examples/Duration.md +++ b/docs/src/content/examples/Duration.md @@ -1,5 +1,5 @@ --- -description: Duration +description: Visualization of time intervals/durations on a chart to represent events, activities, or processes over a specified period. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/BarChart', 'components/Points'] diff --git a/docs/src/content/examples/EarthquakeGlobe.md b/docs/src/content/examples/EarthquakeGlobe.md index 77e163fb0..ae790696a 100644 --- a/docs/src/content/examples/EarthquakeGlobe.md +++ b/docs/src/content/examples/EarthquakeGlobe.md @@ -1,5 +1,5 @@ --- -description: EarthquakeGlobe +description: Visualization of an interactive 3D globe visualization to represent earthquake data dynamically. section: geo layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/EclipsesGlobe.md b/docs/src/content/examples/EclipsesGlobe.md index da718e875..e4a378dab 100644 --- a/docs/src/content/examples/EclipsesGlobe.md +++ b/docs/src/content/examples/EclipsesGlobe.md @@ -1,5 +1,5 @@ --- -description: Eclipses Globe +description: Visualization of solar and lunar eclipses on a 3D globe, showing their paths and visibility across the Earth. section: geo layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/ForceDisjointGraph.md b/docs/src/content/examples/ForceDisjointGraph.md index a1b74a7e1..9b91d22d2 100644 --- a/docs/src/content/examples/ForceDisjointGraph.md +++ b/docs/src/content/examples/ForceDisjointGraph.md @@ -1,5 +1,5 @@ --- -description: Force simulation with disconnected graph components, showcasing separate network clusters +description: Visualization of nodes positioned using a force-directed layout while preventing overlap by applying disjoint or collision forces between nodes. section: force layers: ['Svg', 'Circle', 'Line'] related: ['ForceGraph', 'ForceGroup', 'ForceLattice'] diff --git a/docs/src/content/examples/ForceDrag.md b/docs/src/content/examples/ForceDrag.md index 58a418b52..f22b42a96 100644 --- a/docs/src/content/examples/ForceDrag.md +++ b/docs/src/content/examples/ForceDrag.md @@ -1,5 +1,5 @@ --- -description: ForceDrag examples demonstrating draggable nodes in force simulation with sticky behavior +description: Visualization of force-directed layout that allows users to interactively drag and reposition nodes while maintaining dynamic force-based relationships with or without sticky behavior. section: force layers: ['svg', 'canvas'] related: ['https://observablehq.com/@d3/sticky-force-layout'] diff --git a/docs/src/content/examples/ForceGraph.md b/docs/src/content/examples/ForceGraph.md index 99152a4cb..5fcf43e26 100644 --- a/docs/src/content/examples/ForceGraph.md +++ b/docs/src/content/examples/ForceGraph.md @@ -1,5 +1,5 @@ --- -description: ForceGraph examples demonstrating network graph visualization with interactive force controls +description: Visualization displaying interconnected nodes and links using a physics-based simulation that positions elements according to attractive and repulsive forces. section: force layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/ForceGroup.md b/docs/src/content/examples/ForceGroup.md index 5cd1936ef..2658eff22 100644 --- a/docs/src/content/examples/ForceGroup.md +++ b/docs/src/content/examples/ForceGroup.md @@ -1,5 +1,5 @@ --- -description: ForceGroup examples demonstrating grouped force simulation layouts +description: Visualization showing a lattice structure using force-directed layout to visualize relationships in a grid-like pattern. section: force layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/ForceLattice.md b/docs/src/content/examples/ForceLattice.md index 02ee86a2b..462987247 100644 --- a/docs/src/content/examples/ForceLattice.md +++ b/docs/src/content/examples/ForceLattice.md @@ -1,5 +1,5 @@ --- -description: ForceLattice examples demonstrating grid-based force simulation layouts +description: Visualization showing a lattice structure using force-directed layout to visualize relationships in a grid-like pattern. section: force layers: ['svg', 'canvas'] related: ['https://d3js.org/d3-force/link', 'https://observablehq.com/@d3/force-directed-lattice'] diff --git a/docs/src/content/examples/ForceText.md b/docs/src/content/examples/ForceText.md index da321cbea..06bc0c167 100644 --- a/docs/src/content/examples/ForceText.md +++ b/docs/src/content/examples/ForceText.md @@ -1,5 +1,5 @@ --- -description: ForceText examples demonstrating text rasterization with force simulation +description: Visualization positioning text elements within a force-directed layout to demonstrating relationships and connections dynamically. section: force layers: ['svg', 'canvas'] related: ['https://d3og.com/armollica/06a202c9f7df191ace8a1f97e33ffb97/'] diff --git a/docs/src/content/examples/ForceTree.md b/docs/src/content/examples/ForceTree.md index d9c095bc1..2f8ea741d 100644 --- a/docs/src/content/examples/ForceTree.md +++ b/docs/src/content/examples/ForceTree.md @@ -1,5 +1,5 @@ --- -description: ForceTree examples demonstrating hierarchical data visualization with force simulation +description: Visualization showing hierarchical data structures using a force-directed layout to illustrate parent-child relationships dynamically. section: force layers: ['svg', 'canvas'] related: ['https://observablehq.com/@d3/force-directed-tree'] diff --git a/docs/src/content/examples/GeoPath.md b/docs/src/content/examples/GeoPath.md index 381c026a5..3187ce822 100644 --- a/docs/src/content/examples/GeoPath.md +++ b/docs/src/content/examples/GeoPath.md @@ -1,5 +1,5 @@ --- -description: GeoPath +description: Visualization rendering geographical features on a map using path data to represent shapes like countries, states, or regions. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/GeoPoint.md b/docs/src/content/examples/GeoPoint.md index 4f36a07ba..f3ce94571 100644 --- a/docs/src/content/examples/GeoPoint.md +++ b/docs/src/content/examples/GeoPoint.md @@ -1,5 +1,5 @@ --- -description: GeoPoint examples demonstrating geographic point placement with various datasets +description: Visualization plotting individual geographical points on a map to represent locations, events, or data tied to specific coordinates. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/GeoProjection.md b/docs/src/content/examples/GeoProjection.md index 0b76209c4..fb72daaa3 100644 --- a/docs/src/content/examples/GeoProjection.md +++ b/docs/src/content/examples/GeoProjection.md @@ -1,5 +1,5 @@ --- -description: Geographic projection examples demonstrating various map projections with interactive controls +description: Visualization transforming geographical coordinates into a flat map representation using various projection techniques. section: geo layers: ['svg', 'canvas'] related: ['components/GeoPath', 'components/Chart', 'components/Graticule', 'components/Layer'] diff --git a/docs/src/content/examples/GeoTile.md b/docs/src/content/examples/GeoTile.md index 7e5e0bcf4..174d8f9d6 100644 --- a/docs/src/content/examples/GeoTile.md +++ b/docs/src/content/examples/GeoTile.md @@ -1,5 +1,5 @@ --- -description: GeoTile examples demonstrating tile-based mapping with interactive controls +description: Visualization rendering map tiles to display geographical data efficiently, allowing for zooming and panning across different regions. section: geo layers: ['svg', 'canvas'] related: ['examples/ZoomableTileMap'] diff --git a/docs/src/content/examples/Histogram.md b/docs/src/content/examples/Histogram.md index 52a5dbd85..73314512f 100644 --- a/docs/src/content/examples/Histogram.md +++ b/docs/src/content/examples/Histogram.md @@ -1,5 +1,5 @@ --- -description: Histogram +description: Vizualtion which groups continuous data into bins and displays their frequencies as bars to show data distribution. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Bars', 'examples/Bars', 'examples/Columns'] diff --git a/docs/src/content/examples/Line.md b/docs/src/content/examples/Line.md index e9f9b1a22..f9bebdc7a 100644 --- a/docs/src/content/examples/Line.md +++ b/docs/src/content/examples/Line.md @@ -1,5 +1,5 @@ --- -description: Line +description: Visualization connectings data points with straight lines to show trends, patterns, or relationships over a continuous range. section: cartesian & polar layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/LoftedArcs.md b/docs/src/content/examples/LoftedArcs.md index 983e9269b..9b07304be 100644 --- a/docs/src/content/examples/LoftedArcs.md +++ b/docs/src/content/examples/LoftedArcs.md @@ -1,5 +1,5 @@ --- -description: LoftedArcs +description: Visualization drawing elevated arcs on a globe or map to represent connections or flows between geographical locations. section: geo layers: ['svg', 'canvas'] related: ['https://observablehq.com/@armollica/globe-with-lofted-arcs'] diff --git a/docs/src/content/examples/Lollipop.md b/docs/src/content/examples/Lollipop.md index 22bfaec1d..68d3575a7 100644 --- a/docs/src/content/examples/Lollipop.md +++ b/docs/src/content/examples/Lollipop.md @@ -1,5 +1,5 @@ --- -description: Lollipop +description: Visualization combining lines and markers to represent data points, highlighting individual values along a vertical or horizontal axis. section: cartesian & polar layers: ['svg', 'canvas'] related: ['components/Rule'] diff --git a/docs/src/content/examples/Oscilloscope.md b/docs/src/content/examples/Oscilloscope.md index eae40a50b..48bb7710c 100644 --- a/docs/src/content/examples/Oscilloscope.md +++ b/docs/src/content/examples/Oscilloscope.md @@ -1,5 +1,5 @@ --- -description: Visualizes real-time waveform or signal data to display changes in amplitude over time or frequency. +description: Visualizeation of real-time waveform or signal data to display changes in amplitude over time or frequency. section: Cartesian & Polar layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/Pack.md b/docs/src/content/examples/Pack.md index 734dc9c32..fe4243cec 100644 --- a/docs/src/content/examples/Pack.md +++ b/docs/src/content/examples/Pack.md @@ -1,5 +1,5 @@ --- -description: Visualizes hierarchical data by nesting items within enclosing shapes to show parent-child relationships and relative sizes +description: Visualization of hierarchical data by nesting items within enclosing shapes to show parent-child relationships and relative sizes. section: Hierarchy layers: ['svg'] related: [] diff --git a/docs/src/content/examples/Partition.md b/docs/src/content/examples/Partition.md index 0e3cc813a..b4198906d 100644 --- a/docs/src/content/examples/Partition.md +++ b/docs/src/content/examples/Partition.md @@ -1,5 +1,5 @@ --- -description: Space-filling visualization that represents hierarchical data as nested rectangles, where each rectangle’s size reflects a quantitative value and deeper levels of the hierarchy are shown as subdivisions within parent rectangles +description: Space-filling visualization that represents hierarchical data as nested rectangles, where each rectangle’s size reflects a quantitative value and deeper levels of the hierarchy are shown as subdivisions within parent rectangles. section: Hierarchy layers: ['svg'] related: [] diff --git a/docs/src/content/examples/PunchCard.md b/docs/src/content/examples/PunchCard.md index 74c687830..3a149dde6 100644 --- a/docs/src/content/examples/PunchCard.md +++ b/docs/src/content/examples/PunchCard.md @@ -1,5 +1,5 @@ --- -description: PunchCard +description: Visualization displaying data in a grid format where the size or color of each cell represents the magnitude of values, often used to show patterns over time. section: cartesian & polar layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/RadialLine.md b/docs/src/content/examples/RadialLine.md index ced8c70d7..6bb546521 100644 --- a/docs/src/content/examples/RadialLine.md +++ b/docs/src/content/examples/RadialLine.md @@ -1,5 +1,5 @@ --- -description: RadialLine +description: Visualization plotting data points in a circular layout, connecting them with lines to reveal patterns or trends radiating from a central point. section: cartesian & polar layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Sankey.md b/docs/src/content/examples/Sankey.md index 0d0130568..515412811 100644 --- a/docs/src/content/examples/Sankey.md +++ b/docs/src/content/examples/Sankey.md @@ -1,5 +1,5 @@ --- -description: Sankey +description: Visualization of flow and distribution of resources or data between different stages or categories using proportional arrows. section: graph layers: ['svg'] related: ['components/Sankey', 'components/Link'] diff --git a/docs/src/content/examples/Scatter.md b/docs/src/content/examples/Scatter.md index 89fec1220..2ab9b6c29 100644 --- a/docs/src/content/examples/Scatter.md +++ b/docs/src/content/examples/Scatter.md @@ -1,5 +1,5 @@ --- -description: Scatter +description: Visualization plotting individual data points on a graph to show distribution, relationships, or clusters without connecting lines. section: cartesian & polar layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/SketchyGlobe.md b/docs/src/content/examples/SketchyGlobe.md index 88ddb309f..73ed96fa9 100644 --- a/docs/src/content/examples/SketchyGlobe.md +++ b/docs/src/content/examples/SketchyGlobe.md @@ -1,5 +1,5 @@ --- -description: SketchyGlobe +description: Visualization of a hand-drawn, sketch-like representation of a 3D globe to visualize geographical data. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Sparkbar.md b/docs/src/content/examples/Sparkbar.md index 7e62ca946..08bb674ea 100644 --- a/docs/src/content/examples/Sparkbar.md +++ b/docs/src/content/examples/Sparkbar.md @@ -1,5 +1,5 @@ --- -description: Sparkbar +description: Visualization of very small, simple bar chart used to show data over time within a compact space. section: cartesian & polar layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/Sparkline.md b/docs/src/content/examples/Sparkline.md index f2462d459..63b11e85e 100644 --- a/docs/src/content/examples/Sparkline.md +++ b/docs/src/content/examples/Sparkline.md @@ -1,5 +1,5 @@ --- -description: Sparkline +description: Visualization of very small, simple line used to show a trend in data over time within a compact space. section: cartesian & polar layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/SpikeMap.md b/docs/src/content/examples/SpikeMap.md index 06e68be7a..780378fa7 100644 --- a/docs/src/content/examples/SpikeMap.md +++ b/docs/src/content/examples/SpikeMap.md @@ -1,5 +1,5 @@ --- -description: SpikeMap +description: Visualization of geographical map using spikes to represent values or magnitudes at specific locations. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/StateMap.md b/docs/src/content/examples/StateMap.md index e4c8b3c19..f0fc8b50a 100644 --- a/docs/src/content/examples/StateMap.md +++ b/docs/src/content/examples/StateMap.md @@ -1,5 +1,5 @@ --- -description: StateMap +description: Visualization of a geographical map using state or regional boundaries to represent values or magnitudes at specific locations. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/SubmarineCablesGlobe.md b/docs/src/content/examples/SubmarineCablesGlobe.md index 5c64c22c0..7d8811e36 100644 --- a/docs/src/content/examples/SubmarineCablesGlobe.md +++ b/docs/src/content/examples/SubmarineCablesGlobe.md @@ -1,5 +1,5 @@ --- -description: SubmarineCablesGlobe +description: Visualization of submarine communication cables on a 3D globe to represent global connectivity and data flow. section: geo layers: ['svg', 'canvas'] related: ['https://vizhub.com/curran/submarine-cables-globe'] diff --git a/docs/src/content/examples/Sunburst.md b/docs/src/content/examples/Sunburst.md index a34258482..fc48a6aaf 100644 --- a/docs/src/content/examples/Sunburst.md +++ b/docs/src/content/examples/Sunburst.md @@ -1,5 +1,5 @@ --- -description: Circular, multi-level visualization that shows hierarchical data as concentric rings, where the center represents the root and each outward ring represents a deeper level of the hierarchy, with segment size often encoding a quantitative value +description: Circular, multi-level visualization that shows hierarchical data as concentric rings, where the center represents the root and each outward ring represents a deeper level of the hierarchy, with segment size often encoding a quantitative value. section: Hierarchy layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Threshold.md b/docs/src/content/examples/Threshold.md index 60eb71e1a..0d93da7c9 100644 --- a/docs/src/content/examples/Threshold.md +++ b/docs/src/content/examples/Threshold.md @@ -1,5 +1,5 @@ --- -description: Threshold +description: Visualization of data relative to predefined limits, highlighting values that exceed or fall below set thresholds. section: cartesian & polar layers: ['svg'] related: ['components/Threshold', 'components/AreaChart'] diff --git a/docs/src/content/examples/Timezones.md b/docs/src/content/examples/Timezones.md index 452974056..016b682dc 100644 --- a/docs/src/content/examples/Timezones.md +++ b/docs/src/content/examples/Timezones.md @@ -1,5 +1,5 @@ --- -description: Timezones +description: Visualization of global time zones on a 3D globe, illustrating the division of time across different regions of the Earth. section: geo layers: ['svg', 'canvas'] related: diff --git a/docs/src/content/examples/TranslucentGlobe.md b/docs/src/content/examples/TranslucentGlobe.md index 1e645741b..3bd69aa8b 100644 --- a/docs/src/content/examples/TranslucentGlobe.md +++ b/docs/src/content/examples/TranslucentGlobe.md @@ -1,5 +1,5 @@ --- -description: TranslucentGlobe +description: Visualization of a semi-transparent 3D globe visualization to represent geographical data with a focus on underlying structures. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/Tree.md b/docs/src/content/examples/Tree.md index fb9ef428e..db0aaff70 100644 --- a/docs/src/content/examples/Tree.md +++ b/docs/src/content/examples/Tree.md @@ -1,5 +1,5 @@ --- -description: Visual representation that organizes items or entities in a branching structure, showing parent-child relationships where each node connects to one or more subordinate nodes, effectively illustrating levels of hierarchy from top (root) to bottom (leaves) +description: Visual representation that organizes items or entities in a branching structure, showing parent-child relationships where each node connects to one or more subordinate nodes, effectively illustrating levels of hierarchy from top (root) to bottom (leaves). section: Hierarchy layers: ['svg'] related: [] diff --git a/docs/src/content/examples/Treemap.md b/docs/src/content/examples/Treemap.md index 32cdb83b7..84d223119 100644 --- a/docs/src/content/examples/Treemap.md +++ b/docs/src/content/examples/Treemap.md @@ -1,5 +1,5 @@ --- -description: Visualizes hierarchical data as a set of nested rectangles, where the size and color of each rectangle represent quantitative values within the hierarchy +description: Visualization of hierarchical data as a set of nested rectangles, where the size and color of each rectangle represent quantitative values within the hierarchy. section: Hierarchy layers: ['svg'] related: [] diff --git a/docs/src/content/examples/ZoomableMap.md b/docs/src/content/examples/ZoomableMap.md index 135c44c7d..23b84db5f 100644 --- a/docs/src/content/examples/ZoomableMap.md +++ b/docs/src/content/examples/ZoomableMap.md @@ -1,5 +1,5 @@ --- -description: ZoomableMap +description: Visualization of interactive geographic map that allows users to zoom in and out to explore data at different scales. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/content/examples/ZoomableTileMap.md b/docs/src/content/examples/ZoomableTileMap.md index c5807a654..18be73871 100644 --- a/docs/src/content/examples/ZoomableTileMap.md +++ b/docs/src/content/examples/ZoomableTileMap.md @@ -1,5 +1,5 @@ --- -description: ZoomableTileMap +description: Visualization of an interactive geographic map with tiles which can be interactively zoomed and panned for detailed spatial exploration. section: geo layers: ['svg', 'canvas'] related: [] diff --git a/docs/src/examples/MotionPath/repeat-indefinitely.svelte b/docs/src/examples/MotionPath/repeat-indefinitely.svelte index 0f2bf2f22..75042544d 100644 --- a/docs/src/examples/MotionPath/repeat-indefinitely.svelte +++ b/docs/src/examples/MotionPath/repeat-indefinitely.svelte @@ -1,20 +1,18 @@ -
- - - - - - -
- + {#if show} - + {#snippet children({ pathId, objectId })} - + + + {/snippet} {/if} diff --git a/docs/src/examples/MotionPath/rotate-object-with-path.svelte b/docs/src/examples/MotionPath/rotate-object-with-path.svelte index acf7824d3..ea674c153 100644 --- a/docs/src/examples/MotionPath/rotate-object-with-path.svelte +++ b/docs/src/examples/MotionPath/rotate-object-with-path.svelte @@ -2,19 +2,17 @@ import type { ComponentProps } from 'svelte'; import { Axis, Chart, Layer, MotionPath, Spline } from 'layerchart'; - import { Field, RangeField, Switch, Toggle } from 'svelte-ux'; import CurveMenuField from '$lib/components/CurveMenuField.svelte'; - import PathDataMenuField from '$lib/components/PathDataMenuField.svelte'; + import MotionPathControls from '$lib/components/MotionPathControls.svelte'; let pointCount = $state(100); - let pathGenerator = $state((x: number) => x); let curve: ComponentProps['value'] = $state(undefined); - let amplitude = $state(1); let frequency = $state(10); let phase = $state(0); + let show = $state(true); const data = $derived( Array.from({ length: pointCount }).map((_, i) => { @@ -26,19 +24,17 @@ ); export { data }; - - let show = $state(true); -
- - - - - - -
- + @@ -47,14 +43,11 @@ {#snippet children({ pathId, objectId })} - + + + {/snippet} {/if} diff --git a/docs/src/examples/MotionPath/sync-with-draw.svelte b/docs/src/examples/MotionPath/sync-with-draw.svelte index 79124a200..6e9c62f04 100644 --- a/docs/src/examples/MotionPath/sync-with-draw.svelte +++ b/docs/src/examples/MotionPath/sync-with-draw.svelte @@ -3,19 +3,16 @@ import { linear } from 'svelte/easing'; import { Axis, Chart, Circle, Layer, MotionPath, Spline } from 'layerchart'; - import { Field, RangeField, Switch, Toggle } from 'svelte-ux'; - import CurveMenuField from '$lib/components/CurveMenuField.svelte'; - import PathDataMenuField from '$lib/components/PathDataMenuField.svelte'; + import MotionPathControls from '$lib/components/MotionPathControls.svelte'; let pointCount = $state(100); - let pathGenerator = $state((x: number) => x); let curve: ComponentProps['value'] = $state(undefined); - let amplitude = $state(1); let frequency = $state(10); let phase = $state(0); + let show = $state(true); const data = $derived( Array.from({ length: pointCount }).map((_, i) => { @@ -27,19 +24,17 @@ ); export { data }; - - let show = $state(true); -
- - - - - - -
- +