layerchart icon indicating copy to clipboard operation
layerchart copied to clipboard

Simplify imports (scales, curves, projections, etc)

Open techniq opened this issue 8 months ago • 2 comments

Instead of requiring imports from d3-scales, d3-shape, d3-geo, we should support simple strings for many of these use cases (but still support functions for custom implementations including pulling from other sources such as d3-geo-projection) or d3-geo-polygon).

This will

  • Simplify the packages needing to be installed by the user
  • Knowing the packages and import names (prefixes like scale*, geo*, curve*, etc)
  • Explorability of the API (ex. auto complete when <Spline curve=" is typed with available options)

Scale

Before

<script>
  import { scaleBand } from 'd3-scale';
</script>

<Chart xScale={scaleBand()} />

After

<Chart xScale="band" />

Curve

Before

<script>
  import { curveMonotoneX } from 'd3-shape';
</script>

<Spline curve={curveMonotoneX} />

After

<Spline curve="monotoneX" />

Projection

Before

<script>
  import { geoOrthographic } from 'd3-geo';
</script>

<Chart geo={{ projection: geoOrthographic }}>...</Chart>

After

<Chart geo={{ projection: 'orthographic' }}>...</Chart>

Will need to consider how this impacts the library size / tree shaking.

techniq avatar Apr 30 '25 14:04 techniq

This seems hard to do without breaking tree shaking. A cleaner solution would be to reexport these functions from layerchart.

However, I don't think it's a problem as is right now. As long as it's made clear where these functions are coming from in the docs.

ecstrema avatar Jul 27 '25 21:07 ecstrema

@ecstrema that's a good point. Maybe re-exporting (possibly with simplified names) is a descent compromise. I still like the ergonomics of intellisense with known string values though).

Before

<script>
  import { scaleBand } from 'd3-scale';
  import { curveMonotoneX } from 'd3-shape';
</script>

<Chart xScale={scaleBand()} />
<Spline curve={curveMonotoneX} />

After

<script>
  import { band } from 'layerchart/scale';
  import { monotoneX } from 'layerchart/curve';
</script>

<Chart xScale={band()} />
<Spline curve={monotoneX} />

techniq avatar Jul 28 '25 14:07 techniq