├── .changeset ├── README.md └── config.json ├── .gitattributes ├── .github ├── FUNDING.yml └── workflows │ ├── build-preview.yml │ ├── ci.yml │ ├── deploy-preview.yml │ ├── deploy-prod.yml │ ├── pkg-pr-new.yml │ └── release.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── package.json ├── packages └── layerchart │ ├── .prettierignore │ ├── CHANGELOG.md │ ├── CHANGELOG_COMMITS.md │ ├── LICENSE │ ├── README.md │ ├── git-changelog.js │ ├── mdsvex.config.js │ ├── package.json │ ├── postcss.config.cjs │ ├── src │ ├── app.d.ts │ ├── app.html │ ├── lib │ │ ├── components │ │ │ ├── Arc.svelte │ │ │ ├── Area.svelte │ │ │ ├── Axis.svelte │ │ │ ├── Bar.svelte │ │ │ ├── Bars.svelte │ │ │ ├── Blur.svelte │ │ │ ├── Bounds.svelte │ │ │ ├── BrushContext.svelte │ │ │ ├── Calendar.svelte │ │ │ ├── Chart.svelte │ │ │ ├── ChartClipPath.svelte │ │ │ ├── ChartContext.svelte │ │ │ ├── Circle.svelte │ │ │ ├── CircleClipPath.svelte │ │ │ ├── ClipPath.svelte │ │ │ ├── ColorRamp.svelte │ │ │ ├── ComputedStyles.svelte │ │ │ ├── Dagre.svelte │ │ │ ├── ForceSimulation.svelte │ │ │ ├── Frame.svelte │ │ │ ├── GeoCircle.svelte │ │ │ ├── GeoContext.svelte │ │ │ ├── GeoEdgeFade.svelte │ │ │ ├── GeoPath.svelte │ │ │ ├── GeoPoint.svelte │ │ │ ├── GeoSpline.svelte │ │ │ ├── GeoTile.svelte │ │ │ ├── GeoVisible.svelte │ │ │ ├── Graticule.svelte │ │ │ ├── Grid.svelte │ │ │ ├── Group.svelte │ │ │ ├── Highlight.svelte │ │ │ ├── Hull.svelte │ │ │ ├── Labels.svelte │ │ │ ├── Legend.svelte │ │ │ ├── Line.svelte │ │ │ ├── LinearGradient.svelte │ │ │ ├── Link.svelte │ │ │ ├── Marker.svelte │ │ │ ├── MonthPath.svelte │ │ │ ├── MotionPath.svelte │ │ │ ├── Pack.svelte │ │ │ ├── Partition.svelte │ │ │ ├── Pattern.svelte │ │ │ ├── Pie.svelte │ │ │ ├── Point.svelte │ │ │ ├── Points.svelte │ │ │ ├── RadialGradient.svelte │ │ │ ├── Rect.svelte │ │ │ ├── RectClipPath.svelte │ │ │ ├── Rule.svelte │ │ │ ├── Sankey.svelte │ │ │ ├── Spline.svelte │ │ │ ├── Text.svelte │ │ │ ├── Threshold.svelte │ │ │ ├── TileImage.svelte │ │ │ ├── TransformContext.svelte │ │ │ ├── TransformControls.svelte │ │ │ ├── Tree.svelte │ │ │ ├── Treemap.svelte │ │ │ ├── Voronoi.svelte │ │ │ ├── charts │ │ │ │ ├── AreaChart.svelte │ │ │ │ ├── BarChart.svelte │ │ │ │ ├── LineChart.svelte │ │ │ │ ├── PieChart.svelte │ │ │ │ ├── ScatterChart.svelte │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── layout │ │ │ │ ├── Canvas.svelte │ │ │ │ ├── Html.svelte │ │ │ │ └── Svg.svelte │ │ │ └── tooltip │ │ │ │ ├── Tooltip.svelte │ │ │ │ ├── TooltipContext.svelte │ │ │ │ ├── TooltipHeader.svelte │ │ │ │ ├── TooltipItem.svelte │ │ │ │ ├── TooltipList.svelte │ │ │ │ ├── TooltipSeparator.svelte │ │ │ │ └── index.ts │ │ ├── docs │ │ │ ├── Blockquote.svelte │ │ │ ├── Code.svelte │ │ │ ├── CurveMenuField.svelte │ │ │ ├── GeoDebug.svelte │ │ │ ├── Header1.svelte │ │ │ ├── Json.svelte │ │ │ ├── Layout.svelte │ │ │ ├── Link.svelte │ │ │ ├── PathDataMenuField.svelte │ │ │ ├── Preview.svelte │ │ │ ├── TilesetField.svelte │ │ │ ├── TransformDebug.svelte │ │ │ └── ViewSourceButton.svelte │ │ ├── index.ts │ │ ├── stores │ │ │ └── motionStore.ts │ │ └── utils │ │ │ ├── array.ts │ │ │ ├── canvas.ts │ │ │ ├── color.ts │ │ │ ├── common.test.ts │ │ │ ├── common.ts │ │ │ ├── genData.ts │ │ │ ├── geo.ts │ │ │ ├── graph.test.ts │ │ │ ├── graph.ts │ │ │ ├── hierarchy.ts │ │ │ ├── index.ts │ │ │ ├── math.ts │ │ │ ├── object.ts │ │ │ ├── path.ts │ │ │ ├── pivot.ts │ │ │ ├── quadtree.ts │ │ │ ├── rect.ts │ │ │ ├── scales.ts │ │ │ ├── stack.test.ts │ │ │ ├── stack.ts │ │ │ ├── string.ts │ │ │ ├── threshold.ts │ │ │ ├── ticks.ts │ │ │ ├── treemap.ts │ │ │ └── types.ts │ ├── routes │ │ ├── +layout.server.ts │ │ ├── +layout.svelte │ │ ├── +layout.ts │ │ ├── +page.md │ │ ├── _NavMenu.svelte │ │ ├── app.css │ │ ├── changelog │ │ │ ├── +page.svelte │ │ │ └── +page.ts │ │ ├── docs │ │ │ ├── +layout.svelte │ │ │ ├── components │ │ │ │ ├── Arc │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Area │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── AreaChart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Axis │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Bar │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── BarChart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Bars │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Blur │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Bounds │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── BrushContext │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Calendar │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Chart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ChartClipPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Circle │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── CircleClipPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ClipPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ColorRamp │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceSimulation │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Frame │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoCircle │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoContext │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoEdgeFade │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoPoint │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoSpline │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoTile │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoVisible │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Graticule │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Grid │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Group │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Highlight │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Hull │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Labels │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Legend │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Line │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── LineChart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── LinearGradient │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Link │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Marker │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── MotionPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Pack │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Partition │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Pattern │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Pie │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── PieChart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Point │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Points │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── RadialGradient │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Rect │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── RectClipPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Rule │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Sankey │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ScatterChart │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Spline │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Text │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Threshold │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── TileImage │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Tooltip │ │ │ │ │ ├── +page.svelte │ │ │ │ │ ├── +page.ts │ │ │ │ │ └── TooltipControls.svelte │ │ │ │ ├── TooltipContext │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── TransformContext │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Tree │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Treemap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ └── Voronoi │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ ├── examples │ │ │ │ ├── AnimatedGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ ├── +page.ts │ │ │ │ │ └── timings.ts │ │ │ │ ├── Arc │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Area │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Bars │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Beeswarm │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── BubbleMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Candlestick │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Choropleth │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── CollisionDetection │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Columns │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Compound │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── CountryMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Dagre │ │ │ │ │ ├── +page.svelte │ │ │ │ │ ├── +page.ts │ │ │ │ │ └── DagreControls.svelte │ │ │ │ ├── DotPlot │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── DualAxis │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── EarthquakeGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── EclipsesGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceDisjointGraph │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceDrag │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceGraph │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceGroup │ │ │ │ │ ├── +page.svelte │ │ │ │ │ ├── +page.ts │ │ │ │ │ └── dots.json │ │ │ │ ├── ForceLattice │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceText │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ForceTree │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoPath │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoPoint │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoProjection │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── GeoTile │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Histogram │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Line │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── LoftedArcs │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Oscilloscope │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Pack │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Partition │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── PunchCard │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── RadialLine │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Sankey │ │ │ │ │ ├── +page.svelte │ │ │ │ │ ├── +page.ts │ │ │ │ │ └── SankeyControls.svelte │ │ │ │ ├── Scatter │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── SketchyGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Sparkbar │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Sparkline │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── SpikeMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── StateMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── SubmarineCablesGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Sunburst │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Threshold │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Timezones │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── TranslucentGlobe │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Tree │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── Treemap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ZoomableMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ZoomableTileMap │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ └── _data │ │ │ │ │ ├── cereal.ts │ │ │ │ │ ├── flare.csv │ │ │ │ │ ├── geo │ │ │ │ │ ├── Hrr98Bdry_AK_HI_unmodified.geojson │ │ │ │ │ ├── states-albers-10m.json │ │ │ │ │ ├── us-state-labels.json │ │ │ │ │ └── us-states-data.json │ │ │ │ │ ├── hierarchy.ts │ │ │ │ │ └── temperatures.csv │ │ │ ├── performance │ │ │ │ ├── dimension_arrays │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── dimension_arrays_processed │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── series_arrays │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── wide_data │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ └── wide_data_processed │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ ├── tools │ │ │ │ ├── GeojsonPreview │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ ├── ShapefilePreview │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ │ └── TopojsonPreview │ │ │ │ │ ├── +page.svelte │ │ │ │ │ └── +page.ts │ │ │ └── utils │ │ │ │ └── pivot │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ └── getting-started │ │ │ └── +page.svelte │ └── vite-plugin-sveld.d.ts │ ├── static │ ├── audio │ │ └── yakko_world.mp3 │ ├── data │ │ └── examples │ │ │ ├── bench │ │ │ ├── dimension_arrays │ │ │ │ ├── convert.js │ │ │ │ └── data.json │ │ │ ├── docs.md │ │ │ ├── packedData.json │ │ │ ├── series_arrays │ │ │ │ ├── convert.js │ │ │ │ └── data.json │ │ │ └── wide_data │ │ │ │ ├── convert.js │ │ │ │ └── data.json │ │ │ ├── cars.csv │ │ │ ├── cars.d.ts │ │ │ ├── dailyTemperatures.csv │ │ │ ├── date │ │ │ ├── apple-stock.d.ts │ │ │ ├── apple-stock.json │ │ │ ├── apple-ticker.d.ts │ │ │ ├── apple-ticker.json │ │ │ └── daily-temperature.json │ │ │ ├── geo │ │ │ ├── eclipses.json │ │ │ ├── submarine-cables-landing-points.json │ │ │ ├── submarine-cables.json │ │ │ ├── timezones.json │ │ │ ├── us-airports.csv │ │ │ ├── us-airports.d.ts │ │ │ ├── us-county-population-2020.d.ts │ │ │ ├── us-county-population-2020.json │ │ │ ├── us-state-capitals.csv │ │ │ ├── us-state-capitals.d.ts │ │ │ ├── us-unemployment-2016.csv │ │ │ ├── walmarts.csv │ │ │ ├── world-airports.csv │ │ │ ├── world-airports.d.ts │ │ │ ├── world-capitals.d.ts │ │ │ ├── world-capitals.json │ │ │ ├── world-links.d.ts │ │ │ └── world-links.json │ │ │ ├── graph │ │ │ ├── basic.json │ │ │ ├── cluster.json │ │ │ ├── complex.json │ │ │ ├── dag-large.json │ │ │ ├── dag-medium.json │ │ │ ├── disjoint-graph.json │ │ │ ├── greenhouse.json │ │ │ ├── miserables.json │ │ │ ├── simple.json │ │ │ ├── software-user-flow.json │ │ │ ├── tcp-state.json │ │ │ └── trade-volume.json │ │ │ ├── group-data.json │ │ │ ├── hierarchy │ │ │ └── flare.json │ │ │ ├── new-passenger-cars.csv │ │ │ ├── new-passenger-cars.d.ts │ │ │ ├── olympians.d.ts │ │ │ ├── olympians.json │ │ │ ├── penguins.csv │ │ │ ├── penguins.d.ts │ │ │ ├── sfoTemperatures.csv │ │ │ ├── us-senators.csv │ │ │ ├── us-senators.d.ts │ │ │ ├── world-population-demographics.csv │ │ │ └── world-population-demographics.d.ts │ └── favicon.png │ ├── svelte.config.js │ ├── tailwind.config.cjs │ ├── themes.json │ ├── tsconfig.json │ └── vite.config.js ├── pnpm-lock.yaml └── pnpm-workspace.yaml /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json", 3 | "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "techniq/layerchart" }], 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | /**/_data/** -linguist-detectable -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [techniq] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko Fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/build-preview.yml: -------------------------------------------------------------------------------- 1 | name: Build Preview Deployment 2 | 3 | # cancel in-progress runs on new commits to same PR (github.event.number) 4 | concurrency: 5 | group: ${{ github.workflow }}-${{ github.event.number || github.sha }} 6 | cancel-in-progress: true 7 | 8 | on: 9 | pull_request: 10 | types: [opened, synchronize] 11 | 12 | jobs: 13 | build-preview: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v4 17 | - uses: pnpm/action-setup@v4 18 | - uses: actions/setup-node@v4 19 | with: 20 | node-version: 20.x 21 | cache: pnpm 22 | 23 | - name: Install dependencies 24 | run: pnpm install 25 | 26 | - name: Build site 27 | run: pnpm build 28 | 29 | - name: Upload build artifact 30 | uses: actions/upload-artifact@v4 31 | with: 32 | name: preview-build 33 | path: packages/layerchart/.svelte-kit 34 | include-hidden-files: true 35 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs 3 | 4 | name: CI 5 | 6 | on: 7 | push: 8 | branches: ['main'] 9 | pull_request: 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [20.x] 18 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 19 | 20 | steps: 21 | - uses: actions/checkout@v4 22 | - uses: pnpm/action-setup@v4.0.0 23 | - uses: actions/setup-node@v4 24 | with: 25 | node-version: ${{ matrix.node-version }} 26 | cache: pnpm 27 | 28 | - run: pnpm install --frozen-lockfile 29 | 30 | - run: pnpm check 31 | 32 | - run: pnpm lint 33 | 34 | - run: pnpm test:unit 35 | env: 36 | CI: true 37 | 38 | - run: pnpm build 39 | -------------------------------------------------------------------------------- /.github/workflows/deploy-preview.yml: -------------------------------------------------------------------------------- 1 | name: Upload Preview Deployment 2 | 3 | on: 4 | workflow_run: 5 | workflows: [Build Preview Deployment] 6 | types: 7 | - completed 8 | 9 | permissions: 10 | actions: read 11 | deployments: write 12 | contents: read 13 | pull-requests: write 14 | 15 | jobs: 16 | deploy-preview: 17 | runs-on: ubuntu-latest 18 | if: ${{ github.event.workflow_run.conclusion == 'success' }} 19 | steps: 20 | - name: Download build artifact 21 | uses: actions/download-artifact@v4 22 | id: preview-build-artifact 23 | with: 24 | name: preview-build 25 | path: build 26 | github-token: ${{ secrets.GITHUB_TOKEN }} 27 | run-id: ${{ github.event.workflow_run.id }} 28 | 29 | - name: Deploy to Cloudflare Pages 30 | uses: AdrianGonz97/refined-cf-pages-action@v1 31 | with: 32 | apiToken: ${{ secrets.CF_API_TOKEN }} 33 | accountId: ${{ secrets.CF_ACCOUNT_ID }} 34 | githubToken: ${{ secrets.GITHUB_TOKEN }} 35 | projectName: layerchart 36 | deploymentName: Preview 37 | directory: ${{ steps.preview-build-artifact.outputs.download-path }}/cloudflare 38 | -------------------------------------------------------------------------------- /.github/workflows/deploy-prod.yml: -------------------------------------------------------------------------------- 1 | name: Production Deployment 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - packages/layerchart/** 9 | 10 | jobs: 11 | deploy-production: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: read 15 | deployments: write 16 | name: Deploy Production Site to Cloudflare Pages 17 | steps: 18 | - uses: actions/checkout@v4 19 | - uses: pnpm/action-setup@v4 20 | - uses: actions/setup-node@v4 21 | with: 22 | node-version: 20.x 23 | cache: pnpm 24 | 25 | - name: Install dependencies 26 | run: pnpm install 27 | 28 | - name: Build site 29 | run: pnpm build 30 | 31 | - name: Deploy to Cloudflare Pages 32 | uses: AdrianGonz97/refined-cf-pages-action@v1 33 | with: 34 | apiToken: ${{ secrets.CF_API_TOKEN }} 35 | accountId: ${{ secrets.CF_ACCOUNT_ID }} 36 | githubToken: ${{ secrets.GITHUB_TOKEN }} 37 | projectName: layerchart 38 | directory: ./.svelte-kit/cloudflare 39 | workingDirectory: packages/layerchart 40 | deploymentName: Production 41 | -------------------------------------------------------------------------------- /.github/workflows/pkg-pr-new.yml: -------------------------------------------------------------------------------- 1 | name: Package PR 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: pnpm/action-setup@v4.0.0 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 20.x 15 | cache: pnpm 16 | 17 | - run: pnpm install --frozen-lockfile 18 | 19 | - run: pnpm build 20 | 21 | - run: pnpm package 22 | 23 | - run: pnpx pkg-pr-new publish --compact './packages/*' 24 | 25 | - run: ls -R . 26 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - next 8 | 9 | permissions: {} 10 | jobs: 11 | release: 12 | # prevents this action from running on forks 13 | if: github.repository == 'techniq/layerchart' 14 | permissions: 15 | contents: write # to create release (changesets/action) 16 | pull-requests: write # to create pull request (changesets/action) 17 | name: Release 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout Repo 21 | uses: actions/checkout@v4 22 | with: 23 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 24 | fetch-depth: 0 25 | - uses: pnpm/action-setup@v4.0.0 26 | - name: Setup Node.js 27 | uses: actions/setup-node@v4 28 | with: 29 | node-version: 20.x 30 | cache: pnpm 31 | 32 | - run: pnpm install --frozen-lockfile 33 | 34 | - name: Create Release Pull Request or Publish to npm 35 | id: changesets 36 | uses: changesets/action@v1 37 | with: 38 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 39 | publish: pnpm changeset:release 40 | version: pnpm changeset:version 41 | env: 42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 43 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | tsconfig.tsbuildinfo 4 | coverage/ 5 | .next/ 6 | .idea/ 7 | .svelte-kit/ 8 | .env 9 | .DS_Store 10 | 11 | test-* 12 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | 3 | # Fix "ERR_PNPM_BAD_PM_VERSION  This project is configured to use v9.1.1 of pnpm. Your current pnpm is v9.0.4" on Vercel 4 | # https://github.com/pnpm/pnpm/issues/8087#issuecomment-2118489643 5 | package-manager-strict=false 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 100, 4 | "trailingComma": "es5", 5 | "plugins": ["prettier-plugin-svelte"], 6 | "overrides": [ 7 | { 8 | "files": "*.svelte", 9 | "options": { 10 | "parser": "svelte" 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 Sean Lynch 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "layerchart-monorepo", 3 | "version": "0.0.1", 4 | "author": "Sean Lynch ", 5 | "license": "MIT", 6 | "type": "module", 7 | "scripts": { 8 | "test:unit": "pnpm -r test:unit", 9 | "build": "rimraf packages/*/dist && pnpm -r build", 10 | "package": "pnpm -r package", 11 | "check": "pnpm -r check", 12 | "lint": "pnpm -r lint", 13 | "format": "pnpm -r format", 14 | "changeset": "changeset", 15 | "changeset:version": "changeset version", 16 | "changeset:release": "changeset publish", 17 | "up-deps": "pnpm update -r -i --latest" 18 | }, 19 | "devDependencies": { 20 | "@changesets/cli": "2.29.4", 21 | "@svitejs/changesets-changelog-github-compact": "^1.2.0", 22 | "rimraf": "6.0.1", 23 | "wrangler": "^4.14.4" 24 | }, 25 | "packageManager": "pnpm@9.1.1" 26 | } 27 | -------------------------------------------------------------------------------- /packages/layerchart/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /dist 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | static/data/ 11 | **/examples/_data/ 12 | 13 | # Ignore files for PNPM, NPM and YARN 14 | pnpm-lock.yaml 15 | package-lock.json 16 | yarn.lock 17 | -------------------------------------------------------------------------------- /packages/layerchart/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2024 Sean Lynch 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/layerchart/README.md: -------------------------------------------------------------------------------- 1 | # LayerChart 2 | 3 | ![](https://img.shields.io/github/license/techniq/layerchart?style=flat) 4 | [![](https://img.shields.io/npm/v/layerchart?style=flat)](https://www.npmjs.com/package/layerchart) 5 | ![npm](https://img.shields.io/npm/dw/layerchart?style=flat&color=orange) 6 | 7 | ![](https://img.shields.io/github/license/layerchart?style=flat) 8 | [![](https://dcbadge.vercel.app/api/server/697JhMPD3t?style=flat)](https://discord.gg/697JhMPD3t) 9 | 10 | A large collection of composable Svelte chart components to build a wide range of visualizations 11 | 12 | - Cartesian (Bar, Area, Stack, Scatter) 13 | - Radial (Pie, Arc, Sunburst) 14 | - Hierarchy (Pack, Tree, Treemap, Sunburst) 15 | - Graph (Sankey) 16 | - Geo (Choropleth, Spike, Bubble, Point, Globe) 17 | 18 | Interactions 19 | 20 | - Tooltip, Highlights, Pan/Zoom 21 | 22 | SVG 23 | 24 | - Basic (Arc, Circle, Group, Line, Spline, Text) 25 | - Gradients and Patterns 26 | - ClipPath 27 | - Multi-line text 28 | 29 | Others 30 | 31 | - Legends including ColorRamps 32 | 33 | See also [Svelte UX](http://svelte-ux.techniq.dev) for a large collection of components, actions, stores, and utilities to build highly interactive applications. 34 | 35 | ## Publishing 36 | 37 | - `npm run changeset` for each changelog worthy change 38 | - `npm run version` to bump `package.json` version based on changesets, materialize changesets into CHANGELOG.md 39 | - Commit as `Version bump to x.y.z` (TODO: automate) 40 | - `npm run publish` to publish version to npm 41 | - `git push --tags` to publish tags to Github 42 | -------------------------------------------------------------------------------- /packages/layerchart/git-changelog.js: -------------------------------------------------------------------------------- 1 | import { $ } from 'execa'; 2 | import * as fs from 'fs/promises'; 3 | 4 | const logs = (await $`git log --pretty=oneline`).stdout.split('\n'); 5 | 6 | const commitsByVersion = new Map(); 7 | let currentVersion = 'next'; 8 | commitsByVersion.set(currentVersion, []); 9 | 10 | for (const log of logs) { 11 | const [s1, sha, message] = log.match(/^(\w*) (.*)/); 12 | const [s2, version] = message?.match(/Version bump to (\d+\.\d+\.\d+)/) ?? []; 13 | 14 | if (version) { 15 | currentVersion = version; 16 | commitsByVersion.set(currentVersion, []); 17 | } else { 18 | const commits = commitsByVersion.get(currentVersion); 19 | commits.push({ 20 | sha, 21 | message, 22 | }); 23 | } 24 | } 25 | 26 | let changelog = ''; 27 | for (const [version, commits] of commitsByVersion) { 28 | changelog += `## ${version}\n\n`; 29 | 30 | changelog += `### Commits\n\n`; 31 | 32 | for (const { sha, message } of commits) { 33 | changelog += `- ${message} ([${sha.slice( 34 | 0, 35 | 6 36 | )}](https://github.com/techniq/svelte-ux/commit/${sha}))\n`; 37 | } 38 | 39 | changelog += `\n`; 40 | } 41 | 42 | await fs.writeFile('CHANGELOG_COMMITS.md', changelog); 43 | -------------------------------------------------------------------------------- /packages/layerchart/mdsvex.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url'; 2 | import { dirname } from 'node:path'; 3 | import slug from 'rehype-slug'; 4 | 5 | export default { 6 | extensions: ['.md', '.svx'], 7 | // https://github.com/pngwn/MDsveX/issues/556 8 | layout: dirname(fileURLToPath(import.meta.url)) + '/src/lib/docs/Layout.svelte', 9 | rehypePlugins: [slug], 10 | // highlight: false 11 | }; 12 | -------------------------------------------------------------------------------- /packages/layerchart/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'tailwindcss/nesting': {}, 4 | tailwindcss: {}, 5 | autoprefixer: {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/layerchart/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | // and what to do when importing types 4 | declare namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | 8 | interface PageData { 9 | meta: { 10 | title?: string; 11 | description?: string; 12 | source?: string; 13 | pageSource?: string; 14 | api?: SveldJson; 15 | features?: string[]; 16 | related?: string[]; 17 | hideUsage?: boolean; 18 | hideTableOfContents?: boolean; 19 | status?: string; 20 | }; 21 | } 22 | 23 | // interface PageState {} 24 | // interface Platform {} 25 | } 26 | 27 | // TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things? 28 | // https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md 29 | declare namespace svelteHTML { 30 | interface LayerStackActionEvents { 31 | // use:intersection 32 | 'on:intersecting'?: (event: CustomEvent) => void; 33 | 34 | // use:mutate 35 | 'on:mutate'?: (event: CustomEvent) => void; 36 | 37 | // use:movable 38 | 'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; 39 | 'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; 40 | 'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; 41 | 42 | // use:popover 43 | 'on:clickOutside'?: (event: CustomEvent) => void; 44 | 45 | // use:overflow 46 | 'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; 47 | 48 | // use:longpress 49 | 'on:longpress'?: (event: CustomEvent) => void; 50 | } 51 | 52 | interface HTMLAttributes extends LayerStackActionEvents {} 53 | interface SVGAttributes extends LayerStackActionEvents {} 54 | } 55 | -------------------------------------------------------------------------------- /packages/layerchart/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Blur.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {#if $$slots.default} 15 | 16 | 17 | 18 | {/if} 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Bounds.svelte: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/ChartClipPath.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/CircleClipPath.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/ClipPath.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | {#if useId} 19 | 20 | {/if} 21 | 22 | 23 | 24 | {#if $$slots.default} 25 | {#if disabled} 26 | 27 | {:else} 28 | 29 | 30 | 31 | 32 | {/if} 33 | {/if} 34 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/ColorRamp.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/ComputedStyles.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
(styles = _styles)} 14 | >
15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Frame.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/GeoCircle.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/GeoEdgeFade.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/GeoPoint.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | {#if renderContext === 'svg'} 24 | {#if $$slots.default} 25 | 26 | 27 | 28 | {:else} 29 | 30 | {/if} 31 | {/if} 32 | 33 | {#if renderContext === 'canvas'} 34 | {#if $$slots.default} 35 | 36 | 37 | 38 | 39 | {:else} 40 | 41 | {/if} 42 | {/if} 43 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/GeoSpline.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 | d[0]} y={(d) => d[1]} {curve} {...$$restProps} /> 37 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/GeoVisible.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | {#if isVisible($geo)([long, lat])} 14 | 15 | {/if} 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Graticule.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | {#if !lines && !outline} 20 | 21 | {/if} 22 | 23 | {#if lines} 24 | {#each graticule.lines() as line} 25 | 26 | {/each} 27 | {/if} 28 | 29 | {#if outline} 30 | 31 | {/if} 32 | 33 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/MonthPath.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/MotionPath.svelte: -------------------------------------------------------------------------------- 1 | 37 | 38 | 39 | 47 | 48 | 49 | 50 | 51 | {#if $$slots.default} 52 | 53 | {/if} 54 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Pack.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Partition.svelte: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Pattern.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Point.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/RectClipPath.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Sankey.svelte: -------------------------------------------------------------------------------- 1 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Threshold.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | {#key curve} 23 | 24 | 25 | $y(d)[0]} y1={(d) => min($yDomain)} {curve} {defined} /> 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | min($yDomain)} y1={(d) => $y(d)[1]} {curve} {defined} /> 34 | 35 | 36 | 37 | 38 | 39 | 40 | {/key} 41 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/Tree.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/charts/index.ts: -------------------------------------------------------------------------------- 1 | export { default as AreaChart } from './AreaChart.svelte'; 2 | export { default as BarChart } from './BarChart.svelte'; 3 | export { default as LineChart } from './LineChart.svelte'; 4 | export { default as PieChart } from './PieChart.svelte'; 5 | export { default as ScatterChart } from './ScatterChart.svelte'; 6 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
23 | {#if color} 24 |
28 | {/if} 29 | {format ? formatUtil(value, format) : value} 30 |
31 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
31 |
32 | {#if color} 33 |
37 | {/if} 38 | {label} 39 |
40 | 41 |
53 | {format ? formatUtil(value, format) : value} 54 |
55 |
56 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/tooltip/TooltipList.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Context } from './TooltipContext.svelte'; 2 | export { default as Header } from './TooltipHeader.svelte'; 3 | export { default as Item } from './TooltipItem.svelte'; 4 | export { default as List } from './TooltipList.svelte'; 5 | export { default as Separator } from './TooltipSeparator.svelte'; 6 | export { default as Root } from './Tooltip.svelte'; 7 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Blockquote.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2' 11 | )} 12 | > 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Code.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 | {#if source} 22 |
23 | 
26 |           {@html highlightedSource}
27 |
28 | 29 |
30 | 35 |
36 |
37 | {/if} 38 |
39 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/CurveMenuField.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | 34 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/GeoDebug.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 |
scale: {format($geo.scale(), 'decimal')}
18 | 19 |
20 | translate: 21 | {#each $geo.translate() as coord} 22 |
{format(coord, 'decimal')}
23 | {/each} 24 |
25 | 26 |
27 | rotate: 28 | {#each $geo.rotate() as angle} 29 |
{format(angle, 'decimal')}
30 | {/each} 31 |
32 | 33 |
34 | center: 35 | 36 | {$geo.center?.()} 37 | 38 |
39 | 40 |
41 | long/lat: 42 | {#each $geo.invert?.([$width / 2, $height / 2]) ?? [] as coord} 43 |
{format(coord, 'decimal')}
44 | {/each} 45 |
46 |
47 |
48 | 49 | {#if showCenter} 50 |
53 | {/if} 54 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Header1.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Json.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | 28 |
29 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Layout.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/Link.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/PathDataMenuField.svelte: -------------------------------------------------------------------------------- 1 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/TransformDebug.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 |
scale: {format($scale, 'decimal')}
14 | 15 |
16 | translate: 17 |
{format($translate.x, 'decimal')}
18 |
{format($translate.y, 'decimal')}
19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/docs/ViewSourceButton.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | {#if source} 15 | 16 | 17 | 22 |
23 |
24 |
{label}
25 |
{href}
26 |
27 | 28 | {#if href} 29 | 32 | {/if} 33 |
34 | 35 |
36 | 37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 | {:else if href} 45 | 46 | 49 | 50 | {/if} 51 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components/index.js'; 2 | export * from './utils/index.js'; 3 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/array.ts: -------------------------------------------------------------------------------- 1 | import type { Numeric } from 'd3-array'; 2 | import { extent as d3extent } from 'd3-array'; 3 | 4 | /** 5 | * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type 6 | */ 7 | export function extent(iterable: Parameters>[0]) { 8 | return d3extent(iterable) as [T, T]; 9 | } 10 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/color.ts: -------------------------------------------------------------------------------- 1 | /** Generator to create a new color on each call */ 2 | export function* rgbColorGenerator(step = 500) { 3 | let nextColor = 0; 4 | 5 | while (nextColor < 16777216) { 6 | const r = nextColor & 0xff; 7 | const g = (nextColor & 0xff00) >> 8; 8 | const b = (nextColor & 0xff0000) >> 16; 9 | 10 | nextColor += step; 11 | yield { r, g, b, a: 255 }; 12 | } 13 | 14 | return { r: 0, g: 0, b: 0, a: 255 }; 15 | } 16 | 17 | type RGBColor = { r: number; g: number; b: number; a?: number }; 18 | 19 | export function getColorStr(color: RGBColor) { 20 | if (color.a !== undefined) { 21 | return `rgba(${color.r},${color.g},${color.b},${color.a})`; 22 | } else { 23 | return `rgb(${color.r},${color.g},${color.b})`; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/common.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | 3 | import { accessor } from './common.js'; 4 | 5 | export const testData = { 6 | one: 1, 7 | two: 2, 8 | obj: { value: 2 }, 9 | arr: ['one', 'two', 'three'], 10 | }; 11 | 12 | describe('accessor', () => { 13 | it('string path', () => { 14 | const actual = accessor('one')(testData); 15 | expect(actual).toEqual(testData.one); 16 | }); 17 | 18 | it('nested path', () => { 19 | const actual = accessor('obj.value')(testData); 20 | expect(actual).toEqual(testData.obj.value); 21 | }); 22 | 23 | it('multiple properties', () => { 24 | const actual = accessor(['one', 'two', 'obj.value', (d) => d.arr[0]])(testData); 25 | expect(actual).toEqual([testData.one, testData.two, testData.obj.value, testData.arr[0]]); 26 | }); 27 | 28 | it('multiple properties as numbers (index)', () => { 29 | const actual = accessor([0, 1])(testData.arr); 30 | expect(actual).toEqual([testData.arr[0], testData.arr[1]]); 31 | }); 32 | 33 | it('function', () => { 34 | const actual = accessor((d) => d.obj.value)(testData); 35 | expect(actual).toEqual(testData.obj.value); 36 | }); 37 | 38 | it('string path with array value', () => { 39 | const actual = accessor('arr[0]')(testData); 40 | expect(actual).toEqual(testData.arr[0]); 41 | }); 42 | 43 | it('null returns full object', () => { 44 | const actual = accessor(null)(testData); 45 | expect(actual).toEqual(testData); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/hierarchy.ts: -------------------------------------------------------------------------------- 1 | import type { HierarchyNode } from 'd3-hierarchy'; 2 | 3 | /** 4 | * Find first ancestor matching filter, including node. 5 | * Similar to `node.find()` (https://github.com/d3/d3-hierarchy#node_find) but checks ancestors instead of descendants 6 | */ 7 | export function findAncestor( 8 | node: HierarchyNode, 9 | filter: (node: HierarchyNode) => boolean 10 | ) { 11 | while (node) { 12 | if (filter(node)) { 13 | return node; 14 | } 15 | // @ts-expect-error 16 | node = node.parent; 17 | } 18 | 19 | return null; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './canvas.js'; 2 | export * from './common.js'; 3 | export * from './geo.js'; 4 | export * from './graph.js'; 5 | export * from './hierarchy.js'; 6 | export * from './math.js'; 7 | export * from './path.js'; 8 | export * from './pivot.js'; 9 | export * from './stack.js'; 10 | export * from './ticks.js'; 11 | export * from './threshold.js'; 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/math.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Convert degrees to radians 3 | */ 4 | export function degreesToRadians(degrees: number) { 5 | return (degrees * Math.PI) / 180; 6 | } 7 | 8 | /** 9 | * Convert radians to degrees 10 | */ 11 | export function radiansToDegrees(radians: number) { 12 | return radians * (180 / Math.PI); 13 | } 14 | 15 | /** 16 | * Convert polar to cartesian coordinate system. 17 | * see also: https://d3js.org/d3-shape/symbol#pointRadial 18 | * @param angle - Angle in radians 19 | * @param radius - Radius 20 | */ 21 | export function polarToCartesian(angle: number, radius: number) { 22 | return { 23 | x: Math.cos(angle) * radius, 24 | y: Math.sin(angle) * radius, 25 | }; 26 | } 27 | 28 | /** 29 | * Convert cartesian to polar coordinate system. Angle in radians with 0 at the 12 o'clock position 30 | */ 31 | export function cartesianToPolar(x: number, y: number) { 32 | let radians = Math.atan2(y, x); 33 | 34 | radians += Math.PI / 2; // shift 90 degrees to align 0deg at 12 o'clock 35 | 36 | // Ensure the result is between 0 and 2π 37 | if (radians < 0) { 38 | radians += 2 * Math.PI; 39 | } 40 | 41 | return { 42 | radius: Math.sqrt(x ** 2 + y ** 2), 43 | radians, 44 | }; 45 | } 46 | 47 | /** Convert celsius temperature to fahrenheit */ 48 | export function celsiusToFahrenheit(temperature: number) { 49 | return temperature * (9 / 5) + 32; 50 | } 51 | 52 | /** Convert fahrenheit temperature to celsius */ 53 | export function fahrenheitToCelsius(temperature: number) { 54 | return (temperature - 32) * (5 / 9); 55 | } 56 | 57 | /** Parse percent string (`50%`) to decimal (`0.5`) */ 58 | export function parsePercent(percent: string | number) { 59 | if (typeof percent === 'number') { 60 | // Assume already decimal 61 | return percent; 62 | } else { 63 | return Number(percent.replace('%', '')) / 100; 64 | } 65 | } 66 | 67 | /** Add second value while maintaining `Date` or `number` type */ 68 | export function add(value1: Date | number, value2: number) { 69 | if (value1 instanceof Date) { 70 | return new Date(value1.getTime() + value2); 71 | } else { 72 | return value1 + value2; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/object.ts: -------------------------------------------------------------------------------- 1 | import { memoize } from 'lodash-es'; 2 | 3 | export const memoizeObject = memoize( 4 | (obj) => obj, 5 | (obj) => JSON.stringify(obj) 6 | ); 7 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/pivot.ts: -------------------------------------------------------------------------------- 1 | import { group } from 'd3-array'; 2 | 3 | /** 4 | * Pivot longer (columns to rows) 5 | * - see: https://observablehq.com/d/3ea8d446f5ba96fe 6 | * - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator 7 | */ 8 | export function pivotLonger(data: any[], columns: string[], name: string, value: string) { 9 | const keep = Object.keys(data[0]).filter((c) => !columns.includes(c)); 10 | return data.flatMap((d) => { 11 | const base = keep.map((k) => [k, d[k]]); 12 | return columns.map((column) => { 13 | return Object.fromEntries([...base, [name, column], [value, d[column]]]); 14 | }); 15 | }); 16 | } 17 | 18 | /** 19 | * Pivot wider (rows to columns) 20 | * - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983 21 | */ 22 | export function pivotWider(data: any[], column: string, name: string, value: string) { 23 | return Array.from( 24 | group(data, (d) => d[column]), 25 | ([columnVal, items]) => 26 | Object.fromEntries([[column, columnVal]].concat(items.map((d) => [d[name], d[value]]))) 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/quadtree.ts: -------------------------------------------------------------------------------- 1 | import type { Quadtree } from 'd3-quadtree'; 2 | 3 | type Rect = { x: number; y: number; width: number; height: number }; 4 | 5 | /** 6 | * Transverse quadtree and generate rect dimensions 7 | */ 8 | export function quadtreeRects(quadtree: Quadtree, showLeaves = true) { 9 | const rects: Rect[] = []; 10 | 11 | quadtree.visit((node, x0, y0, x1, y1) => { 12 | if (showLeaves || Array.isArray(node)) { 13 | rects.push({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }); 14 | } 15 | }); 16 | return rects; 17 | } 18 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/threshold.ts: -------------------------------------------------------------------------------- 1 | import { range, type ThresholdNumberArrayGenerator } from 'd3-array'; 2 | import { scaleTime } from 'd3-scale'; 3 | 4 | /** 5 | * Useful threshold function when using Dates 6 | * https://observablehq.com/@d3/d3-bin-time-thresholds 7 | */ 8 | export function thresholdTime(n: number): ThresholdNumberArrayGenerator { 9 | // TODO: Unable to satisfy `ThresholdNumberArrayGenerator` with `Date` 10 | // @ts-expect-error 11 | return (data, min, max) => { 12 | return scaleTime().domain([min, max]).ticks(n); 13 | }; 14 | } 15 | 16 | /** 17 | * Explicit threshold chunks without nicing (not recommended) 18 | * see: https://observablehq.com/@d3/d3-bin#bin26 19 | */ 20 | export function thresholdChunks(chunks: number) { 21 | return (data: number[], min: number, max: number) => 22 | range(chunks).map((t) => min + (t / chunks) * (max - min)); 23 | } 24 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/treemap.ts: -------------------------------------------------------------------------------- 1 | import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy'; 2 | 3 | type TileFunc = ( 4 | node: HierarchyRectangularNode, 5 | x0: number, 6 | y0: number, 7 | x1: number, 8 | y1: number 9 | ) => void; 10 | 11 | /** 12 | * This custom tiling function adapts the tiling function 13 | * for the appropriate aspect ratio when the treemap is zoomed-in. 14 | * see: https://observablehq.com/@d3/zoomable-treemap#tile and https://observablehq.com/@d3/stretched-treemap 15 | */ 16 | export function aspectTile(tile: TileFunc, width: number, height: number): TileFunc { 17 | return (node, x0, y0, x1, y1) => { 18 | tile(node, 0, 0, width, height); 19 | for (const child of node.children ?? []) { 20 | child.x0 = x0 + (child.x0 / width) * (x1 - x0); 21 | child.x1 = x0 + (child.x1 / width) * (x1 - x0); 22 | child.y0 = y0 + (child.y0 / height) * (y1 - y0); 23 | child.y1 = y0 + (child.y1 / height) * (y1 - y0); 24 | } 25 | }; 26 | } 27 | 28 | /** 29 | * Show if the node (a) is a child of the selected (b), or any parent above selected 30 | */ 31 | export function isNodeVisible(a: HierarchyNode, b: HierarchyNode | null) { 32 | while (b) { 33 | if (a.parent === b) return true; 34 | b = b.parent; 35 | } 36 | 37 | return false; 38 | } 39 | -------------------------------------------------------------------------------- /packages/layerchart/src/lib/utils/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Useful to workaround Svelte 3/4 markup type issues 3 | * TODO: Remove usage after migrating to Svelte 5 4 | */ 5 | export function asAny(x: any): any { 6 | return x; 7 | } 8 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/+layout.server.ts: -------------------------------------------------------------------------------- 1 | import { getThemeNames } from '@layerstack/tailwind'; 2 | // import { env } from '$env/dynamic/private'; 3 | 4 | import themes from '../../themes.json' with { type: 'json' }; 5 | 6 | export async function load() { 7 | return { 8 | themes: getThemeNames(themes), 9 | // pr_id: env.VERCEL_GIT_PULL_REQUEST_ID, // TODO: Re-add once SvelteKit updated to `2.3.2+` - https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%402.3.2 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | import posthog from 'posthog-js'; 2 | 3 | import { browser, dev } from '$app/environment'; 4 | 5 | // Disable server-side rendering until AppLayout shift is fixed (issue #22) 6 | export const ssr = false; 7 | 8 | export const load = async () => { 9 | // Setup Posthog 10 | if (browser && !dev) { 11 | // @ts-expect-error 12 | posthog.init('phc_EjObiSURIW3vFLwJYNXQ1DumcnVPI28mO5nbTRVPjs0', { 13 | api_host: 'https://app.posthog.com', 14 | capture_pageview: false, 15 | capture_pageleave: false, 16 | }); 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/+page.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Welcome to LayerChart

4 | 5 | LayerChart is a large collection of visualization components and utilities for [Svelte](https://svelte.dev/), built upon the wonderful [Layer Cake](https://layercake.graphics/) framework. 6 | 7 | The goal is to provide a collection of useful but mostly unopinionated components as building blocks for a wide range of visualizations, such as: 8 | 9 | - Cartesian (Bar, Area, Stack, Scatter, ...) 10 | - Radial (Pie, Arc, Sunburst, ...) 11 | - Hierarchy (Pack, Tree, Treemap, Sunburst, ...) 12 | - Graph (Sankey, ...) 13 | - Geo (Choropleth, Spike, Bubble, Point, Globe, ...) 14 | 15 | The library accomplishes this through a large assortment of components: 16 | 17 | - Data-driven components (Area, Bars, Spline, ...) 18 | - Motion-enabled SVG primitives (Rect, Circle, Arc, Group, ...) 19 | - SVG utilities (gradient/patterns, clipping, multi-line SVG text, motion path, ...) 20 | - Interaction (tooltip, pan/zoom) 21 | - Hierarchy layout and geo projections 22 | - Legends, annotations, and many more! 23 | 24 | ## Getting Started 25 | 26 | Take a look at the various examples to understand the capabilities and go to [Getting Started](/getting-started) to install it for yourself. 27 | 28 |
29 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/app.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | @apply bg-surface-200 accent-primary; 7 | /* background-image: 8 | radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%), 9 | radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */ 10 | } 11 | 12 | nav h1 { 13 | @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b; 14 | } 15 | 16 | nav h2 { 17 | @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold; 18 | } 19 | 20 | main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) { 21 | scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */ 22 | } 23 | 24 | main h1:not(.prose *, .related *, .ApiDocs *) { 25 | @apply text-xl font-semibold mt-4 mb-2 border-b pb-1; 26 | } 27 | 28 | main h2:not(.prose *, .related *, .ApiDocs *) { 29 | @apply text-lg font-semibold mt-4 mb-1; 30 | } 31 | 32 | main h3:not(.prose *, .related *, .ApiDocs *) { 33 | @apply text-xs text-surface-content/50 mb-1; 34 | } 35 | main :not(.prose) h2 + h3 { 36 | @apply -mt-1; 37 | } 38 | 39 | main small { 40 | @apply text-xs text-surface-content/50 inline-block; 41 | } 42 | 43 | .TableOfContents small { 44 | @apply hidden; 45 | } 46 | 47 | /* Code/Preview backgrounds */ 48 | pre[class*='language-'] { 49 | @apply bg-surface-content; 50 | } 51 | 52 | .dark pre[class*='language-'] { 53 | @apply bg-surface-300; 54 | } 55 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/changelog/+page.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | {@html marked.parse(sanitize(data.changelog))} 15 |
16 | 17 | 25 |
26 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/changelog/+page.ts: -------------------------------------------------------------------------------- 1 | export async function load() { 2 | return { 3 | changelog: await fetch( 4 | 'https://raw.githubusercontent.com/techniq/layerchart/main/packages/layerchart/CHANGELOG.md' 5 | ).then(async (r) => await r.text()), 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Arc/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Arc.svelte?raw&sveld'; 2 | import source from '$lib/components/Arc.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Pie', 'examples/Arc'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Area/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Area.svelte?raw&sveld'; 2 | import source from '$lib/components/Area.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Area'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Axis/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Axis.svelte?raw&sveld'; 2 | import source from '$lib/components/Axis.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Grid', 'components/Rule'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bar/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bar/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Bar.svelte?raw&sveld'; 2 | import source from '$lib/components/Bar.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Bars', 'examples/Bars', 'examples/Columns'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/BarChart/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | 3 | import api from '$lib/components/charts/BarChart.svelte?raw&sveld'; 4 | import source from '$lib/components/charts/BarChart.svelte?raw'; 5 | import pageSource from './+page.svelte?raw'; 6 | 7 | import type { WorldPopulationDemographicsData } from '$static/data/examples/world-population-demographics.js'; 8 | 9 | export async function load() { 10 | return { 11 | worldPopulationDemographics: (await fetch( 12 | '/data/examples/world-population-demographics.csv' 13 | ).then(async (r) => csvParse(await r.text(), autoType))) as WorldPopulationDemographicsData, 14 | meta: { 15 | api, 16 | source, 17 | pageSource, 18 | description: 'Streamlined Chart configuration for Bar charts', 19 | related: [ 20 | 'components/Chart', 21 | 'components/Bars', 22 | 'examples/Bars', 23 | 'examples/Histogram', 24 | 'examples/Sparkbar', 25 | ], 26 | }, 27 | }; 28 | } 29 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bars/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bars/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Bars.svelte?raw&sveld'; 2 | import source from '$lib/components/Bars.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Bar', 'examples/Bars', 'examples/Columns', 'examples/Histogram'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Blur/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 |
TODO
11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Blur/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Blur.svelte?raw&sveld'; 2 | import source from '$lib/components/Blur.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bounds/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Bounds/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Bounds.svelte?raw&sveld'; 2 | import source from '$lib/components/Bounds.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Partition', 'examples/Sunburst', 'examples/Treemap'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/BrushContext/+page.ts: -------------------------------------------------------------------------------- 1 | import { parse } from '@layerstack/utils'; 2 | 3 | import api from '$lib/components/BrushContext.svelte?raw&sveld'; 4 | import source from '$lib/components/BrushContext.svelte?raw'; 5 | import pageSource from './+page.svelte?raw'; 6 | import type { AppleStockData } from '$static/data/examples/date/apple-stock.js'; 7 | 8 | export async function load() { 9 | return { 10 | appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) => 11 | parse(await r.text()) 12 | ), 13 | meta: { 14 | api, 15 | source, 16 | pageSource, 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Calendar/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Calendar.svelte?raw&sveld'; 2 | import source from '$lib/components/Calendar.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Chart/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Chart/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Chart.svelte?raw&sveld'; 2 | import source from '$lib/components/Chart.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | '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', 13 | features: ['Adds support for x and y baselines (always show 0, etc)'], 14 | related: [ 15 | 'components/AreaChart', 16 | 'components/BarChart', 17 | 'components/TooltipContext', 18 | 'components/GeoContext', 19 | ], 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ChartClipPath/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ChartClipPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ChartClipPath.svelte?raw&sveld'; 2 | import source from '$lib/components/ChartClipPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Convenient way to clip specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc)', 13 | related: [ 14 | 'components/RectClipPath', 15 | 'components/Rect', 16 | 'examples/Area', 17 | 'examples/Partition', 18 | 'examples/StateMap', 19 | 'examples/Treemap', 20 | ], 21 | }, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Circle/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Circle/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Circle.svelte?raw&sveld'; 2 | import source from '$lib/components/Circle.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: '`` element with tweened properties using `motionStore`', 12 | related: ['components/Points', 'examples/Pack', 'examples/PunchCard'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/CircleClipPath/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/CircleClipPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/CircleClipPath.svelte?raw&sveld'; 2 | import source from '$lib/components/CircleClipPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ClipPath/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ClipPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ClipPath.svelte?raw&sveld'; 2 | import source from '$lib/components/ClipPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/ChartClipPath', 13 | 'components/CircleClipPath', 14 | 'components/RectClipPath', 15 | 'components/Threshold', 16 | 'examples/GeoTile', 17 | 'examples/Timezones', 18 | ], 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ColorRamp/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ColorRamp.svelte?raw&sveld'; 2 | import source from '$lib/components/ColorRamp.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ForceSimulation/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ForceSimulation/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/ForceSimulation.svelte?raw&sveld'; 2 | import source from '$lib/components/ForceSimulation.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'examples/Beeswarm', 13 | 'examples/CollisionDetection', 14 | 'examples/ForceGroup', 15 | 'examples/ForceLattice', 16 | 'examples/ForceTree', 17 | ], 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Frame/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Frame.svelte?raw&sveld'; 2 | import source from '$lib/components/Frame.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoCircle/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoCircle.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoCircle.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | import type { GeometryCollection, Topology } from 'topojson-specification'; 5 | 6 | export async function load() { 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 9 | (r) => r.json() 10 | )) as Topology<{ 11 | countries: GeometryCollection<{ name: string }>; 12 | land: GeometryCollection; 13 | }>, 14 | meta: { 15 | api, 16 | source, 17 | pageSource, 18 | related: ['examples/Timezones'], 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoContext/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoContext/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoContext.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoContext.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Setup geo context, particularly the projection used by other geo components. Typically used indirectly via the `geo` prop on Chart', 13 | related: ['components/Chart'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoEdgeFade/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoEdgeFade.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoEdgeFade.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/LoftedArcs'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoPath/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoPath.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Graticule', 13 | 'examples/AnimatedGlobe', 14 | 'examples/BubbleMap', 15 | 'examples/Choropleth', 16 | 'examples/CountryMap', 17 | 'examples/GeoPath', 18 | 'examples/GeoPoint', 19 | 'examples/GeoProjection', 20 | 'examples/GeoTile', 21 | 'examples/LoftedArcsGlobe', 22 | 'examples/SpikeMap', 23 | 'examples/StateMap', 24 | 'examples/ZoomableMap', 25 | 'examples/ZoomableTileMap', 26 | ], 27 | }, 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoPoint/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoPoint/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoPoint.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoPoint.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/GeoPoint'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoSpline/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoSpline/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoSpline.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoSpline.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/LoftedArcs'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoTile/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoTile/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoTile.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoTile.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/GeoTile', 'examples/ZoomableTileMap'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoVisible/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/GeoVisible/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/GeoVisible.svelte?raw&sveld'; 2 | import source from '$lib/components/GeoVisible.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/SubmarineCablesGlobe'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Graticule/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Graticule/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Graticule.svelte?raw&sveld'; 2 | import source from '$lib/components/Graticule.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/AnimatedGlobe', 'examples/GeoProjection', 'examples/LoftedArcsGlobe'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Grid/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Grid.svelte?raw&sveld'; 2 | import source from '$lib/components/Grid.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Axis', 'components/Rule'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Group/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Group/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Group.svelte?raw&sveld'; 2 | import source from '$lib/components/Group.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | '`` element with convenient x/y and center placement along with tweened properties using `motionStore`', 13 | related: [ 14 | 'examples/Pack', 15 | 'examples/Partition', 16 | 'examples/Sankey', 17 | 'examples/SpikeMap', 18 | 'examples/Sunburst', 19 | 'examples/Tree', 20 | 'examples/Treemap', 21 | ], 22 | }, 23 | }; 24 | } 25 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Highlight/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Highlight/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Highlight.svelte?raw&sveld'; 2 | import source from '$lib/components/Highlight.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Tooltip', 'components/TooltipContext'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Hull/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | 3 | import pageSource from './+page.svelte?raw'; 4 | import api from '$lib/components/Hull.svelte?raw&sveld'; 5 | import source from '$lib/components/Hull.svelte?raw'; 6 | import type { GeometryCollection, Topology } from 'topojson-specification'; 7 | import type { USStateCapitalsData } from '$static/data/examples/geo/us-state-capitals.js'; 8 | 9 | export async function load() { 10 | return { 11 | groupData: (await fetch('/data/examples/group-data.json').then((r) => r.json())) as { 12 | x: number; 13 | y: number; 14 | group: string; 15 | }[], 16 | us: { 17 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) => 18 | r.json() 19 | )) as Topology<{ 20 | states: GeometryCollection<{ name: string }>; 21 | }>, 22 | stateCaptitals: (await fetch('/data/examples/geo/us-state-capitals.csv').then(async (r) => 23 | csvParse(await r.text(), autoType) 24 | )) as USStateCapitalsData, 25 | }, 26 | meta: { 27 | api, 28 | source, 29 | pageSource, 30 | }, 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Labels/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Labels/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Labels.svelte?raw&sveld'; 2 | import source from '$lib/components/Labels.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'examples/Area', 13 | 'examples/Bars', 14 | 'examples/Columns', 15 | 'examples/Line', 16 | 'examples/Scatter', 17 | 'examples/Threshold', 18 | ], 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Legend/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Legend.svelte?raw&sveld'; 2 | import source from '$lib/components/Legend.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Line/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

Examples

8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Line/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Line.svelte?raw&sveld'; 2 | import source from '$lib/components/Line.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: '`` element with tweened properties using `motionStore`', 12 | related: ['components/Rule', 'components/Spline'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/LineChart/+page.ts: -------------------------------------------------------------------------------- 1 | import { csvParse, autoType } from 'd3-dsv'; 2 | import { parse } from '@layerstack/utils'; 3 | 4 | import api from '$lib/components/charts/LineChart.svelte?raw&sveld'; 5 | import source from '$lib/components/charts/LineChart.svelte?raw'; 6 | import { celsiusToFahrenheit } from '$lib/utils/math.js'; 7 | import pageSource from './+page.svelte?raw'; 8 | 9 | import type { AppleStockData } from '$static/data/examples/date/apple-stock.js'; 10 | 11 | export async function load() { 12 | return { 13 | appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) => 14 | parse(await r.text()) 15 | ), 16 | dailyTemperatures: await fetch('/data/examples/dailyTemperatures.csv').then(async (r) => { 17 | return csvParse<{ dayOfYear: number; year: number; value: number | 'NA' }>( 18 | await r.text(), 19 | // @ts-expect-error 20 | autoType 21 | ) 22 | .filter((d) => d.value !== 'NA' && d.dayOfYear <= 365 /* Ignore 366th day */) 23 | .map((d) => { 24 | const origDate = new Date(d.year, 0, d.dayOfYear); 25 | return { 26 | ...d, 27 | date: new Date(Date.UTC(2000, origDate.getUTCMonth(), origDate.getUTCDate())), 28 | value: d.value !== 'NA' ? celsiusToFahrenheit(d.value) : 'NA', 29 | }; 30 | }); 31 | }), 32 | dailyTemperature: await fetch('/data/examples/date/daily-temperature.json').then(async (r) => 33 | parse<{ date: Date; value: number }[]>(await r.text()) 34 | ), 35 | meta: { 36 | api, 37 | source, 38 | pageSource, 39 | description: 'Streamlined Chart configuration for Line charts', 40 | related: ['components/Chart', 'components/Spline', 'examples/Line'], 41 | }, 42 | }; 43 | } 44 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/LinearGradient/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/LinearGradient.svelte?raw&sveld'; 2 | import source from '$lib/components/LinearGradient.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/RadialGradient', 'components/Pattern'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Link/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Link/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Link.svelte?raw&sveld'; 2 | import source from '$lib/components/Link.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Points', 'examples/Sankey', 'examples/Tree'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Marker/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Marker.svelte?raw&sveld'; 2 | import source from '$lib/components/Marker.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Graphic used for drawing arrowheads or polymarkers on Line, Spline, etc', 12 | related: ['components/Spline', 'components/Line', 'components/Rule', 'components/GeoSpline'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/MotionPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/MotionPath.svelte?raw&sveld'; 2 | import source from '$lib/components/MotionPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Animate an object along a path', 12 | related: ['components/Spline'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Pack/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Pack/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Pack.svelte?raw&sveld'; 2 | import source from '$lib/components/Pack.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Pack'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Partition/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Partition/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Partition.svelte?raw&sveld'; 2 | import source from '$lib/components/Partition.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Partition', 'examples/Sunburst'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Pattern/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Pattern.svelte?raw&sveld'; 2 | import source from '$lib/components/Pattern.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/LinearGradient', 'components/RadialGradient'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Pie/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Pie.svelte?raw&sveld'; 2 | import source from '$lib/components/Pie.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Arc', 'examples/Arc'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/PieChart/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/charts/PieChart.svelte?raw&sveld'; 2 | import source from '$lib/components/charts/PieChart.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Streamlined Chart configuration for Pie charts', 12 | related: ['components/Chart', 'components/Pie', 'examples/Arc'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Point/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

Examples

9 | 10 | 11 |
12 | d.x} 15 | y={(d) => d.y} 16 | xDomain={[0, 100]} 17 | yDomain={[0, 100]} 18 | padding={{ bottom: 20, left: 20 }} 19 | > 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Point/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Point.svelte?raw&sveld'; 2 | import source from '$lib/components/Point.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 'Convenient way to translate a data item to SVG x/y coordinates', 12 | related: ['examples/Area'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Points/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Points/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Points.svelte?raw&sveld'; 2 | import source from '$lib/components/Points.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Area', 13 | 'components/Spline', 14 | 'components/Tooltip', 15 | 'components/Zoom', 16 | 'examples/DotPlot', 17 | 'examples/PunchCard', 18 | 'examples/Scatter', 19 | ], 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/RadialGradient/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/RadialGradient.svelte?raw&sveld'; 2 | import source from '$lib/components/RadialGradient.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/LinearGradient', 'components/Pattern'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Rect/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Examples

7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Rect/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Rect.svelte?raw&sveld'; 2 | import source from '$lib/components/Rect.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: '`` element with tweened properties using `motionStore`', 12 | related: [ 13 | 'components/Bars', 14 | 'components/Highlight', 15 | 'components/RectClipPath', 16 | 'examples/Partition', 17 | 'examples/Sankey', 18 | 'examples/Tree', 19 | 'examples/Treemap', 20 | ], 21 | }, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/RectClipPath/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/RectClipPath/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/RectClipPath.svelte?raw&sveld'; 2 | import source from '$lib/components/RectClipPath.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/ChartClipPath', 'examples/Partition', 'examples/Treemap'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Rule/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Rule.svelte?raw&sveld'; 2 | import source from '$lib/components/Rule.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/Axis', 'components/Line'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Sankey/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Sankey/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Sankey.svelte?raw&sveld'; 2 | import source from '$lib/components/Sankey.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Sankey'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | 3 | import api from '$lib/components/charts/ScatterChart.svelte?raw&sveld'; 4 | import source from '$lib/components/charts/ScatterChart.svelte?raw'; 5 | import pageSource from './+page.svelte?raw'; 6 | 7 | import type { PenguinsData } from '$static/data/examples/penguins.js'; 8 | 9 | export async function load() { 10 | return { 11 | penguins: (await fetch('/data/examples/penguins.csv').then(async (r) => 12 | csvParse(await r.text(), autoType) 13 | )) as PenguinsData, 14 | meta: { 15 | api, 16 | source, 17 | pageSource, 18 | description: 'Streamlined Chart configuration for Scatter charts', 19 | related: ['components/Chart', 'components/Points', 'examples/Scatter'], 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Spline/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Spline.svelte?raw&sveld'; 2 | import source from '$lib/components/Spline.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | '`` 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`', 13 | related: ['components/MotionPath', 'examples/Sparkline'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Text/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Text.svelte?raw&sveld'; 2 | import source from '$lib/components/Text.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | features: [ 9 | 'Adjustable anchor/origin point (center horizontally and vertically)', 10 | 'Rotate (based on origin)', 11 | 'Multiline wrapping', 12 | 'Scale to fit', 13 | 'Easy offset with `dx` and `dy`', 14 | ], 15 | api, 16 | source, 17 | pageSource, 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Threshold/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Threshold/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Threshold.svelte?raw&sveld'; 2 | import source from '$lib/components/Threshold.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Areas between two values (`y={["value", "baseline"]}`) depending on which is greater (ex. green/red)', 13 | related: ['examples/Threshold'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/TileImage/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/TileImage/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TileImage.svelte?raw&sveld'; 2 | import source from '$lib/components/TileImage.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['components/GeoTile'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Tooltip/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/tooltip/Tooltip.svelte?raw&sveld'; 2 | import source from '$lib/components/tooltip/Tooltip.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | features: [ 12 | 'Various modes', 13 | [ 14 | 'bisect-x, bisect-y, bisect-band', 15 | 'band', 16 | 'bounds', 17 | 'voronoi', 18 | 'quadtree', 19 | 'manual (ex. path, etc)', 20 | ], 21 | 'Flexible positioning', 22 | [ 23 | 'mouse/pointer position with offset', 24 | 'data snapping (x and/or y)', 25 | 'fixed top and/or left', 26 | 'mix and match', 27 | ], 28 | 'Multiple instances', 29 | 'Maintain within chart container, window/viewport, or overflow outside', 30 | 'Configurable hide delay to prevent accidental hiding when moving to tooltip', 31 | ], 32 | related: ['components/TooltipContext', 'components/Highlight'], 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/TooltipContext/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/tooltip/TooltipContext.svelte?raw&sveld'; 2 | import source from '$lib/components/tooltip/TooltipContext.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | description: 12 | 'Setup tooltip context, include mode to identify related data based on pointer position. Typically used indirectly via the `tooltip` prop Chart', 13 | related: ['components/Chart', 'components/Tooltip', 'components/Highlight'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/TransformContext/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/TransformContext.svelte?raw&sveld'; 2 | import source from '$lib/components/TransformContext.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: [ 12 | 'components/Chart', 13 | 'examples/Pack', 14 | 'examples/Tree', 15 | 'examples/ZoomableMap', 16 | 'examples/ZoomableTileMap', 17 | 'examples/LoftedArcsGlobe', 18 | ], 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Tree/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Tree/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Tree.svelte?raw&sveld'; 2 | import source from '$lib/components/Tree.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Tree'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Treemap/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Treemap/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Treemap.svelte?raw&sveld'; 2 | import source from '$lib/components/Treemap.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | related: ['examples/Treemap'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |

Svg

19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 |

Canvas

40 | 41 | 42 |
43 | 44 | 45 | 46 | 47 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/components/Voronoi/+page.ts: -------------------------------------------------------------------------------- 1 | import api from '$lib/components/Voronoi.svelte?raw&sveld'; 2 | import source from '$lib/components/Voronoi.svelte?raw'; 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | meta: { 8 | api, 9 | source, 10 | pageSource, 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 9 | (r) => r.json() 10 | )) as Topology<{ 11 | countries: GeometryCollection<{ name: string }>; 12 | land: GeometryCollection; 13 | }>, 14 | meta: { 15 | pageSource, 16 | hideTableOfContents: true, 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Arc/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: ['components/Arc', 'components/Pie'], 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Area/+page.ts: -------------------------------------------------------------------------------- 1 | import { parse } from '@layerstack/utils'; 2 | 3 | import pageSource from './+page.svelte?raw'; 4 | import type { AppleStockData } from '$static/data/examples/date/apple-stock.js'; 5 | 6 | export async function load() { 7 | return { 8 | appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) => 9 | parse(await r.text()) 10 | ), 11 | meta: { 12 | pageSource, 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Bars/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | title: 'Bar Chart (Horizontal)', 7 | pageSource, 8 | related: ['components/Bars', 'examples/Columns', 'examples/Histogram', 'charts/BarChart'], 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Beeswarm/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | import type { USSenatorsData } from '$static/data/examples/us-senators.js'; 3 | 4 | import pageSource from './+page.svelte?raw'; 5 | 6 | export async function load() { 7 | return { 8 | usSenators: (await fetch('/data/examples/us-senators.csv').then(async (r) => 9 | csvParse(await r.text(), autoType) 10 | )) as USSenatorsData, 11 | meta: { 12 | pageSource, 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/BubbleMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { USCountyPopulationData } from '$static/data/examples/geo/us-county-population-2020.js'; 4 | 5 | export async function load({ fetch }) { 6 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 7 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 8 | return { 9 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json').then( 10 | (r) => r.json() 11 | )) as Topology<{ 12 | states: GeometryCollection<{ name: string }>; 13 | counties: GeometryCollection<{ name: string }>; 14 | }>, 15 | population: (await fetch('/data/examples/geo/us-county-population-2020.json').then((r) => 16 | r.json() 17 | )) as USCountyPopulationData, 18 | meta: { 19 | pageSource, 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

Examples

13 | 14 |

Basic

15 | 16 | 17 | 18 |
19 | (d.close < d.open ? 'desc' : 'asc')} 26 | cScale={scaleOrdinal()} 27 | cDomain={['desc', 'asc']} 28 | cRange={['#e41a1c', '#4daf4a']} 29 | padding={{ left: 16, bottom: 24 }} 30 | tooltip={{ mode: 'bisect-x' }} 31 | > 32 | 33 | 34 | ''} /> 35 | 36 | [d.open, d.close]} radius={2} /> 37 | 38 | 39 | 40 | {formatDate(data.date, PeriodType.Day)} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts: -------------------------------------------------------------------------------- 1 | import { parse } from '@layerstack/utils'; 2 | import type { AppleTickerData } from '$static/data/examples/date/apple-ticker.js'; 3 | 4 | import pageSource from './+page.svelte?raw'; 5 | 6 | export async function load() { 7 | return { 8 | appleTicker: (await fetch('/data/examples/date/apple-ticker.json').then(async (r) => 9 | parse(await r.text()) 10 | )) as AppleTickerData, 11 | meta: { 12 | pageSource, 13 | related: [ 14 | 'components/Bars', 15 | 'components/Points', 16 | 'examples/Bars', 17 | 'examples/Histogram', 18 | 'examples/Sparkbar', 19 | ], 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Choropleth/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { USCountyPopulationData } from '$static/data/examples/geo/us-county-population-2020.js'; 4 | 5 | export async function load({ fetch }) { 6 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 7 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 8 | return { 9 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json').then( 10 | (r) => r.json() 11 | )) as Topology<{ 12 | states: GeometryCollection<{ name: string }>; 13 | counties: GeometryCollection<{ name: string }>; 14 | }>, 15 | population: (await fetch('/data/examples/geo/us-county-population-2020.json').then((r) => 16 | r.json() 17 | )) as USCountyPopulationData, 18 | meta: { 19 | pageSource, 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: [ 8 | 'https://d3js.org/d3-force/collide', 9 | 'https://observablehq.com/@d3/collision-detection', 10 | ], 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Columns/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | title: 'Bar Chart (Vertical)', 7 | pageSource, 8 | related: ['components/Bars', 'examples/Bars', 'examples/Histogram', 'examples/Sparkbar'], 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Compound/+page.ts: -------------------------------------------------------------------------------- 1 | import { parse } from '@layerstack/utils'; 2 | import type { AppleTickerData } from '$static/data/examples/date/apple-ticker.js'; 3 | 4 | import pageSource from './+page.svelte?raw'; 5 | 6 | export async function load() { 7 | return { 8 | appleTicker: (await fetch('/data/examples/date/apple-ticker.json').then(async (r) => 9 | parse(await r.text()) 10 | )) as AppleTickerData, 11 | meta: { 12 | pageSource, 13 | related: [ 14 | 'components/Bars', 15 | 'examples/Bars', 16 | 'examples/Histogram', 17 | 'examples/Sparkbar', 18 | 'examples/DualAxis', 19 | ], 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/CountryMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load() { 5 | return { 6 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) => 7 | r.json() 8 | )) as Topology<{ 9 | states: GeometryCollection<{ name: string }>; 10 | }>, 11 | meta: { 12 | pageSource, 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/DotPlot/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: ['components/Points'], 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/DualAxis/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | 3 | import pageSource from './+page.svelte?raw'; 4 | import type { NewPassengerCars } from '$static/data/examples/new-passenger-cars.js'; 5 | 6 | export async function load() { 7 | return { 8 | newPassengerCars: await fetch('/data/examples/new-passenger-cars.csv').then(async (r) => 9 | // @ts-expect-error 10 | csvParse(await r.text(), autoType) 11 | ), 12 | meta: { 13 | pageSource, 14 | related: ['examples/Compound'], 15 | }, 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import { geoCentroid } from 'd3-geo'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { GeometryCollection, Topology } from 'topojson-specification'; 4 | 5 | export async function load({ fetch }) { 6 | return { 7 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 8 | (r) => r.json() 9 | )) as Topology<{ 10 | countries: GeometryCollection<{ name: string }>; 11 | land: GeometryCollection; 12 | }>, 13 | tectonicPlates: await fetch( 14 | 'https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json' 15 | ).then((r) => r.json()), 16 | earthquakes: await fetch( 17 | 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson' 18 | ) 19 | .then((r) => r.json()) 20 | .then((d: GeoJSON.FeatureCollection) => 21 | d.features.map((f) => { 22 | const c = geoCentroid(f); 23 | return { 24 | place: f.properties.place, 25 | magnitude: f.properties.mag, 26 | longitude: c[0], 27 | latitude: c[1], 28 | }; 29 | }) 30 | ), 31 | meta: { 32 | pageSource, 33 | }, 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | import { parse } from '@layerstack/utils'; 4 | 5 | export async function load({ fetch }) { 6 | return { 7 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 8 | (r) => r.json() 9 | )) as Topology<{ 10 | countries: GeometryCollection<{ name: string }>; 11 | land: GeometryCollection; 12 | }>, 13 | eclipses: (await fetch('/data/examples/geo/eclipses.json').then(async (r) => 14 | parse(await r.text()) 15 | )) as Topology<{ 16 | eclipses: GeometryCollection<{ ID: string; Date: Date }>; 17 | }>, 18 | meta: { 19 | pageSource, 20 | related: [ 21 | 'https://www.visionscarto.net/empreintes-d-eclipses', 22 | 'http://xjubier.free.fr/en/site_pages/Solar_Eclipses.html', 23 | 'https://stanke.co/creating-orthographic-maps-in-tableau/', 24 | 'https://www.washingtonpost.com/graphics/national/eclipse/', 25 | ], 26 | }, 27 | }; 28 | } 29 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |

Examples

25 | 26 | 27 |
28 | 29 | 30 | 39 | {#key nodes} 40 | {#each links as link} 41 | 42 | {/each} 43 | {/key} 44 | 45 | {#each nodes as node} 46 | 47 | {/each} 48 | 49 | 50 | 51 |
52 | 53 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | miserables: await fetch('/data/examples/graph/disjoint-graph.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | related: ['https://observablehq.com/@d3/disjoint-force-directed-graph'], 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceDrag/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: ['https://observablehq.com/@d3/sticky-force-layout'], 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceGraph/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | miserables: await fetch('/data/examples/graph/miserables.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | related: ['https://observablehq.com/@d3/force-directed-graph'], 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceGroup/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | }, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceGroup/dots.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "category": "a", "value": 0 }, 3 | { "category": "a", "value": 2 }, 4 | { "category": "a", "value": 5 }, 5 | { "category": "a", "value": 23 }, 6 | { "category": "a", "value": 12 }, 7 | { "category": "a", "value": 50 }, 8 | { "category": "a", "value": 7 }, 9 | { "category": "a", "value": 20 }, 10 | { "category": "a", "value": 15 }, 11 | { "category": "a", "value": 30 }, 12 | { "category": "a", "value": 2 }, 13 | { "category": "b", "value": 10 }, 14 | { "category": "b", "value": 12 }, 15 | { "category": "b", "value": 15 }, 16 | { "category": "b", "value": 3 }, 17 | { "category": "b", "value": 2 }, 18 | { "category": "b", "value": 5 }, 19 | { "category": "b", "value": 35 }, 20 | { "category": "b", "value": 2 }, 21 | { "category": "b", "value": 5 }, 22 | { "category": "b", "value": 20 }, 23 | { "category": "b", "value": 12 }, 24 | { "category": "c", "value": 5 }, 25 | { "category": "c", "value": 4 }, 26 | { "category": "c", "value": 2 }, 27 | { "category": "c", "value": 32 }, 28 | { "category": "c", "value": 25 }, 29 | { "category": "c", "value": 40 }, 30 | { "category": "c", "value": 35 }, 31 | { "category": "c", "value": 25 }, 32 | { "category": "c", "value": 19 }, 33 | { "category": "c", "value": 25 }, 34 | { "category": "c", "value": 10 } 35 | ] 36 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |

Examples

24 | 25 | 26 |
27 | 28 | 29 | 36 | {#key nodes} 37 | {#each links as link} 38 | 39 | {/each} 40 | {/key} 41 | 42 | {#each nodes as node} 43 | 44 | {/each} 45 | 46 | 47 | 48 |
49 | 50 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceLattice/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: [ 8 | 'https://d3js.org/d3-force/link', 9 | 'https://observablehq.com/@d3/force-directed-lattice', 10 | ], 11 | }, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceText/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: ['https://d3og.com/armollica/06a202c9f7df191ace8a1f97e33ffb97/'], 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ForceTree/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | related: ['https://observablehq.com/@d3/force-directed-tree'], 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/GeoPath/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json').then((r) => 9 | r.json() 10 | )) as Topology<{ 11 | states: GeometryCollection<{ name: string }>; 12 | counties: GeometryCollection<{ name: string }>; 13 | }>, 14 | meta: { 15 | pageSource, 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts: -------------------------------------------------------------------------------- 1 | import { autoType, csvParse } from 'd3-dsv'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { GeometryCollection, Topology } from 'topojson-specification'; 4 | import type { USAirportsData } from '$static/data/examples/geo/us-airports.js'; 5 | import type { USStateCapitalsData } from '$static/data/examples/geo/us-state-capitals.js'; 6 | import type { WorldAirportsData } from '$static/data/examples/geo/world-airports.js'; 7 | import type { WorldCapitalsData } from '$static/data/examples/geo/world-capitals.js'; 8 | 9 | export async function load() { 10 | return { 11 | us: { 12 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) => 13 | r.json() 14 | )) as Topology<{ 15 | states: GeometryCollection<{ name: string }>; 16 | }>, 17 | airports: (await fetch('/data/examples/geo/us-airports.csv').then(async (r) => 18 | csvParse(await r.text(), autoType) 19 | )) as USAirportsData, 20 | captitals: (await fetch('/data/examples/geo/us-state-capitals.csv').then(async (r) => 21 | csvParse(await r.text(), autoType) 22 | )) as USStateCapitalsData, 23 | }, 24 | world: { 25 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 26 | (r) => r.json() 27 | )) as Topology<{ 28 | countries: GeometryCollection<{ name: string }>; 29 | land: GeometryCollection; 30 | }>, 31 | airports: (await fetch('/data/examples/geo/world-airports.csv').then(async (r) => 32 | csvParse(await r.text(), autoType) 33 | )) as WorldAirportsData, 34 | captitals: (await fetch('/data/examples/geo/world-capitals.json').then(async (r) => 35 | r.json() 36 | )) as WorldCapitalsData, 37 | }, 38 | meta: { 39 | pageSource, 40 | }, 41 | }; 42 | } 43 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/GeoProjection/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 9 | (r) => r.json() 10 | )) as Topology<{ 11 | countries: GeometryCollection<{ name: string }>; 12 | land: GeometryCollection; 13 | }>, 14 | geojsonDetail: (await fetch( 15 | 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json' 16 | ).then((r) => r.json())) as Topology<{ 17 | countries: GeometryCollection<{ name: string }>; 18 | land: GeometryCollection; 19 | }>, 20 | 21 | meta: { 22 | pageSource, 23 | }, 24 | }; 25 | } 26 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/GeoTile/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load() { 5 | return { 6 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) => 7 | r.json() 8 | )) as Topology<{ 9 | states: GeometryCollection<{ name: string }>; 10 | }>, 11 | meta: { 12 | pageSource, 13 | related: ['examples/ZoomableTileMap'], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Histogram/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | import type { OlympiansData } from '$static/data/examples/olympians.js'; 3 | 4 | export async function load() { 5 | return { 6 | olympians: (await fetch('/data/examples/olympians.json').then((r) => 7 | r.json() 8 | )) as OlympiansData, 9 | meta: { 10 | pageSource, 11 | related: ['components/Bars', 'examples/Bars', 'examples/Columns'], 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Line/+page.ts: -------------------------------------------------------------------------------- 1 | import { parse } from '@layerstack/utils'; 2 | 3 | import pageSource from './+page.svelte?raw'; 4 | 5 | export async function load() { 6 | return { 7 | dailyTemperature: await fetch('/data/examples/date/daily-temperature.json').then(async (r) => 8 | parse<{ date: Date; value: number }[]>(await r.text()) 9 | ), 10 | meta: { 11 | pageSource, 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { WorldLinksData } from '$static/data/examples/geo/world-links.js'; 4 | 5 | export async function load({ fetch }) { 6 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 7 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 8 | return { 9 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 10 | (r) => r.json() 11 | )) as Topology<{ 12 | countries: GeometryCollection<{ name: string }>; 13 | land: GeometryCollection; 14 | }>, 15 | worldLinks: (await fetch('/data/examples/geo/world-links.json').then((r) => 16 | r.json() 17 | )) as WorldLinksData, 18 | meta: { 19 | pageSource, 20 | reference: 'https://observablehq.com/@armollica/globe-with-lofted-arcs', 21 | }, 22 | }; 23 | } 24 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: [ 8 | 'components/Bars', 9 | 'components/Spline', 10 | 'examples/Bars', 11 | 'examples/Histogram', 12 | 'examples/Sparkbar', 13 | ], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Pack/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Partition/+page.ts: -------------------------------------------------------------------------------- 1 | import { csvParse, autoType } from 'd3-dsv'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { CarData } from '$static/data/examples/cars.js'; 4 | 5 | export async function load() { 6 | return { 7 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 8 | cars: await fetch('/data/examples/cars.csv').then(async (r) => 9 | // @ts-expect-error 10 | csvParse(await r.text(), autoType) 11 | ), 12 | meta: { 13 | pageSource, 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |

Examples

18 | 19 |

Basic

20 | 21 | 22 |
23 | getWeek(d.date)} 26 | xScale={scaleBand()} 27 | y={(d) => getDay(d.date)} 28 | yScale={scaleBand()} 29 | yDomain={range(7)} 30 | r="value" 31 | rRange={[0, 16]} 32 | padding={{ left: 48, bottom: 16 }} 33 | tooltip={{ mode: 'band' }} 34 | props={{ 35 | xAxis: { format: (d) => 'Week ' + d }, 36 | yAxis: { format: (d) => daysOfWeek[d] }, 37 | rule: { x: true, y: false }, 38 | grid: { x: false, y: true, bandAlign: 'between' }, 39 | }} 40 | > 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | {formatDate(data.date, PeriodType.Day)} 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 | 57 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/PunchCard/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | }, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/RadialLine/+page.ts: -------------------------------------------------------------------------------- 1 | import { csvParse, autoType } from 'd3-dsv'; 2 | import { ascending, flatGroup, max, mean, min } from 'd3-array'; 3 | 4 | import pageSource from './+page.svelte?raw'; 5 | import { celsiusToFahrenheit } from '$lib/utils/math.js'; 6 | 7 | export async function load() { 8 | return { 9 | dailyTemperatures: await fetch('/data/examples/dailyTemperatures.csv').then(async (r) => { 10 | return csvParse<{ dayOfYear: number; year: number; value: number | 'NA' }>( 11 | await r.text(), 12 | // @ts-expect-error 13 | autoType 14 | ) 15 | .filter((d) => d.value !== 'NA') 16 | .map((d) => { 17 | const origDate = new Date(d.year, 0, d.dayOfYear); 18 | return { 19 | ...d, 20 | date: new Date(Date.UTC(2000, origDate.getUTCMonth(), origDate.getUTCDate())), 21 | value: d.value !== 'NA' ? celsiusToFahrenheit(d.value) : 'NA', 22 | }; 23 | }); 24 | }), 25 | sfoTemperatures: await fetch('/data/examples/sfoTemperatures.csv').then(async (r) => { 26 | return flatGroup( 27 | csvParse<{ date: Date; tavg: number; tmax: number; tmin: number }>( 28 | await r.text(), 29 | // @ts-expect-error 30 | autoType 31 | ), 32 | (d) => new Date(Date.UTC(2000, d.date.getUTCMonth(), d.date.getUTCDate())) // group by day of year 33 | ) 34 | .sort(([a], [b]) => ascending(a, b)) // sort chronologically 35 | .map(([date, v]) => ({ 36 | date, 37 | avg: mean(v, (d) => d.tavg || NaN), 38 | min: mean(v, (d) => d.tmin || NaN), 39 | max: mean(v, (d) => d.tmax || NaN), 40 | minmin: min(v, (d) => d.tmin || NaN), 41 | maxmax: max(v, (d) => d.tmax || NaN), 42 | })); 43 | }), 44 | meta: { 45 | pageSource, 46 | }, 47 | }; 48 | } 49 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Sankey/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | simple: await fetch('/data/examples/graph/simple.json').then((r) => r.json()), 6 | complex: await fetch('/data/examples/graph/complex.json').then((r) => r.json()), 7 | greenhouse: await fetch('/data/examples/graph/greenhouse.json').then((r) => r.json()), 8 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 9 | 10 | meta: { 11 | pageSource, 12 | related: ['components/Sankey', 'components/Link'], 13 | }, 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Sankey/SankeyControls.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 | 27 | 28 | 38 | 39 | 48 | 49 | 50 | 51 |
52 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Scatter/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | }, 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | return { 6 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 7 | (r) => r.json() 8 | )) as Topology<{ 9 | countries: GeometryCollection<{ name: string }>; 10 | land: GeometryCollection; 11 | }>, 12 | meta: { 13 | pageSource, 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Sparkbar/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: [ 8 | 'components/BarChart', 9 | 'components/Bars', 10 | 'examples/Columns', 11 | 'examples/Histogram', 12 | 'examples/Sparkline', 13 | ], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Sparkline/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: [ 8 | 'components/LineChart', 9 | 'components/Spline', 10 | 'components/Tooltip', 11 | 'components/Highlight', 12 | 'examples/Sparkbar', 13 | ], 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/SpikeMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { USCountyPopulationData } from '$static/data/examples/geo/us-county-population-2020.js'; 4 | 5 | export async function load({ fetch }) { 6 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 7 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 8 | return { 9 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json').then( 10 | (r) => r.json() 11 | )) as Topology<{ 12 | states: GeometryCollection<{ name: string }>; 13 | counties: GeometryCollection<{ name: string }>; 14 | }>, 15 | population: (await fetch('/data/examples/geo/us-county-population-2020.json').then((r) => 16 | r.json() 17 | )) as USCountyPopulationData, 18 | meta: { 19 | pageSource, 20 | }, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/StateMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json').then((r) => 9 | r.json() 10 | )) as Topology<{ 11 | states: GeometryCollection<{ name: string }>; 12 | counties: GeometryCollection<{ name: string }>; 13 | }>, 14 | meta: { 15 | pageSource, 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import { geoCentroid } from 'd3-geo'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { GeometryCollection, Topology } from 'topojson-specification'; 4 | 5 | export async function load({ fetch }) { 6 | return { 7 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 8 | (r) => r.json() 9 | )) as Topology<{ 10 | countries: GeometryCollection<{ name: string }>; 11 | land: GeometryCollection; 12 | }>, 13 | cables: await fetch('/data/examples/geo/submarine-cables.json').then((r) => r.json()), 14 | landingPoints: await fetch('/data/examples/geo/submarine-cables-landing-points.json').then( 15 | (r) => r.json() 16 | ), 17 | meta: { 18 | pageSource, 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Sunburst/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Threshold/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | meta: { 6 | pageSource, 7 | related: ['components/Threshold', 'components/AreaChart'], 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Timezones/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 9 | (r) => r.json() 10 | )) as Topology<{ 11 | countries: GeometryCollection<{ name: string }>; 12 | land: GeometryCollection; 13 | }>, 14 | timezones: (await fetch('/data/examples/geo/timezones.json').then((r) => 15 | r.json() 16 | )) as Topology<{ 17 | timezones: GeometryCollection<{ 18 | objectid: number; 19 | scalerank: number; 20 | featurecla: string; 21 | name: string; 22 | map_color6: number; 23 | map_color8: number; 24 | note: any; 25 | zone: number; 26 | utc_format: string; 27 | time_zone: string; 28 | iso_8601: string; 29 | places: string; 30 | dst_places: any; 31 | tz_name1st: any; 32 | tz_namesum: number; 33 | }>; 34 | }>, 35 | 36 | meta: { 37 | pageSource, 38 | related: [ 39 | 'components/Blur', 40 | 'components/GeoCircle', 41 | 'components/GeoPath', 42 | 'components/ClipPath', 43 | 'components/Graticule', 44 | ], 45 | }, 46 | }; 47 | } 48 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then( 9 | (r) => r.json() 10 | )) as Topology<{ 11 | countries: GeometryCollection<{ name: string }>; 12 | land: GeometryCollection; 13 | }>, 14 | meta: { 15 | pageSource, 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Tree/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 6 | meta: { 7 | pageSource, 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/Treemap/+page.ts: -------------------------------------------------------------------------------- 1 | import { csvParse, autoType } from 'd3-dsv'; 2 | import pageSource from './+page.svelte?raw'; 3 | import type { CarData } from '$static/data/examples/cars.js'; 4 | 5 | export async function load() { 6 | return { 7 | flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()), 8 | cars: await fetch('/data/examples/cars.csv').then(async (r) => 9 | // @ts-expect-error 10 | csvParse(await r.text(), autoType) 11 | ), 12 | meta: { 13 | pageSource, 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | // TODO: Support different US (https://github.com/topojson/us-atlas) and World (https://github.com/topojson/world-atlas) files 6 | // TODO: Cache: https://github.com/sveltejs/kit/issues/3642 7 | return { 8 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json').then((r) => 9 | r.json() 10 | )) as Topology<{ 11 | states: GeometryCollection<{ name: string }>; 12 | counties: GeometryCollection<{ name: string }>; 13 | }>, 14 | meta: { 15 | pageSource, 16 | }, 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.ts: -------------------------------------------------------------------------------- 1 | import type { GeometryCollection, Topology } from 'topojson-specification'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load({ fetch }) { 5 | return { 6 | geojson: (await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json').then((r) => 7 | r.json() 8 | )) as Topology<{ 9 | states: GeometryCollection<{ name: string }>; 10 | counties: GeometryCollection<{ name: string }>; 11 | }>, 12 | meta: { 13 | pageSource, 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/examples/_data/hierarchy.ts: -------------------------------------------------------------------------------- 1 | export const simpleData = { 2 | name: 'T', 3 | children: [ 4 | { 5 | name: 'A', 6 | children: [ 7 | { name: 'A1' }, 8 | { name: 'A2' }, 9 | { name: 'A3' }, 10 | { 11 | name: 'C', 12 | children: [ 13 | { 14 | name: 'C1', 15 | }, 16 | { 17 | name: 'D', 18 | children: [{ name: 'D1' }, { name: 'D2' }, { name: 'D3' }], 19 | }, 20 | ], 21 | }, 22 | ], 23 | }, 24 | { name: 'Z' }, 25 | { 26 | name: 'B', 27 | children: [{ name: 'B1' }, { name: 'B2' }, { name: 'B3' }], 28 | }, 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | chartData: (await fetch('/data/examples/bench/dimension_arrays/data.json').then((r) => 6 | r.json() 7 | )) as { 8 | date: Number[]; 9 | cpu: Number[]; 10 | ram: Number[]; 11 | tcp: Number[]; 12 | }, 13 | meta: { 14 | description: 'Individual arrays per dimension, similar to uplot', 15 | pageSource, 16 | hideTableOfContents: true, 17 | }, 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | chartData: (await fetch('/data/examples/bench/dimension_arrays/data.json').then((r) => 6 | r.json() 7 | )) as { 8 | date: Number[]; 9 | cpu: Number[]; 10 | ram: Number[]; 11 | tcp: Number[]; 12 | }, 13 | meta: { 14 | description: 15 | 'Individual arrays per dimension, similar to uplot. Pre-processed before passed to LineChart', 16 | pageSource, 17 | hideTableOfContents: true, 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/performance/series_arrays/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | chartData: (await fetch('/data/examples/bench/series_arrays/data.json').then((r) => 6 | r.json() 7 | )) as { 8 | cpu: { 9 | x: Date; 10 | y: Number; 11 | }[]; 12 | ram: { 13 | x: Date; 14 | y: Number; 15 | }[]; 16 | tcp: { 17 | x: Date; 18 | y: Number; 19 | }[]; 20 | }, 21 | meta: { 22 | description: 'Array per series, each with `x` / `y` items', 23 | pageSource, 24 | hideTableOfContents: true, 25 | }, 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/performance/wide_data/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | chartData: (await fetch('/data/examples/bench/wide_data/data.json').then((r) => r.json())) as { 6 | epoch: number; 7 | idl: number; 8 | recv: number; 9 | send: number; 10 | writ: number; 11 | used: number; 12 | free: number; 13 | }[], 14 | meta: { 15 | description: 'Wide data (property per series)', 16 | pageSource, 17 | hideTableOfContents: true, 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load() { 4 | return { 5 | chartData: (await fetch('/data/examples/bench/wide_data/data.json').then((r) => r.json())) as { 6 | epoch: number; 7 | idl: number; 8 | recv: number; 9 | send: number; 10 | writ: number; 11 | used: number; 12 | free: number; 13 | }[], 14 | meta: { 15 | description: 'Wide data (property per series). Pre-processed before passed to LineChart', 16 | pageSource, 17 | hideTableOfContents: true, 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load({ url }) { 4 | return { 5 | meta: { 6 | pageSource, 7 | hideTableOfContents: true, 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/tools/ShapefilePreview/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | import { read } from 'shapefile'; 3 | 4 | export async function load({ url }) { 5 | const file = url.searchParams.get('file'); 6 | return { 7 | file, 8 | geojson: file ? await read(file) : null, 9 | meta: { 10 | pageSource, 11 | hideTableOfContents: true, 12 | }, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.ts: -------------------------------------------------------------------------------- 1 | import pageSource from './+page.svelte?raw'; 2 | 3 | export async function load({ url }) { 4 | return { 5 | meta: { 6 | pageSource, 7 | hideTableOfContents: true, 8 | }, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/utils/pivot/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

pivotLonger

10 | 11 | 15 | 16 |

Before

17 | 18 | 19 | 20 |

After

21 | 22 | 26 | 27 |

pivotWider

28 | 29 | 30 | 31 |

Before

32 | 33 | 34 | 35 |

After

36 | 37 | 38 | -------------------------------------------------------------------------------- /packages/layerchart/src/routes/docs/utils/pivot/+page.ts: -------------------------------------------------------------------------------- 1 | import source from '$lib/utils/pivot.ts?raw'; 2 | import pageSource from './+page.svelte?raw'; 3 | 4 | export async function load() { 5 | return { 6 | meta: { 7 | source, 8 | pageSource, 9 | }, 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /packages/layerchart/src/vite-plugin-sveld.d.ts: -------------------------------------------------------------------------------- 1 | // Copied from: https://github.com/mattjennings/vite-plugin-sveld/blob/main/types.d.ts 2 | 3 | declare module 'vite-plugin-sveld' { 4 | export default function sveld(): { 5 | name: string; 6 | transform: ( 7 | src: string, 8 | id: string 9 | ) => Promise<{ 10 | code: string; 11 | map: any; 12 | }>; 13 | }; 14 | } 15 | 16 | declare module '*.svelte?raw&sveld' { 17 | interface SveldProp { 18 | name: string; 19 | kind: string; 20 | type?: string; 21 | isFunction: boolean; 22 | isFunctionDeclaration: boolean; 23 | isRequired: boolean; 24 | constant: boolean; 25 | reactive: boolean; 26 | } 27 | 28 | interface SveldSlot { 29 | name: string; 30 | default: boolean; 31 | fallback: string; 32 | slot_props: string; 33 | description?: string; 34 | } 35 | 36 | interface SveldEvent { 37 | type: string; 38 | name: string; 39 | element: string; 40 | description?: string; 41 | } 42 | 43 | interface SveldRestProps { 44 | type: string; 45 | name: string; 46 | } 47 | 48 | interface SveldTypedefs { 49 | type: string; 50 | name: string; 51 | ts: string; 52 | } 53 | 54 | interface SveldModuleExport { 55 | name: string; 56 | kind: string; 57 | type?: string; 58 | value: string; 59 | isFunction: boolean; 60 | isFunctionDeclaration: boolean; 61 | isRequired: boolean; 62 | constant: boolean; 63 | reactive: boolean; 64 | } 65 | 66 | interface SveldJson { 67 | props: SveldProp[]; 68 | slots: SveldSlot[]; 69 | events: SveldEvent[]; 70 | typedefs: SveldTypedefs[]; 71 | rest_props: SveldRestProps[]; 72 | moduleExports: SveldModuleExport[]; 73 | componentComment?: string; 74 | extends?: { 75 | interface: string; 76 | import: string; 77 | }; 78 | } 79 | 80 | const json: SveldJson; 81 | 82 | export default json; 83 | } 84 | -------------------------------------------------------------------------------- /packages/layerchart/static/audio/yakko_world.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techniq/layerchart/fde57cedb51708f71fbe394d94f796e04d00580a/packages/layerchart/static/audio/yakko_world.mp3 -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/bench/dimension_arrays/convert.js: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import { round } from '@layerstack/utils'; 3 | 4 | function prepData(packed) { 5 | // epoch,idl,recv,send,read,writ,used,free 6 | const numFields = packed[0]; 7 | packed = packed.slice(numFields + 1); 8 | 9 | let data = [ 10 | Array(packed.length / numFields), // date 11 | Array(packed.length / numFields), // cpu 12 | Array(packed.length / numFields), // ram 13 | Array(packed.length / numFields), // tcp 14 | ]; 15 | 16 | for (let i = 0, j = 0; i < packed.length; i += numFields, j++) { 17 | data[0][j] = packed[i] * 60 * 1000; 18 | data[1][j] = round(100 - packed[i + 1], 3); 19 | data[2][j] = round((100 * packed[i + 5]) / (packed[i + 5] + packed[i + 6]), 2); 20 | data[3][j] = packed[i + 3]; 21 | } 22 | 23 | return { date: data[0], cpu: data[1], ram: data[2], tcp: data[3] }; 24 | } 25 | 26 | try { 27 | const inputFile = '../packedData.json'; 28 | const outputFile = 'data.json'; 29 | 30 | const packedData = JSON.parse(fs.readFileSync(inputFile, 'utf8')); 31 | const data = prepData(packedData); 32 | fs.writeFileSync(outputFile, JSON.stringify(data)); 33 | 34 | console.log(`Successfully transformed data from ${inputFile} to ${outputFile}`); 35 | } catch (error) { 36 | console.error('Error processing file:', error.message); 37 | process.exit(1); 38 | } 39 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/bench/series_arrays/convert.js: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import { round } from '@layerstack/utils'; 3 | 4 | function prepData(packed) { 5 | // epoch,idl,recv,send,read,writ,used,free 6 | const numFields = packed[0]; 7 | packed = packed.slice(numFields + 1); 8 | 9 | var cpu = Array(packed.length / numFields); 10 | var ram = Array(packed.length / numFields); 11 | var tcp = Array(packed.length / numFields); 12 | 13 | for (let i = 0, j = 0; i < packed.length; i += numFields, j++) { 14 | let date = packed[i] * 60 * 1000; 15 | cpu[j] = { x: date, y: round(100 - packed[i + 1], 3) }; 16 | ram[j] = { x: date, y: round((100 * packed[i + 5]) / (packed[i + 5] + packed[i + 6]), 2) }; 17 | tcp[j] = { x: date, y: packed[i + 3] }; 18 | } 19 | 20 | return { cpu, ram, tcp }; 21 | } 22 | 23 | try { 24 | const inputFile = '../packedData.json'; 25 | const outputFile = 'data.json'; 26 | 27 | const packedData = JSON.parse(fs.readFileSync(inputFile, 'utf8')); 28 | const data = prepData(packedData); 29 | fs.writeFileSync(outputFile, JSON.stringify(data)); 30 | 31 | console.log(`Successfully transformed data from ${inputFile} to ${outputFile}`); 32 | } catch (error) { 33 | console.error('Error processing file:', error.message); 34 | process.exit(1); 35 | } 36 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/bench/wide_data/convert.js: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | 3 | function parseMetricsData(data) { 4 | // Parse the string if it's not already an array 5 | const rawData = typeof data === 'string' ? JSON.parse(data) : data; 6 | const fieldLength = rawData[0]; 7 | 8 | // Extract the header fields 9 | const [_, ...fields] = rawData.slice(0, fieldLength + 1); 10 | 11 | // Get the actual data values 12 | const values = rawData.slice(fieldLength + 1); 13 | 14 | // Calculate how many complete sets of metrics we have 15 | const numSets = Math.floor(values.length / fieldLength); 16 | 17 | // Transform the data into objects 18 | const result = []; 19 | for (let i = 0; i < numSets; i++) { 20 | const obj = {}; 21 | fields.forEach((field, fieldIndex) => { 22 | obj[field] = values[i * fieldLength + fieldIndex]; 23 | }); 24 | result.push(obj); 25 | } 26 | 27 | return result; 28 | } 29 | 30 | try { 31 | const inputFile = '../packedData.json'; 32 | const outputFile = 'data.json'; 33 | 34 | // Read and parse the input file 35 | const data = fs.readFileSync(inputFile, 'utf8'); 36 | const parsedData = parseMetricsData(data); 37 | fs.writeFileSync(outputFile, JSON.stringify(parsedData)); 38 | 39 | console.log(`Successfully transformed data from ${inputFile} to ${outputFile}`); 40 | } catch (error) { 41 | console.error('Error processing file:', error.message); 42 | process.exit(1); 43 | } 44 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/cars.d.ts: -------------------------------------------------------------------------------- 1 | export type CarData = { 2 | make: string; 3 | model: string; 4 | year: number; 5 | engine_fuel_Type: string; 6 | engine_hp: number; 7 | engine_cylinders: number; 8 | transmission_type: string; 9 | driven_wheels: number; 10 | number_of_doors: string; 11 | market_category: string; 12 | vehicle_size: string; 13 | vehicle_style: string; 14 | highway_mpg: number; 15 | city_mpg: number; 16 | popularity: number; 17 | msrp: number; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/date/apple-stock.d.ts: -------------------------------------------------------------------------------- 1 | export type AppleStockData = { 2 | date: Date; 3 | value: number; 4 | }[]; 5 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/date/apple-ticker.d.ts: -------------------------------------------------------------------------------- 1 | export type AppleTickerData = { 2 | date: Date; 3 | open: number; 4 | high: number; 5 | low: number; 6 | close: number; 7 | adjClose: number; 8 | volume: number; 9 | }[]; 10 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/us-airports.d.ts: -------------------------------------------------------------------------------- 1 | export type USAirportsData = { 2 | iata: string; 3 | name: string; 4 | city: string; 5 | state: string; 6 | country: string; 7 | latitude: number; 8 | longitude: number; 9 | }[]; 10 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/us-county-population-2020.d.ts: -------------------------------------------------------------------------------- 1 | export type USCountyPopulationData = { 2 | DP05_0001E: string; 3 | DP05_0019E: string; 4 | DP05_0019PE: string; 5 | state: string; 6 | county: string; 7 | }[]; 8 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/us-state-capitals.d.ts: -------------------------------------------------------------------------------- 1 | export type USStateCapitalsData = { 2 | name: string; 3 | description: string; 4 | latitude: number; 5 | longitude: number; 6 | }[]; 7 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/world-airports.d.ts: -------------------------------------------------------------------------------- 1 | export type WorldAirportsData = { 2 | name: string; 3 | latitude: number; 4 | longitude: number; 5 | }[]; 6 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/world-capitals.d.ts: -------------------------------------------------------------------------------- 1 | export type WorldCapitalsData = { 2 | label: string; 3 | latitude: number; 4 | longitude: number; 5 | }[]; 6 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/geo/world-links.d.ts: -------------------------------------------------------------------------------- 1 | export type WorldLinksData = Array< 2 | GeoJSON.Feature< 3 | GeoJSON.LineString, 4 | { sourceName: string; targetName: string; sourceId: string; targetId: string } 5 | > & { 6 | sourceId: string; 7 | targetId: string; 8 | source: [number, number]; 9 | target: [number, number]; 10 | } 11 | >; 12 | 13 | // [ 14 | // { 15 | // "feature": { 16 | // "type": "Feature", 17 | // "geometry": { 18 | // "type": "LineString", 19 | // "coordinates": [ 20 | // [-118.18192636994041, 33.99192410876543], 21 | // [-77.01136443943716, 38.901495235087054] 22 | // ] 23 | // }, 24 | // "properties": { 25 | // "sourceName": "Los Angeles", 26 | // "targetName": "Washington, D.C.", 27 | // "sourceId": "los-angeles", 28 | // "targetId": "washington,-d.c." 29 | // } 30 | // }, 31 | // "sourceId": "los-angeles", 32 | // "targetId": "washington,-d.c.", 33 | // "source": [-118.18192636994041, 33.99192410876543], 34 | // "target": [-77.01136443943716, 38.901495235087054] 35 | // }, 36 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/graph/basic.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": "A" }, 4 | { "id": "B" }, 5 | { "id": "C" }, 6 | { "id": "D" }, 7 | { "id": "E" }, 8 | { "id": "F" }, 9 | { "id": "G" }, 10 | { "id": "H" }, 11 | { "id": "I" } 12 | ], 13 | "links": [ 14 | { "source": "A", "target": "B" }, 15 | { "source": "C", "target": "B" }, 16 | { "source": "B", "target": "E" }, 17 | { "source": "B", "target": "F" }, 18 | { "source": "D", "target": "E" }, 19 | { "source": "D", "target": "F" }, 20 | { "source": "E", "target": "H" }, 21 | { "source": "G", "target": "H" }, 22 | { "source": "H", "target": "I" } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/graph/cluster.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": "A" }, 4 | { "id": "B", "parent": "top_group" }, 5 | { "id": "C", "parent": "bottom_group" }, 6 | { "id": "D", "parent": "bottom_group" }, 7 | { "id": "E", "parent": "bottom_group" }, 8 | { "id": "F", "parent": "bottom_group" }, 9 | { "id": "G" }, 10 | { "id": "group" }, 11 | { "id": "top_group", "parent": "group" }, 12 | { "id": "bottom_group", "parent": "group" } 13 | ], 14 | "links": [ 15 | { "source": "A", "target": "B" }, 16 | { "source": "B", "target": "C" }, 17 | { "source": "B", "target": "D" }, 18 | { "source": "B", "target": "E" }, 19 | { "source": "B", "target": "F" }, 20 | { "source": "B", "target": "G" } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/graph/simple.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": "A1" }, 4 | { "id": "A2" }, 5 | { "id": "A3" }, 6 | { "id": "B1" }, 7 | { "id": "B2" }, 8 | { "id": "B3" }, 9 | { "id": "B4" }, 10 | { "id": "C1" }, 11 | { "id": "C2" }, 12 | { "id": "C3" }, 13 | { "id": "D1" }, 14 | { "id": "D2" } 15 | ], 16 | "links": [ 17 | { "source": "A1", "target": "B1", "value": 27 }, 18 | { "source": "A1", "target": "B2", "value": 9 }, 19 | { "source": "A2", "target": "B2", "value": 5 }, 20 | { "source": "A2", "target": "B3", "value": 11 }, 21 | { "source": "A3", "target": "B2", "value": 12 }, 22 | { "source": "A3", "target": "B4", "value": 7 }, 23 | { "source": "B1", "target": "C1", "value": 13 }, 24 | { "source": "B1", "target": "C2", "value": 10 }, 25 | { "source": "B4", "target": "C2", "value": 5 }, 26 | { "source": "B4", "target": "C3", "value": 2 }, 27 | { "source": "B1", "target": "D1", "value": 4 }, 28 | { "source": "C3", "target": "D1", "value": 1 }, 29 | { "source": "C3", "target": "D2", "value": 1 } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/graph/software-user-flow.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": "uninstalled" }, 4 | { "id": "installed" }, 5 | { "id": "main screen" }, 6 | { "id": "subscriptions" }, 7 | { "id": "confirmation" }, 8 | { "id": "subcribed" } 9 | ], 10 | "links": [ 11 | { "source": "uninstalled", "target": "installed", "label": "install" }, 12 | { "source": "installed", "target": "main screen", "label": "launch" }, 13 | { "source": "main screen", "target": "main screen", "label": "click" }, 14 | { "source": "main screen", "target": "subscriptions", "label": "subscribe" }, 15 | { "source": "subscriptions", "target": "confirmation", "label": "choose\nplan" }, 16 | { "source": "subscriptions", "target": "main screen", "label": "click" }, 17 | { "source": "confirmation", "target": "subcribed", "label": "confirm" }, 18 | { "source": "confirmation", "target": "subscriptions", "label": "cancel" }, 19 | { "source": "subcribed", "target": "main screen", "label": "click" } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/graph/tcp-state.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "id": "CLOSED" }, 4 | { "id": "LISTEN" }, 5 | { "id": "SYN RCVD" }, 6 | { "id": "SYN SENT" }, 7 | { "id": "ESTAB" }, 8 | { "id": "FINWAIT-1" }, 9 | { "id": "CLOSE WAIT" }, 10 | { "id": "FINWAIT-2" }, 11 | { "id": "CLOSING" }, 12 | { "id": "LAST-ACK" }, 13 | { "id": "TIME WAIT" } 14 | ], 15 | "links": [ 16 | { "source": "CLOSED", "target": "LISTEN", "label": "open" }, 17 | { "source": "LISTEN", "target": "SYN RCVD", "label": "rcv SYN" }, 18 | { "source": "LISTEN", "target": "SYN SENT", "label": "send" }, 19 | { "source": "LISTEN", "target": "CLOSED", "label": "close" }, 20 | { "source": "SYN RCVD", "target": "FINWAIT-1", "label": "close" }, 21 | { "source": "SYN RCVD", "target": "ESTAB", "label": "rcv ACK of SYN" }, 22 | { "source": "SYN SENT", "target": "SYN RCVD", "label": "rcv SYN" }, 23 | { "source": "SYN SENT", "target": "ESTAB", "label": "rcv SYN, ACK" }, 24 | { "source": "SYN SENT", "target": "CLOSED", "label": "close" }, 25 | { "source": "ESTAB", "target": "FINWAIT-1", "label": "close" }, 26 | { "source": "ESTAB", "target": "CLOSE WAIT", "label": "rcv FIN" }, 27 | { "source": "FINWAIT-1", "target": "FINWAIT-2", "label": "rcv ACK of FIN" }, 28 | { "source": "FINWAIT-1", "target": "CLOSING", "label": "rcv FIN" }, 29 | { "source": "CLOSE WAIT", "target": "LAST-ACK", "label": "close" }, 30 | { "source": "FINWAIT-2", "target": "TIME WAIT", "label": "rcv FIN" }, 31 | { "source": "CLOSING", "target": "TIME WAIT", "label": "rcv ACK of FIN" }, 32 | { "source": "LAST-ACK", "target": "CLOSED", "label": "rcv ACK of FIN" }, 33 | { "source": "TIME WAIT", "target": "CLOSED", "label": "timeout=2MSL" } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/new-passenger-cars.csv: -------------------------------------------------------------------------------- 1 | year,efficiency,sales 2 | 1980,24.3,8949000 3 | 1985,27.6,10979000 4 | 1990,28,9303000 5 | 1991,28.4,8185000 6 | 1992,27.9,8213000 7 | 1993,28.4,8518000 8 | 1994,28.3,8991000 9 | 1995,28.6,8620000 10 | 1996,28.5,8479000 11 | 1997,28.7,8217000 12 | 1998,28.8,8085000 13 | 1999,28.3,8638000 14 | 2000,28.5,8778000 15 | 2001,28.8,8352000 16 | 2002,29,8042000 17 | 2003,29.5,7556000 18 | 2004,29.5,7483000 19 | 2005,30.3,7660000 20 | 2006,30.1,7762000 21 | 2007,31.2,7562000 22 | 2008,31.5,6769000 23 | 2009,32.9,5402000 24 | 2010,33.9,5636000 25 | 2011,33.1,6093000 26 | 2012,35.3,7245000 27 | 2013,36.4,7586000 28 | 2014,36.5,7708000 29 | 2015,37.2,7517000 30 | 2016,37.7,6873000 31 | 2017,39.4,6081000 -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/new-passenger-cars.d.ts: -------------------------------------------------------------------------------- 1 | export type NewPassengerCars = { 2 | year: number; 3 | efficiency: number; 4 | sales: number; 5 | }; 6 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/olympians.d.ts: -------------------------------------------------------------------------------- 1 | export type OlympiansData = { 2 | id: number; 3 | name: string; 4 | nationality: string; 5 | sex: string; 6 | date_of_birth: Date; 7 | height: number; 8 | weight: number; 9 | sport: string; 10 | gold: number; 11 | silver: number; 12 | bronze: number; 13 | info: string; 14 | }[]; 15 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/penguins.d.ts: -------------------------------------------------------------------------------- 1 | export type PenguinsData = { 2 | species: string; 3 | island: string; 4 | bill_length_mm: number | 'NA'; 5 | bill_depth_mm: number | 'NA'; 6 | flipper_length_mm: number | 'NA'; 7 | body_mass_g: number | 'NA'; 8 | sex: 'male' | 'female' | 'NA'; 9 | year: number; 10 | }[]; 11 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/us-senators.d.ts: -------------------------------------------------------------------------------- 1 | export type USSenatorsData = { 2 | state_name: string; 3 | party: string; 4 | name: string; 5 | gender: string; 6 | date_of_birth: Date; 7 | }[]; 8 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/world-population-demographics.csv: -------------------------------------------------------------------------------- 1 | age,male,female 2 | 0-4,337082467,319557714 3 | 5-9,351715561,331015496 4 | 10-14,346898098,325046485 5 | 15-19,328189555,307629576 6 | 20-24,313191215,294184526 7 | 25-29,304421477,287497451 8 | 30-34,308206126,294461443 9 | 35-39,293650660,283742580 10 | 40-44,264954566,258134000 11 | 45-49,238892693,235655907 12 | 50-54,230886182,231469447 13 | 55-59,204396487,210274344 14 | 60-64,162559789,173807303 15 | 65-69,135678685,152556237 16 | 70-74,99662458,119189625 17 | 75-79,61653088,78620257 18 | 80-84,36107650,52173305 19 | 85-89,17564615,30311032 20 | 90-94,5956267,12939489 21 | 95-99,1189572,3510425 22 | 100+,130480,547105 23 | -------------------------------------------------------------------------------- /packages/layerchart/static/data/examples/world-population-demographics.d.ts: -------------------------------------------------------------------------------- 1 | export type WorldPopulationDemographicsData = { 2 | age: string; 3 | male: number; 4 | female: number; 5 | }[]; 6 | -------------------------------------------------------------------------------- /packages/layerchart/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techniq/layerchart/fde57cedb51708f71fbe394d94f796e04d00580a/packages/layerchart/static/favicon.png -------------------------------------------------------------------------------- /packages/layerchart/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-cloudflare'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | import { mdsvex } from 'mdsvex'; 4 | import { codePreview } from 'svelte-ux/plugins/svelte.js'; 5 | 6 | import mdsvexConfig from './mdsvex.config.js'; 7 | 8 | /** @type {import('@sveltejs/kit').Config} */ 9 | const config = { 10 | extensions: ['.svelte', ...mdsvexConfig.extensions], 11 | preprocess: [mdsvex(mdsvexConfig), vitePreprocess(), codePreview()], 12 | 13 | kit: { 14 | adapter: adapter(), 15 | alias: { 16 | layerchart: 'src/lib/index.js', 17 | 'layerchart/*': 'src/lib/*', 18 | '$static/*': 'static/*', 19 | }, 20 | }, 21 | }; 22 | 23 | export default config; 24 | -------------------------------------------------------------------------------- /packages/layerchart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /packages/layerchart/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | // import { sveld } from 'svelte-ux/plugins/vite.js'; 3 | import dsv from '@rollup/plugin-dsv'; 4 | import { autoType } from 'd3-dsv'; 5 | 6 | /** @type {import('vite').UserConfig} */ 7 | const config = { 8 | // @ts-expect-error 9 | plugins: [sveltekit(), /*sveld(),*/ dsv({ processRow: autoType })], 10 | // optimizeDeps: { 11 | // include: ['svelte-ux'], 12 | // }, 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/*" 3 | --------------------------------------------------------------------------------