https://github.com/ryu-man/chartfull

Redefined chart library built with Svelte and D3.js for Svelte, declarative, reactive, and customizable
https://github.com/ryu-man/chartfull

charts d3 data-visualization javascript svelte visualization

Last synced: 20 days ago
JSON representation

Redefined chart library built with Svelte and D3.js for Svelte, declarative, reactive, and customizable

• Host: GitHub
• URL: https://github.com/ryu-man/chartfull
• Owner: ryu-man
• License: mit
• Created: 2021-02-13T09:48:56.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-11T08:59:53.000Z (3 months ago)
• Last Synced: 2024-11-21T22:49:37.914Z (about 2 months ago)
• Topics: charts, d3, data-visualization, javascript, svelte, visualization
• Language: Svelte
• Homepage: https://chartfull.vercel.app
• Size: 1.83 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chartfull

an impressive data visualization library aimed at [Svelte](https://www.svelte.dev) framework users. This library, powered by the ever-popular [D3.js](https://d3js.org/), is highly customizable, allowing you to make the most of your data, as well as its declarative and reactive approach, allowing you to easily create interactive and informative visualizations. 

Whether you're an experienced developer or just starting out, you'll find that this library is simple to use and yields stunning results that will impress. So why not try it out right now and take your data visualizations to the next level?

## Usage

Coming soon !

## Usage

```html

    import { Chartfull, XAxis, YAxis, Line } from "Chartfull"

    let data = []

    let innerWidth: number

    let inner Height: number

    const xAccessor = d=> d.x

    const yAccessor = d=> d.y

	$: xScale = scaleTime(extent(data.map(xAccessor)), [0, innerWidth]);

	$: yScale = scaleLinear(extent(data.map(yAccessor)), [innerHeight, 0]);

	$: xGet = get(xScale, xAccessor);

	$: yGet = get(yScale, yAccessor);

	$: d = line(xGet, yGet)(data);

 Line chart <-->

	

		

		Label goes here

	

	

		

		Label goes here

	

	

		Chart title

	

	

```

## Components

## Licence

Chartfulls is [MIT Licence](./LICENSE)

## Inspiration

- [Pancake](https://github.com/Rich-Harris/pancake)