This is a novel interactive representation of the Periodic Table of Elements using a sunburst chart instead of the traditional 2D linear depiction. The goal of this project is to document the process of creating the chart using only the Wijmo 5 Sunburst control and some JavaScript conveniences.
For full disclosure, I am currently an employee at GrapeCity. That being said, I am also a recently graduated biochemistry major. That's why I have two goals with this project:
- To make it easier for younger students to learn the periodic table. Trust me, I know, there are a lot of elements on the periodic table (including some new ones!), and while the grouping is second nature to a seasoned chemist, it's not always intuitive to new students. I think that this representation makes things a bit easier, so I'm hoping that some educators will give it a try.
- To sell you on the usefulness of web UI libraries, especially Wijmo. I hope that this demo will give you a good idea of how easy it is to display data quickly, coherently and uniquely using the chart controls available in Wijmo 5. It makes this process easy and fun, and I think it'd be a great project for educating (say) high school students about programming and science simultaneously.
So while this is a great chance to show the power and convenience of some newer Wijmo 5 controls, more importantly, it generally demonstrates the usefulness of interactive web apps in the classroom setting.
You can also read more about this project and the data visualization background in the official companion blog post.
If you have any questions or suggestions concerning my goals, let me know by emailing me or opening an issue! Without further ado, let's get to the guts of this project.
All of the periodic table data was obtained from Data Explorer in XML format. The data was sanitized, trimmed down, and converted to JSON for this project. See the commit history for details on that process.
You will need the following programs properly installed on your computer.
Clone the git repository:
git clone https://github.com/cgatno/wijmo5_periodic_sunburst.git
Enter the source directory, install dependencies, and build:
cd wijmo5_periodic_sunburst
npm install
npm run build
npm start
Everything you need to run and test the sample is built-in! Simply run
npm start
and then visit http://localhost:8100 in your browser.
As indicated above, the toolchain for building is already included, too! All you need to do is run
npm run build
and all of the source JavaScript will be bundled (via Browserify), transpiled (via Babel) and minified (via UglifyJS). Those are a lot of cool JavaScript tools working together, huh?
As the introduction to this project implies, it's designed and meant to be used by everyone; the more the merrier! Whether you're an educator, a programmer, a scientist, or just an interested student, feel free to fork this project, hack on it, open pull requests, start new issues, etc. I'd really like to see this used by everyone who thinks it has some utility, so I'm always open to suggestions, bug reports, really anything! Also, since this is supposed to be an educational experience, all questions are also welcome. If you don't want to ask your question publicly, just shoot me an email and I'll get back to you as soon as I can.
If you want to do some work on the project or just need ideas (everyone needs some inspiration now and then), try checking out the issue tracker for a list of current bugs and enhancement ideas.
For this project, I'm using Airbnb's JavaScript Style Guide with some modifications (see .eslintrc.json). The project is already set up for linting via ESLint, so be sure that any JavaScript modifications you make pass linting! If your code does not pass linting without modifying the current ESLint rules, let me know why you think they should be changed and we can discuss the possibility of modifying the rules.
For this project I'll be using the Gitflow Workflow which is derived from an original methodology used by Vincent Driessen.
All versioning follows the Semantic Versioning system of versioning.
Ankit Gupta, another GrapeCity employee, is the one who first came up with this idea and implemented it in a WinForms application.
The author of this project, specifically the web implementation of the Periodic Sunburst Chart, is Christian Gaetano.
This project is currently licensed under the MIT license. Please note that the MIT license does not cover any of the Wijmo library components or anything Wijmo-related for that matter. The Wijmo source code and the distributable libraries are protected under the terms of GrapeCity Inc.'s EULA.