[![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![MIT License][license-shield]][license-url] [![LinkedIn][linkedin-shield]][linkedin-url]
Logo

Family Chart

Create beautiful, interactive family trees with this powerful D3.js-based visualization library
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contributing
  5. License
  6. Contact
## About The Project [![Product Name Screen Shot][product-screenshot]](https://donatso.github.io/family-chart-doc/wiki-tree/?wiki_id=Q43274) Family Chart is a powerful D3.js-based visualization library for creating beautiful, interactive family trees. The library offers: - **Example-based Learning**: Explore pre-built examples and customize them to match your needs - **Create from Scratch**: Build your family tree from the ground up with an intuitive interface - **Full Customization**: Complete control over your tree's structure and styling - **Interactive Features**: Built-in interactivity ## Getting Started [![Create tree][create-tree-screenshot]](https://donatso.github.io/family-chart-doc/create-tree) 1. Visit [doc/create-tree](https://donatso.github.io/family-chart-doc/create-tree/) 2. Create your family tree 3. Copy/paste generated code for Vanila, Vue or React. 4. Give me some github stars (: ## Usage ### [Static](https://codepen.io/donatso/pen/ExqJVEQ?editors=1000) ### [React](https://codepen.io/donatso/pen/mdNgeQN?editors=0010) ### [Vue](https://codepen.io/donatso/pen/poMBjZe) ## Examples ### 1. WikiData Integration Explore our interactive family tree viewer that connects to the WikiData database, allowing you to visualize family relationships for millions of historical figures and notable people. Simply enter a WikiData ID to generate a complete family tree. [![WikiData Family Tree Example][product-wiki-tree-screenshot]](https://donatso.github.io/family-chart-doc/wiki-tree/?wiki_id=Q43274) Try it with: - [British Royal Family (Q43274)](https://donatso.github.io/family-chart-doc/wiki-tree/?wiki_id=Q43274) - [Albert Einstein (Q937)](https://donatso.github.io/family-chart-doc/wiki-tree/?wiki_id=Q937) - [Leonardo da Vinci (Q762)](https://donatso.github.io/family-chart-doc/wiki-tree/?wiki_id=Q762) ### 2. Basic Implementation A simple example showing how to create a custom family tree from scratch. This demo features Aristotle's family tree with basic styling and interactions. [![Basic Family Tree Example][product-basic-tree-screenshot]](https://donatso.github.io/family-chart-doc/examples/1-basic-tree) ## Contributing Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again! 1. Fork the Project 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the Branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ## License Distributed under the MIT License. See `LICENSE.txt` for more information. ## Contact Project Link: [https://github.com/donatso/family-chart](https://github.com/donatso/family-chart)

(back to top)

[contributors-shield]: https://img.shields.io/github/contributors/donatso/family-chart.svg?style=for-the-badge [contributors-url]: https://github.com/donatso/family-chart/graphs/contributors [forks-shield]: https://img.shields.io/github/forks/donatso/family-chart.svg?style=for-the-badge [forks-url]: https://github.com/donatso/family-chart/network/members [stars-shield]: https://img.shields.io/github/stars/donatso/family-chart.svg?style=for-the-badge [stars-url]: https://github.com/donatso/family-chart/stargazers [issues-shield]: https://img.shields.io/github/issues/donatso/family-chart.svg?style=for-the-badge [issues-url]: https://github.com/donatso/family-chart/issues [license-shield]: https://img.shields.io/github/license/donatso/family-chart.svg?style=for-the-badge [license-url]: https://github.com/donatso/family-chart/blob/master/LICENSE.txt [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555 [linkedin-url]: https://linkedin.com/in/donat-sorić-342a92161 [product-screenshot]: https://github.com/user-attachments/assets/a4f8a9c0-c327-45fa-90bc-23d73578a304 [product-basic-tree-screenshot]: https://github.com/user-attachments/assets/7e231e53-9230-49f9-ae93-8125096237dc [product-wiki-tree-screenshot]: https://github.com/user-attachments/assets/4e2dc169-4b43-46f3-b31c-db17f4d489da [create-tree-screenshot]: https://github.com/user-attachments/assets/ce5c4b33-48dd-441c-aa2f-f581b57ddcb7