{"id":14036281,"url":"https://github.com/evoluteur/d3-table-cards","last_synced_at":"2025-04-16T14:27:36.515Z","repository":{"id":57143396,"uuid":"87993389","full_name":"evoluteur/d3-table-cards","owner":"evoluteur","description":"Table/Cards views using D3.js for animated transitions on sorting and changing view.","archived":false,"fork":false,"pushed_at":"2024-12-29T07:07:17.000Z","size":195,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-24T19:50:15.214Z","etag":null,"topics":["animation","animations","card","cards","cards-views","cardview","d3","d3-js","d3js","d3v6","data-grid-view","table","tableview","transformation","transition","transition-animation","transitions","ui"],"latest_commit_sha":null,"homepage":"https://evoluteur.github.io/d3-table-cards/","language":"JavaScript","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/evoluteur.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":"2017-04-12T00:58:44.000Z","updated_at":"2025-02-15T18:13:10.000Z","dependencies_parsed_at":"2024-03-14T01:27:48.048Z","dependency_job_id":"4503d8fb-be0f-4185-9a61-f5347a0af850","html_url":"https://github.com/evoluteur/d3-table-cards","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"8089a21ebd1d394ffebad4ec6d5d4430d3930b61"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fd3-table-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fd3-table-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fd3-table-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evoluteur%2Fd3-table-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evoluteur","download_url":"https://codeload.github.com/evoluteur/d3-table-cards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249250435,"owners_count":21237897,"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":["animation","animations","card","cards","cards-views","cardview","d3","d3-js","d3js","d3v6","data-grid-view","table","tableview","transformation","transition","transition-animation","transitions","ui"],"created_at":"2024-08-12T03:01:54.547Z","updated_at":"2025-04-16T14:27:36.492Z","avatar_url":"https://github.com/evoluteur.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# D3-Table-Cards \u0026middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/d3-table-cards)](https://github.com/evoluteur/d3-table-cards/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/d3-table-cards)](https://www.npmjs.com/package/d3-table-cards)\n\n\nExample of using D3.js for transformations between table and cards views, and animated transitions while sorting elements or resizing the browser.\n\nCheck out [the demo](https://evoluteur.github.io/d3-table-cards/).\n\n![screenshot](https://raw.github.com/evoluteur/d3-table-cards/master/screenshot.gif)\n\n\nThis code uses HTML (with absolute positioning) rather than SVG, and has no dependencies beside D3.js.\n\nThe table and cards layouts are configurable.\n\n```javascript\n\nconst layoutInfo = {\n\ttable: {\n\t\t// row position \u0026 size\n\t\ttop: (d, i) =\u003e 40+i*31+\"px\",\n\t\tleft: \"0px\",\n\t\theight: \"30px\",\n\t\twidth: \"594px\",\n\t\t// row border-radius\n\t\tradius: 0,\n\t\t// table header\n\t\theaderOpacity: 1,\n\t\theaderLeft: \"0px\",\n\t\t// column 1\n\t\tc1Top: \"5px\",\n\t\tc1Left: \"8px\",\n\t\tc1FontSize: \"16px\",\n\t\t// column 2\n\t\tc2Top: \"5px\",\n\t\tc2Left: \"200px\",\n\t},\n\tcards: {\n\t\t// card position \u0026 size\n\t\ttop: (d, i) =\u003e Math.floor(i/cardsPerRow)*94+\"px\",\n\t\tleft: (d, i) =\u003e (i%cardsPerRow)*210+\"px\",\n\t\theight: \"84px\",\n\t\twidth: \"200px\",\n\t\t// card border-radius\n\t\tradius: \"4px\",\n\t\t// table header (hidden)\n\t\theaderOpacity: 0,\n\t\theaderLeft: \"-650px\",\n\t\t// line 1\n\t\tc1Top: \"10px\",\n\t\tc1Left: \"10px\",\n\t\tc1FontSize: \"18px\",\n\t\t// line 2\n\t\tc2Top: \"38px\",\n\t\tc2Left: \"10px\",\n\t}\n};\n\n```\n\nNote: The same result can also be achieved [using CSS transitions instead of D3](https://evoluteur.github.io/isomorphic-table-cards/index.html).\n\nMy other D3 animations: [meet-the-fans](https://evoluteur.github.io/meet-the-fans) and [d3-dual-range-slider](https://evoluteur.github.io/d3-dual-range-slider).\n\n\n(c) 2024 [Olivier Giulieri](https://evoluteur.github.io/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fd3-table-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevoluteur%2Fd3-table-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevoluteur%2Fd3-table-cards/lists"}