yellowtugboat / monte Goto Github PK

View Code? Open in Web Editor NEW

6.0 1.0 1.0 2.01 MB

A visualization framework for D3.js and SVG. Ships with prebuilt charts and components.

Home Page: http://montejs.com

License: MIT License

JavaScript 100.00%

visualization d3 monte montejs

monte's Introduction

Monte

A visualization framework for D3.js and SVG. Ships with prebuilt charts and components.

Preview Notice

This code is currently in active development, but the code base is stabilizing. The API is still subject to change before a formal release occurs.

Chart Types

Bar

Standard with vertical and horizontal. Has support for positive and negative values.
Grouped & Stacked with vertical and horizontal.
Span with vertical and horizontal. Provides base for Waterfall, Gantt, and related charts.

Line

Common line chart
Area chart
Sparkline

Scatterplot

Commmon scatterplot

Arc

Pie
Donut
Polar Area
Gauge

Radar

Common radar chart

Icon Array

Icons from D3 Symbols
SVG use path from defs
SVG use external file.

Custom

Use the base classes Chart, AxesChart, and PolarChart to build custom charts that leverage the options, lifecycle events, and extensions built into Monte. Or extend

Extensions

Extensions extend the behavior of a chart. Extensions are driven by chart lifecycle events and stay up-to-date as the chart updates primarily with the updated and boundsUpdated events though all events can be bound.

Extension Types

Arc: Draws an arbitrary Arc. Useful for arc fills on gauges, multilevel donuts, etc...
Axis Label Truncate: Limits size of axis tick labels.
Axis Label Wrap: Wraps labels at a given width.
Axis Tick Transform: Controls translation, rotation, and other transforms for axis tick lavels.
Bar Bg: Draws background rectangles on bar charts. Useful for comparing previous values or goals.
Crosshair: Connects a point to the edges of a chart with reference lines. Helps map points to specific axes values.
Grid: Draws a grid that lines up with Axes tick marks.
Horizontal Lines: Special case of Grid that draws only horizontal lines.
Label: Creates an arbitrary that can be data bound. Includes features such as "max width" that will automatically scale font sizes to fit.
Polar Grid: Creates a series of arcs (in the simplest case circle, but arbitrary angles can be used) at the specified distances.
Polar Line: Draws a line based on given inner and outer radii for a particular angle.
Polar Ticks: Like polar line, but draws a series of lines at a given interval.
Reference Line: Draws a line given two coordinates and places a corresponding label.
Selection Rect: Implements the D3 brushing technique for selecting areas of a chart. Can be restricted to X or Y axes; otherwise XY selection is allowed.
Vertical Lines: Special case of Grid that draws only vertical lines.

License

MIT. See LICENSE for details.

Author

monte's People

Contributors

Stargazers

Watchers

Forkers

markrocks

monte's Issues

Base Theme

Create a base theme that serves as a common base for other themes using SCSS.

The base should ensure:

that items that should not have fills (i.e. .monte-ext-polar-grid-arc) are transparent;
classes such as .no-domain and .no-ticks have transparent strokes;
label placement classes have the correct text-anchor rules;
pointer events are disabled for non directly interactive components (i.e. crosshairs, labels, etc...);
and other similar needs.

Prepare documentation

Create API documentation

Revise input data format

The majority of input data is in the form of an array, but there are cases (such as Gauges) where the input is an object. Using objects has the advantage of allowing metadata and additional configuration information. This allows for greater flexibility in the future without having to rework the scheme.

In most charts most datums can contain a css field, but that isn't possible for the base data. Other information such as "label", "source", "collection date", etc... could also be useful in the data object.

The data object should be capable of being serialized as a JSON object to avoid having code perform transformations. The only required actions by a user should be using *Prop options to map the fields for chart consumption.

Tasks

Update all charts to accept an object as the data. For data that is currently an array nest the current data under a consistent (and customizable via a *Prop option) field, for example "items". Note: "values" is the default prop in most cases for objects with nested items (line charts, grouped bar charts, ...) so use of valuesProp would create conflicts and should not be used.
Add a data accessor to allow deep (i.e. use Lodash's get() like option() uses) so that users can access their own data elements for easy use in lifecycle event callbacks.