{"id":16867666,"url":"https://github.com/jens-ox/d3-lit","last_synced_at":"2026-04-20T09:03:18.983Z","repository":{"id":96757262,"uuid":"242498081","full_name":"jens-ox/d3-lit","owner":"jens-ox","description":"Experimental D3 element ports to Web Components using lit-html","archived":false,"fork":false,"pushed_at":"2020-05-17T18:46:55.000Z","size":109,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T13:35:07.252Z","etag":null,"topics":["d3","lit-html","visualization","web-components"],"latest_commit_sha":null,"homepage":"https://stoic-wescoff-1406d9.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jens-ox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2020-02-23T10:36:28.000Z","updated_at":"2023-07-15T02:48:06.000Z","dependencies_parsed_at":"2023-03-13T16:24:55.962Z","dependency_job_id":null,"html_url":"https://github.com/jens-ox/d3-lit","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"037133f17c28b93d07994be4752da0215fb4f7cd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jens-ox%2Fd3-lit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jens-ox%2Fd3-lit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jens-ox%2Fd3-lit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jens-ox%2Fd3-lit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jens-ox","download_url":"https://codeload.github.com/jens-ox/d3-lit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244283948,"owners_count":20428279,"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":["d3","lit-html","visualization","web-components"],"created_at":"2024-10-13T14:55:12.057Z","updated_at":"2026-04-20T09:03:13.961Z","avatar_url":"https://github.com/jens-ox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg alt=\"Sample Screenshot\" src=\"./.img/screenshot.png\"\u003e\n\u003c/p\u003e\n\n### Motivation\n\nThe parts of D3 that are meant to directly produce DOM elements are hard to use with frameworks, because manual work is needed to correctly react to changes. Avoiding this is one of the reasons why frontend frameworks exist in the first place, so this feels like a step back for some people.\n\nYou can of course use things like d3-axis with frontend frameworks like Preact, but it's not that pretty: you have to use ref callbacks (see [Mike Bostock's post for an example](https://medium.com/@mbostock/why-you-should-use-d3-ae63c276e958)). In Vue.js, ref callbacks don't even exist. Many visualization libraries, e.g. [vx](https://github.com/hshoff/vx), implement things like axes from scratch, because it's easier that way.\n\nWeb Components allow us to build components that react to changes and are both usable in vanilla JavaScript and modern frameworks.\n\n### Usage\n\nThis is obviously experimental and not meant to be used in a \"serious\" environment.\n\nRefer to [the LitElement usage guide](https://lit-element.polymer-project.org/guide/use) for a guide on how to use the components.\n\nThe API is nearly the same as [D3's API](https://github.com/d3/d3-axis):\n\n```html\n\u003cbody\u003e\n  \u003cd3-axis\u003e\u003c/d3-axis\u003e\n\u003c/body\u003e\n\u003cscript\u003e\n  const axis = document.querySelector('d3-axis')\n  axis.tickSizeInner = 12\n  console.log(axis.tickSizeInner) // 12\n\u003c/script\u003e\n```\n\nFor a simple Line Graph, you can either proceed like in the example above or use it inside of another LitElement component:\n\n```jsx\n\u003cline-graph\n  width=\"700\"\n  height=\"250\"\n  .data=${users.map(entry =\u003e ({\n    date: new Date(entry.date),\n    value: entry.value\n  }))}\n  .yScale=${{ minValue: 0 }}\n  brush\n  area\n  .xAccessor=${x =\u003e x.date}\n  .yAccessor=${x =\u003e x.value}\n  .curve=${d3.curveCatmullRom}\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjens-ox%2Fd3-lit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjens-ox%2Fd3-lit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjens-ox%2Fd3-lit/lists"}