Rope-chart NPM

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

@everything-registry/sub-chunk-2683

0.1.0

8 years ago