family-chart

[![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]  <br /> <div align="center"> <a href="https://github.com/donatso/family-chart"> <img src="examples/logo.svg" alt="Logo" width="80" height="50"> </a> <h3 align="center">Family Chart</h3> <p align="center"> Create beautiful, interactive family trees with this powerful D3.js-based visualization library <br /> <a href="https://github.com/donatso/family-chart"><strong>Explore the docs »</strong></a> <br /> <br /> <a href="https://donatso.github.io/family-chart-doc/wiki-tree?wiki_id=Q43274">View Demo</a> · <a href="https://github.com/donatso/family-chart/issues">Report Bug</a> · <a href="https://github.com/donatso/family-chart/issues">Request Feature</a> </p> </div>  <details> <summary>Table of Contents</summary> <ol> <li> <a href="#about-the-project">About The Project</a> </li> <li> <a href="#getting-started">Getting Started</a> </li> <li><a href="#usage">Usage</a></li> <li><a href="#contributing">Contributing</a></li> <li><a href="#license">License</a></li> <li><a href="#contact">Contact</a></li> </ol> </details>  ## 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) <p align="right">(<a href="#top">back to top</a>)</p>  [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