{"id":23107910,"url":"https://github.com/ryu-man/chartfull","last_synced_at":"2025-08-16T17:32:01.794Z","repository":{"id":46184991,"uuid":"338542581","full_name":"ryu-man/chartfull","owner":"ryu-man","description":"Redefined chart library built with Svelte and D3.js for Svelte, declarative, reactive, and customizable","archived":false,"fork":false,"pushed_at":"2024-10-11T08:59:53.000Z","size":1918,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-21T22:49:37.914Z","etag":null,"topics":["charts","d3","data-visualization","javascript","svelte","visualization"],"latest_commit_sha":null,"homepage":"https://chartfull.vercel.app","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryu-man.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-02-13T09:48:56.000Z","updated_at":"2024-10-11T08:59:53.000Z","dependencies_parsed_at":"2024-03-11T04:29:50.295Z","dependency_job_id":"195f9a3e-62c5-4ed9-92fb-7388e15fbcc3","html_url":"https://github.com/ryu-man/chartfull","commit_stats":null,"previous_names":["ryu-man/chartfull","ryu-man/grafico"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fchartfull","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fchartfull/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fchartfull/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fchartfull/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryu-man","download_url":"https://codeload.github.com/ryu-man/chartfull/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230047181,"owners_count":18164575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","d3","data-visualization","javascript","svelte","visualization"],"created_at":"2024-12-17T01:16:26.463Z","updated_at":"2024-12-17T01:16:26.899Z","avatar_url":"https://github.com/ryu-man.png","language":"Svelte","readme":"# Chartfull\n\nan 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. \n\nWhether 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?\n\n\n## Usage\n\nComing soon !\n\n\u003c!-- ```bash --\u003e\n\u003c!-- # using npm --\u003e\n\u003c!-- npm install Chartfulls --\u003e\n\u003c!--  --\u003e\n\u003c!-- # using yarn --\u003e\n\u003c!-- yarn install Chartfulls --\u003e\n\u003c!-- ``` --\u003e\n\n## Usage\n\n```html\n\u003cscript lang=\"ts\"\u003e\n    import { Chartfull, XAxis, YAxis, Line } from \"Chartfull\"\n\n    let data = []\n\n    let innerWidth: number\n    let inner Height: number\n\n    const xAccessor = d=\u003e d.x\n    const yAccessor = d=\u003e d.y\n\n\t$: xScale = scaleTime(extent(data.map(xAccessor)), [0, innerWidth]);\n\t$: yScale = scaleLinear(extent(data.map(yAccessor)), [innerHeight, 0]);\n\n\t$: xGet = get(xScale, xAccessor);\n\t$: yGet = get(yScale, yAccessor);\n\n\t$: d = line(xGet, yGet)(data);\n\u003c/script\u003e\n\n\u003c!--\u003e Line chart \u003c--\u003e\n\n\u003cChartfull\n\tpadding={{ left: 72, top: 16, right: 16, bottom: 16 }}\n\tfontSize=\"16\"\n\t{...args}\n\t{data}\n\tbind:innerWidth\n\tbind:innerHeight\n\u003e\n\t\u003cYAxis scale={yScale} let:tick\u003e\n\t\t\u003cTick {tick} x2={-innerWidth} /\u003e\n\t\t\u003ctext slot=\"label\"\u003eLabel goes here\u003c/text\u003e\n\t\u003c/YAxis\u003e\n\n\t\u003cXAxis scale={xScale} y={innerHeight} orient=\"bottom\" let:tick\u003e\n\t\t\u003cTick {tick} y2={-innerHeight} /\u003e\n\t\t\u003ctext slot=\"label\" x={innerWidth}\u003eLabel goes here\u003c/text\u003e\n\t\u003c/XAxis\u003e\n\n\t\u003ctext\n\t\tx={innerWidth}\n\t\ttext-anchor=\"end\"\n\t\tdominant-baseline=\"text-before-edge\"\n\t\tfont-size=\"24pt\"\n\t\tfont-weight=\"600\"\n\t\tfill=\"rgba(0,0,0, .1)\"\n\t\u003e\n\t\tChart title\n\t\u003c/text\u003e\n\n\t\u003cLine {d} stroke=\"rgba(0 0 0 / .6)\" strokeWidth=\"1\" /\u003e\n\u003c/Chartfull\u003e\n\n```\n\n## Components\n\n## Licence\n\nChartfulls is [MIT Licence](./LICENSE)\n\n## Inspiration\n\n- [Pancake](https://github.com/Rich-Harris/pancake)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fchartfull","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryu-man%2Fchartfull","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fchartfull/lists"}