-
Notifications
You must be signed in to change notification settings - Fork 188
Home
d3plus is an extension to the D3 library that allows fast and easy creation of data visualizations. Click here to view live examples of all of the various things d3plus can do.
The crux of d3plus is its easy-to-use visualizations. By passing your data and setting a few methods that describe your data, d3plus effortlessly creates interactive visualizations to help your explore your data. You get a lot for free here: nesting, tooltips, timelines, legends, just to name a few. Here are the visualizations currently supported by d3plus:
Tree Map | Scatter Plot | Stacked Area | Line Plot | Bar Plot | Pie Chart |
---|---|---|---|---|---|
![]() Example |
![]() Example |
![]() Example |
![]() Example |
![]() Example |
![]() Example |
Network | Rings | Geo Map | Boxplot | Bubbles |
---|---|---|---|---|
![]() Example |
![]() Example |
![]() Example |
Example |
![]() Example |
SVG does not natively support wrapping text. Because of this, we created our own solution to break lines of SVG text at appropriate points, while also allowing the text to resize to fit the available space (if desired). Here is an example page showing how to wrap and resize SVG text in both rectangles and circles:
SVG Text Wrapping |
---|
![]() |
d3plus includes advanced, cross-browser form styling and behavior that helps make normal HTML forms beautiful and reliable. Here are the supported form types:
- Buttons
- Dropdown Menus
- Radio Toggles
- Auto Detect
Click here to learn more about forms, and to see all of the available methods. Here are some example usages:
Converting Existing HTML Forms | Creating Forms from Javascript | Using Forms in Visualizations | Forms with Nested Data |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
As d3plus is developed, any simple functions that could be used publicly are made available for everyone to use. They are grouped into categories based on the type of data that they manipulate, and here are the categories:
Here are some d3plus.color
examples:
Legible Text on Colored Backgrounds |
Legible Text on White Backgrounds |
Lighten Colors |
---|---|---|
![]() |
![]() |
![]() |