techniq / layerchart Goto Github PK

View Code? Open in Web Editor NEW

377.0 5.0 7.0 8.97 MB

Composable Svelte chart components to build a wide range of visualizations

Home Page: https://www.layerchart.com

License: MIT License

HTML 0.04% Svelte 86.50% JavaScript 0.53% TypeScript 12.93%

d3 svelte svelte-components

layerchart's Introduction

LayerChart

A large collection of composable Svelte chart components to build a wide range of visualizations

Cartesian (Bar, Area, Stack, Scatter)
Radial (Pie, Arc, Sunburst)
Hierarchy (Pack, Tree, Treemap, Sunburst)
Graph (Sankey)
Geo (Choropleth, Spike, Bubble, Point, Globe)

Interactions

Tooltip, Highlights, Pan/Zoom

SVG

Basic (Arc, Circle, Group, Line, Spline, Text)
Gradients and Patterns
ClipPath
Multi-line text

Others

Legends including ColorRamps

See also the companion library Svelte UX for a large collection of components, actions, stores, and utilities to build highly interactive applications.

Contributing

Install dependencies

pnpm i

Run dev server for `layerchart` package

cd packages/svelte-ux
pnpm dev

Add changeset to include change in changelog and determine next version

pnpm changeset

layerchart's People

Contributors

Stargazers

Watchers

Forkers

mattlangeman hirajanwin sikandarjodd itsonlyjames mateuszlewko dit7ya jacob-8

layerchart's Issues

Bug in examples for columns and bars - sorting of date series.

The bar and column date series charts are sorting by the date string (day of week).

Dual axis chart

Approaches

Overlay 2 separate <Chart> instances on top of each other
- How to handle tooltips / data
Remap one series to the other using a linear scale (see example)

Sorting issues in Tooltip examples

Issue

Incorrect sorting of data on examples similar to Single Date / Time Example

item 10 getting put between item 1 and item 2

Details

Almost surely caused by the same Layer Cake sorting change mentioned in issue #54

Solution?

Quickest fix is changing the examples to include:

yDomain={[...new Set(timeSeries.map((d) => d.name))]}

Add uncertainty/confidence band

Hierarchy

Bar Chart features / examples

Column and Bar
- Make sure works with Tooltip, Overlay, etc
Support both axises as bands
- https://observablehq.com/@observablehq/plot-cell
Brush / Zoom
Better date handling (#62)
Improve handling of Tooltips with group/stacked data (including adding some examples)

Examples

Basic

Hierarchy

Time

Timeline
Cleveland / Dot plot
- https://observablehq.com/@d3/tree-of-life
Calendar

Interaction

Pan / Zoom
Brush

Statistics / Analytics

Category / Binning
Trend line
Reference line
Windowing
- Cumulative
- Moving averages, min/max, etc
Top N + Others (aggregate smaller values together, either by count or by a threshold)
Box plot
Histogram
Bullet
Bollinger bands
- https://observablehq.com/@d3/bollinger-bands?collection=@d3/charts

Other

Examples

Radar chart

Radial line / area charts

Radial bar charts

Radial bar chart (around)

Gauge

Spiral

Gradient components

Use css variables, similar to tailwind
visx
- https://github.com/airbnb/visx/tree/master/packages/visx-gradient
- https://airbnb.io/visx/gradients
https://stackoverflow.com/a/55269126/191902

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
  <defs>
    <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
        <stop offset="0%" stop-color="var(--color-stop)" />
        <stop offset="30%" stop-color="var(--color-stop)" />
        <stop offset="100%" stop-color="var(--color-bot)" />
      </linearGradient>
  </defs>
  <g>
    <polygon class="gradient-bg" points="0,0 100,0 0,66" />
  </g>
</svg>

.shape {
  width:500px;
  height:200px;
}

.shape .gradient-bg {
  fill: url(#header-shape-gradient) #fff;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

Animate clipping on mount

https://observablehq.com/@giorgi-ghviniashvili/animating-d3-area

Legends / Color Ramps

General
- https://airbnb.io/visx/legends
Color
- https://observablehq.com/@d3/color-legend
- https://observablehq.com/@observablehq/plot-legends
- https://observablehq.com/@mbostock/continuous-color-guide
- Color Ramp
- Generate CSS gradients with d3-scale-chromatic
- https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient/
- https://clhenrick.github.io/color-legend-element/
- https://observablehq.com/@clhenrick/threshold-color-scale
- Add swatches support (for ordinal, primarily)
- Show ticks across range (for threshold, primarily)
- Vertical orientation
- Support hovering / clicking to filter data
Circle
- https://observablehq.com/@jonhelfman/circle-legend
- https://observablehq.com/@harrystevens/circle-legend?collection=@harrystevens/components
Geo

Examples

https://www.reuters.com/graphics/TURKEY-QUAKE/zdvxdngmzvx/

Tween `Path`

Support tweening Path similar to how it's supported for Circle, Rect, and Line.

Will need to pass an interpolater, and might be best to use d3-interpolate-path since it handles more/less points better.

Tooltip / Highlight improvements

Tooltip / Selection

HighlightLine

Improve handling of scaleBand() on y
Support showing crosshairs (2 lines per point)
Support handling different axis/scale (see above)
Add slot overrides for points and lines

HighlightRect

Support showing x-axis (current), y-axis, or containing box based on values within xScale/yScale (see "both" scale above)

HighlightLabel

Add new component to show value on x and/or y axis. Could even be it's own bottom-pinned tooltip
- examples

New Text component - Simplify, fix styled, support path, etc

Currently Text is a partial port of Text from visx, although it might be overkill unless multiline is needed, and currently needs improved to handle styled text, etc (measurement needs to be down offscreen).

I recently learned of alignment-baseline and dominant-baseline which appears to align vertically, although I'm currently uncertain the uses for each (need to read up more) and the browser support in Safari / Firefox compared to Chrome.

I setup a REPL to feel things out, and there is also an observable notebook with more ideas including support for multiline. When testing the notebook in Safari and Firefox, I noticed some differences and unsupported features.

Features

Horizontal / Vertical aligning (left, center, right)
Rotate
- Using Safari, text-anchor or dominant-baseline doesn't appear to affect the transform origin. Setting transform-origin: center doesn't appear to have any affect on Chrome or Safari.
Multiline
Scale to fit
Truncate
- Not currently supported by visx either, although some discussion / PRs
- airbnb/visx#447
- https://codesandbox.io/s/3v3rn68mj6?file=/src/vxtext/util/getStringWidth.js:0-38
- https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg/24120935
Text path
Truncate based on count, with support for start, end or middle ellipsis
Background
- SVG text with rect backgrounds
- SVG text solid background

Road to v1

Component cleanup

Examples

Update Dot Plot
- https://observablehq.com/@d3/dot-plot
Add time of day
- https://strava.techniq.dev/history/timeOfDay

Improvements

Theme support

Docs

Add description, features, and related to all components
Move all TODO's to issues / cleanup
Document which components support SVG, Canvas, etc
Document how components use data
- data via context
- data prop
- other (pathData, etc)
Add home page / getting started
Document principals
- Where does the component read it's data from (context, data prop, other)?
- Does the component work in SVG coordinates, data values, or both?
Customizing (theme support, etc)
- Colors
- Frame
- Props passed to underlying components (ex. Axis with grid, rule, etc)

Tree

Annotations / Links

Label positioning

Voronoi placement
- https://observablehq.com/@harrystevens/directly-labelling-lines
- https://observablehq.com/@d3/voronoi-labels
- https://observablehq.com/@fil/plot-voronoi-labels
- https://observablehq.com/@d3/voronoi-labels
- https://observablehq.com/@john-guerra/smart-labels
- Also only consider showing labels which have enough room in voronoi container
Hide if covered / occlusion
- https://observablehq.com/@fil/occlusion
End of line
Force based (related: #58)
- https://observablehq.com/@benoldenburg/nyc-transit-fare-increase-history
- https://observablehq.com/@benoldenburg/force-labels-method
Stretched polylabel
- https://observablehq.com/@mourner/labeling-with-stretched-polylabel

Sparklines / Tiny Charts

Add SplitLinePath

Heatmap

Treemap

Remove selected prop
Improve zoomable nested
- Apply extent ratio? const extentRatio = ($extents.y1 - $extents.y0) / $height;

Arc / Pie Labels

Along path (inside, above, below)
- https://www.visualcinnamon.com/2015/09/placing-text-on-arcs/
- Reverse when upside down (bottom of circle)
  - https://observablehq.com/@hellonearthis/d3-arc
- https://observablehq.com/@jrthompson33/weather-radials

- https://svelte.dev/repl/0df811677d6641f99a7e07ad2e54ea2f?version=4.1.2 - https://observablehq.com/@d3/radial-area-chart/2

Link to path centroid

Rotate/Radiate out at path centroid
- https://observablehq.com/@d3/zoomable-sunburst

At path centroid
- https://nivo.rocks/sunburst/

Draw at pie/arc center
- https://observablehq.com/@kerryrodden/sequences-sunburst

Radial axis
- https://observablehq.com/@thetylerwolf/day-17-radial-bar-chart

Spiral axis
- https://observablehq.com/@vasturiano/spiral-axis

Mid point on map

Related: #11

Review all xRange / yRange usage and consider using min() / max()

Animate scales / axis / grid

Examples

[Tooltip] Improve docs / add more examples

Extracted from #45 (comment)

With TooltipContext / Tooltip, there are basically 3 ways to position:

By default, TooltipContext will use the mouse/pointer position, and Tooltip will apply an offset by default (mostly to not cover up the point you are interested in)
In TooltipContext, you can opt into snapping the position to the closest data point's X and/or Y
In Tooltip, you can specify explicit top / left positions, overwriting/ignoring what is set in the TooltipContext. This was a recent addition we made for the Sparkline example, but I'd like to add more examples to show what kind of use cases this supports
- A fixed tooltip in the top left (or any corner) by specifying values for both props (ex. <Tooltip top={8} left={8} />)
- Only specifying a fixed top such as this visx example or these Observable plot examples which would use 2 instances of <Tooltip>, one with a fixed top and one with a fixed left.

Examples

Fixed location (ex. top/left)
Fixed y with dynamic x
Multiple tooltips
- Show x and/or y value on axis
- https://observablehq.com/plot/interactions/crosshair
- https://airbnb.io/visx/areas
- https://trash-and-fire.github.io/svelte-lightweight-charts/official-samples.html

Directed Acyclic Graphs (DAG)

[Highlight] Fix points with stacked data

Show all points
Fix colors

Geo v2

Continued work of original Geo PR, as well as additional examples / features from the original issue.

Tooltip issue with localPoint when chart has left padding

Main Issue

I noticed an issue with the Tooltip when a chart has left padding. The Tooltip has issues picking the correct data point.

Issue Details

When TooltipContext gets the localPoint, the localX value is never below the value of the left padding for the chart.

layerchart/src/lib/components/TooltipContext.svelte

Lines 140 to 142 in 5c567e3

  const point = localPoint(referenceNode, event); 

  const localX = point?.x ?? 0; 

  const localY = point?.y ?? 0;

This means it does not get the proper xValueAtPoint.

layerchart/src/lib/components/TooltipContext.svelte

Line 180 in 5c567e3

const xValueAtPoint = scaleInvert($xScale, localX);

Solution?

I don't know whether it is as simple as subtracting the left padding to setting localX.

Screen Recordings

Line Chart example that has left: 16. Not super noticeable.

Line Chart example with left: 32. Very noticeable.

Line Chart example with left: 0. Removes the issue.

Tooltip Interactions example left: 36 Very noticeable.

Tooltip Interactions example left: 0 Removes the issue.

localX value when left: 32

Theme / styling with settings()

Gnatt / Timeline

Consider adding more "math" components

Gradient path

color gradient along svg path
Gradients Along SVG Path (using GSAP)

Pack

Option to show/hide root circle
- https://observablehq.com/@mbostock/pack-o-matic
Leaves only
- https://observablehq.com/@d3/bubble-chart
Transform each circle / text instead of using viewport
- Fill keep strokes same width regardless of zoom
- No longer need to scale text
- https://observablehq.com/@d3/zoomable-circle-packing
Add text stroke (after individual transforms are applied)
- style: paint-order: stroke; stroke: white; stroke-width: 2px
Create CircleText to simplify creating text on path inside/outside a circle
Fit text within circle
- https://observablehq.com/@mbostock/example-authors
https://observablehq.com/@clhenrick/circle-packing-nested?collection=@clhenrick/explainers

Pan/Zoom/Draggable

TODO

References

Statistics

Histogram (Binning)
Trend line
- Linear Regression
- Polynomial
- https://docs.exploratory.io/visualization/features/trend-line
- https://observablehq.com/@observablehq/plot-linear-regression
Reference line
- https://docs.exploratory.io/visualization/features/reference-line
Windowing
- Cumulative
- Moving averages, min/max, etc
- https://docs.exploratory.io/visualization/features/window-calc
- https://observablehq.com/@fil/moving-average-blur
- https://observablehq.com/@skybrian/multiple-pass-moving-average-filters
- https://observablehq.com/@d3/d3-blur
Bollinger bands
- https://observablehq.com/@d3/bollinger-bands/2
- https://observablehq.com/@observablehq/plot-bollinger-bands
  - https://observablehq.com/plot/marks/bollinger
Top N + Others (aggregate smaller values together, either by count or by a threshold)
BoxPlot
- https://airbnb.io/visx/statsplot
- https://codepen.io/borntofrappe/pen/oNybwPB?editors=0010
Bullet
- https://nivo.rocks/bullet/
Transforms

Delayed transitions / animations

Add more Sankey examples

Expandable (similar to Tree)
- https://unovis.dev/gallery/view/?collection=Networks%20and%20Flows&title=Expandable%20Sankey
Highlight downstream
- https://observablehq.com/@bda/lafe
d3-array rollup usage (with common downstream nodes)
HTML labels
Animated links
- Animated gradients
- Animated SVG gradient
Flowing particles along a path
- Particle Sankey

[Points / ConnectedPoints] Center within band scale by default (set offsetY)

Currently you must explicitly set offsetY to center within a scaleBand (see ClevelandDotPlot). We should be able to detect the yScale as scaleBand and do this by default (but still allow overriding if passed explicitly). Do the same for offsetX / scaleX.

Replace all direct `formatDate()` / `formatNumberAsStyle()` direct usage with `format()`

Now that format() passes additional arguments to the underlying formatDate() / formatNumberAsStyle(), there shouldn't be a reason to use these directly, and will simplify imports

[Bars] Inset should support percent when decimal (like Arc radius)

padding should also be renamed to inset to not confuse with chart and bar group padding
Just like Arc's inner/outer radius, if the value is decimal, it should be treated as a percentage of the band's width.

Sunburst

Enhancements

Allow viewing single (or x number) of layers at a time, instead of all
- https://observablehq.com/@d3/zoomable-sunburst
#7
Hover highlights
- https://observablehq.com/@kerryrodden/sequences-sunburst
- https://chrisbateman.github.io/webpack-visualizer/
Tooltips

Geography Map

Use cases

Examples

Other libraries

Reference

Globe (3D)

Brush / Scrubbing

Examples

Calendar

Add ApiDocs

Using vite-plugin-sveld. See the following svelte-ux commits:

Add ApiDocs
Add table of contents
Add links to source / doc

[Text] Animate position

See Rect, Path, etc. This could be useful to animate axis labels, for example.

	const point = localPoint(referenceNode, event);
	const localX = point?.x ?? 0;
	const localY = point?.y ?? 0;

techniq / layerchart Goto Github PK

layerchart's Introduction

LayerChart

Contributing

Install dependencies

Run dev server for layerchart package

Add changeset to include change in changelog and determine next version

layerchart's People

Contributors

Stargazers

Watchers

Forkers

layerchart's Issues

Issue

Details

Solution?

Hierarchy

Examples

Basic

Hierarchy

Time

Interaction

Statistics / Analytics

Other

See also

Examples

Radar chart

Radial line / area charts

Radial bar charts

Radial bar chart (around)

Gauge

Spiral

Examples

Tooltip / Selection

HighlightLine

HighlightRect

HighlightLabel

Features

Component cleanup

Examples

Improvements

Docs

Examples

Main Issue

Issue Details

Solution?

Screen Recordings

TODO

References

Enhancements

Use cases

Examples

Other libraries

Reference

Globe (3D)

Examples

Recommend Projects

Recommend Topics

Recommend Org

Run dev server for `layerchart` package