rope-chart
v0.1.0
Published
provides a simplified visualization of where a particular value lies within a group.
Downloads
2
Readme
ropeChart
The rope chart provides a simplified visualization of where a particular value lies within a group.
Getting Started
For now, you must use a script tag to include ropeChart. D3 must be available in the global namespace as well. Download ropeChart.js, put something like the following in your and you should be good to go.
<script src="d3.js" charset="utf-8"></script>
<script src="ropeChart.js" charset="utf-8"></script>Example
HTML would look something like this
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="d3.js" charset="utf-8"></script>
<script src="ropeChart.js" charset="utf-8"></script>
</head>
<body>
<div id="myRopeChart"></div>
</body>
<script src="index.js"></script>
</html>And the index.js here would contain something like this
var data = {
min: {value: 5, label: 'Country A'},
max: {value: 95, label: 'Country B'},
threshold: {value: 60, label: 'Region Average'},
focus: {value: 45, label: 'Mongolia'}
}
var myRopeChart = ropeChart('div#myRopeChart');
.data(data)
.width(250)
.height(250)
.ropeWidth(10)
.knotRadius(10)
.render();API Reference
ropeChart
Kind: global class
- ropeChart
- new ropeChart(selection)
- .render([data]) ⇒ ropeChart
- .data([data]) ⇒ Object | ropeChart
- .width() ⇒ Object | ropeChart
- .width([width]) ⇒ Integer | ropeChart
- .height([height]) ⇒ Integer | ropeChart
- .knotRadius([knotRadius]) ⇒ Integer | ropeChart
- .ropeWidth([ropeWidth]) ⇒ Integer | ropeChart
- .threshLineLength([threshLineLength]) ⇒ Integer | ropeChart
- .goodColor([goodColor]) ⇒ String | ropeChart
- .badColor([goodColor]) ⇒ String | ropeChart
- .flipDirection([flipDirection]) ⇒ Boolean | ropeChart
- .showAverage([showAverage]) ⇒ Boolean | ropeChart
- .averageLabel([averageLabel]) ⇒ String | ropeChart
- .labelMargin([labelMargin]) ⇒ Integer | ropeChart
- .valueAccessor([valueAccessorFunction]) ⇒ function | ropeChart
- .nameAccessor([nameAccessorFunction]) ⇒ function | ropeChart
new ropeChart(selection)
Rope chart implementation.
Returns: ropeChart - s
| Param | Type | Description | | --- | --- | --- | | selection | String | any valid d3 selector. This selector is used to place the chart. |
ropeChart.render([data]) ⇒ ropeChart
Render the ropeChart instance. Simply renders chart when called with no parameter. Updates data, then renders, if called with parameter
Kind: instance method of ropeChart
| Param | Type | | --- | --- | | [data] | Object |
ropeChart.data([data]) ⇒ Object | ropeChart
Get/set the data for the ropeChart instance
Kind: instance method of ropeChart
Returns: Object - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | | --- | --- | | [data] | Object |
ropeChart.width() ⇒ Object | ropeChart
Get/set the name/key used to access the "focus" item for the chart. The "focus" is the member of the data set that you want to compare to the rest of the group.
Kind: instance method of ropeChart
Returns: Object - [Acts as getter if called with no parameter. Returns a record from your data set.]ropeChart - [Acts as setter if called with parameter]
| Param | Type | | --- | --- | | [recordName - should be the value of the name property for the record you want as your focus.] | String |
ropeChart.width([width]) ⇒ Integer | ropeChart
Get/set the width of the chart SVG
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [width] | Integer | 500 |
ropeChart.height([height]) ⇒ Integer | ropeChart
Get/set the height of the chart SVG
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [height] | Integer | 500 |
ropeChart.knotRadius([knotRadius]) ⇒ Integer | ropeChart
Get/set the radius of "knot" circles at max, min, and focus value positions.
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [knotRadius] | Integer | 20 |
ropeChart.ropeWidth([ropeWidth]) ⇒ Integer | ropeChart
Get/set the width of the "rope" rectangle.
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [ropeWidth] | Integer | 20 |
ropeChart.threshLineLength([threshLineLength]) ⇒ Integer | ropeChart
Get/set the length of the horizontal "threshold" line.
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [threshLineLength] | Integer | 20 |
ropeChart.goodColor([goodColor]) ⇒ String | ropeChart
Get/set the color used on the "good" side of the threshold.
Kind: instance method of ropeChart
Returns: String - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [goodColor] | String | green |
ropeChart.badColor([goodColor]) ⇒ String | ropeChart
Get/set the color used on the "bad" side of the threshold.
Kind: instance method of ropeChart
Returns: String - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [goodColor] | String | red |
ropeChart.flipDirection([flipDirection]) ⇒ Boolean | ropeChart
Get/set boolean that "flips direction" of the "good"/"bad" sides of threshold. By default the top section is "good" (green). If flipDirection is true, then top section becomes "bad" (red).
Kind: instance method of ropeChart
Returns: Boolean - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [flipDirection] | Boolean | false |
ropeChart.showAverage([showAverage]) ⇒ Boolean | ropeChart
Get/set boolean that toggles display of a "knot" for the group average.
Kind: instance method of ropeChart
Returns: Boolean - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [showAverage] | Boolean | false |
ropeChart.averageLabel([averageLabel]) ⇒ String | ropeChart
Get/set label for average knot location.
Kind: instance method of ropeChart
Returns: String - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [averageLabel] | String | "Average" |
ropeChart.labelMargin([labelMargin]) ⇒ Integer | ropeChart
Get/set the margin between labels and "knot" circles.
Kind: instance method of ropeChart
Returns: Integer - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | Default | | --- | --- | --- | | [labelMargin] | Integer | 5 |
ropeChart.valueAccessor([valueAccessorFunction]) ⇒ function | ropeChart
Get/set function used to access "value" property from each data record. Defaults to:
function (d){ return d.value; }Kind: instance method of ropeChart
Returns: function - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | | --- | --- | | [valueAccessorFunction] | function |
ropeChart.nameAccessor([nameAccessorFunction]) ⇒ function | ropeChart
Get/set function used to access "name" property from each data record. Defaults to:
function (d){ return d.name; }Kind: instance method of ropeChart
Returns: function - [Acts as getter if called with no parameter]ropeChart - [Acts as setter if called with parameter]
| Param | Type | | --- | --- | | [nameAccessorFunction] | function |