In a recent project, I need to build a highly-customized chart with following features:
Instead of using one of available built-in chart libraries that usually lack of capabilities in customizing/expanding a feature as you want, I decided to go with D3 - a rising star in the field of data visualization.
According to their introduction: D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation.
With a small effort, I have easily set up an area chart (link to sample):
And successfully added the time selector (link to sample):
Finally, I add logic codes to process the highlighted values and interactive threshold line. The chart is completed!
This is just my first experience with D3 framework, but the result is cool (do you agree?). I really like the framework and will definitely use D3 for upcoming graphic visualization modules.
I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at