{"id":21722111,"url":"https://github.com/funlee/d3charts","last_synced_at":"2026-04-13T22:02:10.954Z","repository":{"id":52160989,"uuid":"111679185","full_name":"funlee/d3charts","owner":"funlee","description":"the series of charts drawed by D3.js","archived":false,"fork":false,"pushed_at":"2026-03-28T16:21:10.000Z","size":6020,"stargazers_count":1,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-28T18:26:36.757Z","etag":null,"topics":["charts","d3js","webpack"],"latest_commit_sha":null,"homepage":"https://funlee.github.io/d3charts/","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/funlee.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}},"created_at":"2017-11-22T12:04:50.000Z","updated_at":"2026-03-28T16:21:14.000Z","dependencies_parsed_at":"2023-01-25T03:30:35.123Z","dependency_job_id":null,"html_url":"https://github.com/funlee/d3charts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/funlee/d3charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funlee%2Fd3charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funlee%2Fd3charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funlee%2Fd3charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funlee%2Fd3charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funlee","download_url":"https://codeload.github.com/funlee/d3charts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funlee%2Fd3charts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31772642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","d3js","webpack"],"created_at":"2024-11-26T02:21:53.238Z","updated_at":"2026-04-13T22:02:10.948Z","avatar_url":"https://github.com/funlee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3Charts\r\n\r\nA collection of elegant and animated data visualization charts built with D3.js v3.\r\n\r\n[中文文档](./README.zh.md) | **English**\r\n\r\n## Preview\r\n\r\nOnline Demo: [https://funlee.github.io/d3charts/](https://funlee.github.io/d3charts/)\r\n\r\n## Charts Included\r\n\r\n| Chart Type | Description |\r\n|---|---|\r\n| **Bar Chart** | Gradient bar chart with hover tooltip and entrance animation |\r\n| **Bar (Normal)** | Standard bar chart variant |\r\n| **Bar (Mask)** | Bar chart with image mask effect |\r\n| **Bar (Path)** | Bar chart rendered using SVG path |\r\n| **Bar (CSS)** | Horizontal bar chart implemented with CSS animation |\r\n| **Line Chart** | Multi-series smooth line chart with fade-in animation |\r\n| **Area Chart** | Gradient area chart with bounce animation using SVG mask |\r\n| **Pie Chart** | Donut-style pie chart with image fill and label lines |\r\n| **Water Ball** | Animated liquid ball chart showing percentage with wave motion |\r\n| **Radar Chart** | Dual-series radar/spider chart with concentric grid |\r\n| **Triangle Chart** | Creative triangle-shaped bar chart |\r\n| **China Map** | Choropleth map of China with province hover tooltip and color legend |\r\n\r\n## Tech Stack\r\n\r\n- **[D3.js v3](https://d3js.org/)** — Core SVG drawing and data binding\r\n- **[Webpack 3](https://webpack.js.org/)** — Module bundler and dev server\r\n- **[Handlebars](https://handlebarsjs.com/)** — HTML templating engine\r\n- **[Mock.js](http://mockjs.com/)** — Random data generation for demos\r\n- **[jQuery](https://jquery.com/)** — DOM utilities\r\n- **[Bootstrap 3](https://getbootstrap.com/docs/3.4/)** — Base styles\r\n- **Less** — CSS pre-processor\r\n\r\n## Getting Started\r\n\r\n### Prerequisites\r\n\r\n- Node.js \u003e= 6.x\r\n- npm or yarn\r\n\r\n### Installation\r\n\r\n```bash\r\ngit clone https://github.com/funlee/d3charts.git\r\ncd d3charts\r\nnpm install\r\n```\r\n\r\n### Development\r\n\r\n```bash\r\nnpm run start\r\n```\r\n\r\nThen open [http://localhost:8080](http://localhost:8080) in your browser. The page will auto-refresh on file changes.\r\n\r\n### Build\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThe bundled output will be generated in the `dist/` directory.\r\n\r\n## Project Structure\r\n\r\n```\r\nd3charts/\r\n├── build/\r\n│   └── webpack.config.js        # Webpack configuration\r\n├── src/\r\n│   ├── app.js                   # Application entry point\r\n│   ├── css/\r\n│   │   └── app.css              # Global styles\r\n│   ├── hbs/                     # Page layout templates\r\n│   │   ├── banner.hbs\r\n│   │   ├── container.hbs\r\n│   │   ├── layer.hbs\r\n│   │   └── footer.hbs\r\n│   ├── img/                     # Image assets\r\n│   └── components/\r\n│       ├── render.js            # Chart router / dispatcher\r\n│       ├── charts/              # Individual chart implementations\r\n│       │   ├── bar.js           # Gradient bar chart\r\n│       │   ├── barNormal.js     # Normal bar chart\r\n│       │   ├── barMask.js       # Mask bar chart\r\n│       │   ├── barPath.js       # Path bar chart\r\n│       │   ├── barCss.js        # CSS bar chart\r\n│       │   ├── line.js          # Line chart\r\n│       │   ├── area.js          # Area chart\r\n│       │   ├── pie.js           # Pie chart\r\n│       │   ├── waterBall.js     # Water ball chart\r\n│       │   ├── radar.js         # Radar chart\r\n│       │   ├── triangle.js      # Triangle chart\r\n│       │   └── map.js           # China map chart\r\n│       ├── tool/                # Shared utilities\r\n│       │   ├── getContainer.js  # SVG container factory\r\n│       │   ├── getSize.js       # Responsive size calculator\r\n│       │   ├── getLinearGradient.js  # SVG gradient generator\r\n│       │   ├── tooltip.js       # Floating tooltip component\r\n│       │   ├── chinaMap.js      # China map helper\r\n│       │   ├── southChinaSea.js # South China Sea inset\r\n│       │   └── getIdRandom.js   # Random ID generator\r\n│       ├── lib/\r\n│       │   └── chinageo.json    # China GeoJSON data\r\n│       ├── hbs/\r\n│       │   └── barCss.hbs       # CSS bar chart template\r\n│       └── style/               # Component styles\r\n│           ├── line.css\r\n│           └── barCss.css\r\n└── package.json\r\n```\r\n\r\n## How It Works\r\n\r\nEach chart is a self-contained class that follows a consistent pattern:\r\n\r\n1. **`defaultSet()`** — Returns default configuration (colors, margins, sizes)\r\n2. **`constructor(selector, option)`** — Creates SVG container, initializes mock data, and merges options\r\n3. **`render(data)`** — Draws axes and delegates to specific draw methods\r\n\r\nClicking a chart card on the homepage triggers `render.js`, which instantiates the corresponding chart class inside a modal layer.\r\n\r\n## License\r\n\r\nISC © [funlee](https://github.com/funlee)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunlee%2Fd3charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunlee%2Fd3charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunlee%2Fd3charts/lists"}