Functions \"each\", \"extend\", and \"isFunction\" based on Underscore.js 1.5.2
http://underscorejs.org
(c) 2009-2014 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
Underscore may be freely distributed under the MIT license.
Functions \"each\", \"extend\", and \"isFunction\" based on Underscore.js 1.5.2
http://underscorejs.org
(c) 2009-2014 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
Underscore may be freely distributed under the MIT license.
global d3: false
global d4: false
global d3: false
global d4: false
In an effort to make the API more succient we store the last known proplerty
of an accessor with the same name but prepended with a $ character. This allows
the developer to do something like this:
chart.width(500)
chart.$width //500
In an effort to make the API more succient we store the last known proplerty
of an accessor with the same name but prepended with a $ character. This allows
the developer to do something like this:
chart.width(500)
chart.$width //500
FIXME: d4 wraps the inner property object opts in a series of class
functions. For example: chart.width(300) will set the internal
opts.width property to 300. Additionally chart.width() will return 300.
However, this behavior creates ambiguity in API because it is unclear to the
developer which accessors require functions and which can simply supply
values. Ideally the API should support something like this:
chart.width(300) or chart.width(function(){ return 300; })
FIXME: d4 wraps the inner property object opts in a series of class
functions. For example: chart.width(300) will set the internal
opts.width property to 300. Additionally chart.width() will return 300.
However, this behavior creates ambiguity in API because it is unclear to the
developer which accessors require functions and which can simply supply
values. Ideally the API should support something like this:
chart.width(300) or chart.width(function(){ return 300; })
In order to have a uniform API, objects with accessors, need to have wrapper
functions created for them so that users may access them in the declarative
nature we promote. This function will take an object, which contains an
accessors key and create the wrapper function for each accessor item.
This function is used internally by the feature mixin and axes objects.
In order to have a uniform API, objects with accessors, need to have wrapper
functions created for them so that users may access them in the declarative
nature we promote. This function will take an object, which contains an
accessors key and create the wrapper function for each accessor item.
This function is used internally by the feature mixin and axes objects.
Unlike the other axis accessors the scale() is special because each d3 scale
will have its own collection of functions, which may differ from one another
Therefore, when setting the scale to something say from linear to ordinal
we need to actually tell d4 to recreate the scale again otherwise the user
may try to use scale specific methods that no longer apply, and will create
an error down the road.
Special Note: Because builders during the link function may define defaults
for a given axis, it will also need to know if the property in question was
set by the developer through the API. It is not enough to just check if the
property has a value because some d3 properties will have default values.
Therefore d4 applies a special $dirty flag to the function itself if the
developer has changed its values.
var chart = d4.charts.column();\n var chartData = [{x:1,y:2}];\n chart.builder(function() {\n return {\n link: function(chart, data) {\n console.log(chart.x.domain.$dirty) // false;\n }\n }\n });\nUnlike the other axis accessors the scale() is special because each d3 scale
will have its own collection of functions, which may differ from one another
Therefore, when setting the scale to something say from linear to ordinal
we need to actually tell d4 to recreate the scale again otherwise the user
may try to use scale specific methods that no longer apply, and will create
an error down the road.
Special Note: Because builders during the link function may define defaults
for a given axis, it will also need to know if the property in question was
set by the developer through the API. It is not enough to just check if the
property has a value because some d3 properties will have default values.
Therefore d4 applies a special $dirty flag to the function itself if the
developer has changed its values.
var chart = d4.charts.column();\n var chartData = [{x:1,y:2}];\n chart.builder(function() {\n return {\n link: function(chart, data) {\n console.log(chart.x.domain.$dirty) // false;\n }\n }\n });\nd3 allows events to be bound to selections using the #on() function. We
want to allow the developer to bind to these events transparently. However,
we are not actually dealing with the d3 selection itself and so we need to
create this proxy which passes any custom events on to the correct selection.
For more information see the #selection.on documentation for d3:
https://github.com/mbostock/d3/wiki/Selections#wiki-animation--interaction
d3 allows events to be bound to selections using the #on() function. We
want to allow the developer to bind to these events transparently. However,
we are not actually dealing with the d3 selection itself and so we need to
create this proxy which passes any custom events on to the correct selection.
For more information see the #selection.on documentation for d3:
https://github.com/mbostock/d3/wiki/Selections#wiki-animation--interaction
Normally d4 series elements inside the data array to be in a specific
format, which is designed to support charts which require multiple data
series. However, some charts can easily be used to display only a single data
series in which case the default structure is overly verbose. In these cases
d4 accepts the simplified objects in the array payload and silently
parses them using the d4.nestedGroup parser. It will configure the parser's
dimensions based on the configuration applied to the chart object itself.
Normally d4 series elements inside the data array to be in a specific
format, which is designed to support charts which require multiple data
series. However, some charts can easily be used to display only a single data
series in which case the default structure is overly verbose. In these cases
d4 accepts the simplified objects in the array payload and silently
parses them using the d4.nestedGroup parser. It will configure the parser's
dimensions based on the configuration applied to the chart object itself.
This function allows you to register a reusable chart with d4.
", "summary": "This function allows you to register a reusable chart with d4.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.chart = function(name, funct) {\n d4.charts[name] = funct;\n return d4.charts[name];\n };", "ctx": { "type": "method", "receiver": "d4", "name": "chart", "string": "d4.chart()" }, "fileName": "../src/base.js" }, { "tags": [ { "type": "param", "types": [ "String" ], "name": "name", "description": "- accessor name for chart feature." }, { "type": "param", "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart feature." }, { "type": "returns", "string": "a reference to the chart feature" } ], "description": { "full": "This function allows you to register a reusable chart feature with d4.
", "summary": "This function allows you to register a reusable chart feature with d4.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.feature = function(name, funct) {\n d4.features[name] = funct;\n return d4.features[name];\n };", "ctx": { "type": "method", "receiver": "d4", "name": "feature", "string": "d4.feature()" }, "fileName": "../src/base.js" }, { "tags": [ { "type": "param", "types": [ "String" ], "name": "name", "description": "- accessor name for chart builder." }, { "type": "param", "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart builder." }, { "type": "returns", "string": "a reference to the chart builder" } ], "description": { "full": "This function allows you to register a reusable chart builder with d4.
", "summary": "This function allows you to register a reusable chart builder with d4.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.builder = function(name, funct) {\n d4.builders[name] = funct;\n return d4.builders[name];\n };", "ctx": { "type": "method", "receiver": "d4", "name": "builder", "string": "d4.builder()" }, "fileName": "../src/base.js" }, { "tags": [ { "type": "param", "types": [ "String" ], "name": "name", "description": "- accessor name for data parser." }, { "type": "param", "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the data parser." }, { "type": "returns", "string": "a reference to the data parser" } ], "description": { "full": "This function allows you to register a reusable data parser with d4.
", "summary": "This function allows you to register a reusable data parser with d4.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.parser = function(name, funct) {\n d4.parsers[name] = funct;\n return d4.parsers[name];\n };", "ctx": { "type": "method", "receiver": "d4", "name": "parser", "string": "d4.parser()" }, "fileName": "../src/base.js" }, { "tags": [ { "type": "param", "types": [ "Object" ], "name": "options", "description": "- object which contains an optional config and /or" }, { "type": "builder", "string": "property" }, { "type": "returns", "string": "a reference to the chart object" } ], "description": { "full": "This function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nThis function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies an existing feature of a chart to be removed (mixed out).
\n\n // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies an existing feature of a chart to be removed (mixed out).
", "body": " // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nThis function returns the internal axes object as a parameter to the
supplied function.
This function returns the internal axes object as a parameter to the
supplied function.
The heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nThe heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nBased on D3's own functor function.
\n\n\n", "summary": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
Based on D3's own functor function.
\n\n\n", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.functor = function(funct) {\n return d4.isFunction(funct) ? funct : function() {\n return funct;\n };\n };\n\n d4.isArray = Array.isArray || function(val) {\n return Object.prototype.toString.call(val) === '[object Array]';\n };\n\n d4.isFunction = function(obj) {\n return !!(obj && obj.constructor && obj.call && obj.apply);\n };\n\n d4.isNotFunction = function(obj) {\n return !d4.isFunction(obj);\n };\n\n d4.merge = function(options, overrides) {\n return d4.extend(d4.extend({}, options), overrides);\n };\n\n d4.extend = function(obj) {\n each(Array.prototype.slice.call(arguments, 1), function(source) {\n if (source) {\n for (var prop in source) {\n if (source[prop] && source[prop].constructor &&\n source[prop].constructor === Object) {\n obj[prop] = obj[prop] || {};\n d4.extend(obj[prop], source[prop]);\n } else {\n obj[prop] = source[prop];\n }\n }\n }\n });\n return obj;\n };\n\n}).call(this);", "ctx": { "type": "method", "receiver": "d4", "name": "functor", "string": "d4.functor()" }, "fileName": "../src/base.js" }, { "tags": [], "description": { "full": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
global d3: false
global d4: false
global d3: false
global d4: false
Creates a linear scale for a dimension of a given chart.
", "summary": "Creates a linear scale for a dimension of a given chart.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.builder('linearScaleForNestedData', function(chart, data, dimension) {\n var key = chart[dimension].$key;\n var ext = d3.extent(d3.merge(data.map(function(obj) {\n return d3.extent(obj.values, function(d) {\n return d[key] + (d.y0 || 0);\n });\n })));\n var axis = chart[dimension];\n if(!axis.domain.$dirty) {\n axis.domain([Math.min(axis.$min || 0, ext[0]), axis.$max || ext[1]]);\n }\n if(!axis.range.$dirty) {\n axis.range(rangeFor(chart, dimension));\n }\n if(!axis.clamp.$dirty) {\n axis.clamp(true);\n }\n return chart[dimension].nice();\n });", "fileName": "../src/builders/scales.js" }, { "tags": [ { "type": "param", "types": [ "Object" ], "name": "d4", "description": "chart object" }, { "type": "param", "types": [ "Array" ], "name": "data", "description": "array" }, { "type": "param", "types": [ "string" ], "name": "string", "description": "represnting a dimension e.g. `x`,`y`." }, { "type": "returns", "string": "{Object} Chart scale object" } ], "description": { "full": "Creates an ordinal scale for a dimension of a given chart.
", "summary": "Creates an ordinal scale for a dimension of a given chart.
", "body": "" }, "isPrivate": false, "ignore": false, "code": "d4.builder('ordinalScaleForNestedData', function(chart, data, dimension) {\n var parsedData = extractValues(data, chart[dimension].$key);\n var bands = chart[dimension + 'RoundBands'] = chart[dimension + 'RoundBands'] || 0.3;\n var axis = chart[dimension];\n if(!axis.domain.$dirty) {\n axis.domain(parsedData);\n }\n if(!axis.rangeRoundBands.$dirty) {\n axis.rangeRoundBands(rangeFor(chart, dimension), bands);\n }\n return axis;\n });\n}).call(this);", "fileName": "../src/builders/scales.js" }, { "tags": [], "description": { "full": "global d3: false
global d4: false
global d3: false
global d4: false
The column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nThe column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nglobal d3: false
global d4: false
global d3: false
global d4: false
The grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nglobal d3: false
global d4: false
global d3: false
global d4: false
The line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nglobal d3: false
global d4: false
global d3: false
global d4: false
The row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nThe row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nglobal d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
Column connectors helpful when displaying a stacked column chart.
A connector will not connect positve and negative columns. This is because
in a stacked column a negative column may move many series below its previous
location. This creates a messy collection of crisscrossing lines.
Column connectors helpful when displaying a stacked column chart.
A connector will not connect positve and negative columns. This is because
in a stacked column a negative column may move many series below its previous
location. This creates a messy collection of crisscrossing lines.
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
Waterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
Waterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
global d4: false
global d3: false
", "summary": "global d3: false
", "body": "" }, "ignore": true, "fileName": "../src/parsers/nested-group.js" }, { "tags": [], "description": { "full": "global d4: false
", "summary": "global d4: false
", "body": "" }, "ignore": true, "code": "'use strict';", "fileName": "../src/parsers/nested-group.js" }, { "tags": [], "description": { "full": "The nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nThe nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nglobal d3: false
", "summary": "global d3: false
", "body": "" }, "ignore": true, "fileName": "../src/parsers/nested-stack.js" }, { "tags": [], "description": { "full": "global d4: false
", "summary": "global d4: false
", "body": "" }, "ignore": true, "code": "'use strict';", "fileName": "../src/parsers/nested-stack.js" }, { "tags": [], "description": { "full": "The nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nThe nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nglobal d3: false
", "summary": "global d3: false
", "body": "" }, "ignore": true, "fileName": "../src/parsers/waterfall.js" }, { "tags": [], "description": { "full": "global d4: false
", "summary": "global d4: false
", "body": "" }, "ignore": true, "code": "'use strict';", "fileName": "../src/parsers/waterfall.js" }, { "tags": [], "description": { "full": "The waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values
The waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values
This function allows you to register a reusable chart with d4.
", "summary": "This function allows you to register a reusable chart with d4.
", "body": "" }, "returns": "a reference to the chart function" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for chart feature." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart feature." } ], "name": "feature", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable chart feature with d4.
", "summary": "This function allows you to register a reusable chart feature with d4.
", "body": "" }, "returns": "a reference to the chart feature" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for chart builder." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart builder." } ], "name": "builder", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable chart builder with d4.
", "summary": "This function allows you to register a reusable chart builder with d4.
", "body": "" }, "returns": "a reference to the chart builder" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for data parser." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the data parser." } ], "name": "parser", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable data parser with d4.
", "summary": "This function allows you to register a reusable data parser with d4.
", "body": "" }, "returns": "a reference to the data parser" }, { "params": [ { "types": [ "Object" ], "name": "options", "description": "- object which contains an optional config and /or" } ], "name": "baseChart", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nThis function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies an existing feature of a chart to be removed (mixed out).
\n\n // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies an existing feature of a chart to be removed (mixed out).
", "body": " // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nThis function returns the internal axes object as a parameter to the
supplied function.
This function returns the internal axes object as a parameter to the
supplied function.
The heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nThe heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nBased on D3's own functor function.
\n\n\n", "summary": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
Based on D3's own functor function.
\n\n\n", "body": "" } }, {}, { "params": [ { "types": [ "Object" ], "name": "d4", "description": "chart object" }, { "types": [ "Array" ], "name": "data", "description": "array" }, { "types": [ "string" ], "name": "string", "description": "represnting a dimension e.g. `x`,`y`." } ], "name": "", "type": "", "fileName": "../src/builders/scales.js", "description": { "full": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
Creates a linear scale for a dimension of a given chart.
", "summary": "Creates a linear scale for a dimension of a given chart.
", "body": "" }, "returns": "{Object} Chart scale object" }, { "params": [ { "types": [ "Object" ], "name": "d4", "description": "chart object" }, { "types": [ "Array" ], "name": "data", "description": "array" }, { "types": [ "string" ], "name": "string", "description": "represnting a dimension e.g. `x`,`y`." } ], "name": "", "type": "", "fileName": "../src/builders/scales.js", "description": { "full": "Creates an ordinal scale for a dimension of a given chart.
", "summary": "Creates an ordinal scale for a dimension of a given chart.
", "body": "" }, "returns": "{Object} Chart scale object" }, {}, { "params": [], "name": "", "type": "", "fileName": "../src/charts/column.js", "description": { "full": "The column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nThe column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nThe grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nThe row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nWaterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
Waterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
The nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nThe nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nThe nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nThe nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nThe waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values
The waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values
This function allows you to register a reusable chart with d4.
", "summary": "This function allows you to register a reusable chart with d4.
", "body": "" }, "returns": "a reference to the chart function" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for chart feature." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart feature." } ], "name": "feature", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable chart feature with d4.
", "summary": "This function allows you to register a reusable chart feature with d4.
", "body": "" }, "returns": "a reference to the chart feature" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for chart builder." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the chart builder." } ], "name": "builder", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable chart builder with d4.
", "summary": "This function allows you to register a reusable chart builder with d4.
", "body": "" }, "returns": "a reference to the chart builder" }, { "params": [ { "types": [ "String" ], "name": "name", "description": "- accessor name for data parser." }, { "types": [ "Function" ], "name": "funct", "description": "- function which will instantiate the data parser." } ], "name": "parser", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function allows you to register a reusable data parser with d4.
", "summary": "This function allows you to register a reusable data parser with d4.
", "body": "" }, "returns": "a reference to the data parser" }, { "params": [ { "types": [ "Object" ], "name": "options", "description": "- object which contains an optional config and /or" } ], "name": "baseChart", "type": "method", "fileName": "../src/base.js", "description": { "full": "This function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nThis function creates a d4 chart object. It is only used when creating a
new chart factory.
var chart = d4.baseChart({\n builder: myBuilder,\n config: {\n axes: {\n x: {\n scale: 'linear'\n },\n y: {\n scale: 'ordinal'\n }\n }\n }\n });\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nSpecifies an object, which d4 uses to initialize the chart with. By default
d4 expects charts to return a builder object, which will be used to
configure defaults for the chart. Typically this means determining the
the default value for the various axes. This accessor allows you to
override the existing builder provided by a chart and use your own.
myChart.builder = function(chart, data){\n return {\n link: function(chart, data) {\n configureScales.bind(this)(chart, data);\n }\n };\n};\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nTo see what features are currently mixed into your chart you can use
this method. This function cannot be chained.
// Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies a feature to be mixed into a given chart.
The feature is an object where the key represents the feature name, and a
value which is a function that when invoked returns a d4 feature object.
// Mix in a feature at a specific depth\n chart.mixin({ 'grid': d4.features.grid }, 0)\n\n chart.mixin({ 'zeroLine': d4.features.referenceLine })\nSpecifies an existing feature of a chart to be removed (mixed out).
\n\n // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nSpecifies an existing feature of a chart to be removed (mixed out).
", "body": " // Mixout the yAxis which is provided as a default\n var chart = d4.charts.column()\n .mixout('yAxis');\n\n // Now test that the feature has been removed.\n console.log(chart.features());\n => [\"bars\", \"barLabels\", \"xAxis\"]\nThis function returns the internal axes object as a parameter to the
supplied function.
This function returns the internal axes object as a parameter to the
supplied function.
The heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nThe heart of the d4 API is the using function, which allows you to
contextually modify attributes of the chart or one of its features.
chart.mixin({ 'zeroLine': d4.features.referenceLine })\n .using('zeroLine', function(zero) {\n zero\n .x1(function() {\n return this.x(0);\n })\n });\nBased on D3's own functor function.
\n\n\n", "summary": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
Based on D3's own functor function.
\n\n\n", "body": "" } } ] }, { "tag": "../src/builders/scales.js", "moxComments": [ { "params": [ { "types": [ "Object" ], "name": "d4", "description": "chart object" }, { "types": [ "Array" ], "name": "data", "description": "array" }, { "types": [ "string" ], "name": "string", "description": "represnting a dimension e.g. `x`,`y`." } ], "name": "", "type": "", "fileName": "../src/builders/scales.js", "description": { "full": "If the specified value is a function, returns the specified value. Otherwise,
\n
returns a function that returns the specified value. This method is used
internally as a lazy way of upcasting constant values to functions, in
cases where a property may be specified either as a function or a constant.
For example, many D3 layouts allow properties to be specified this way,
and it simplifies the implementation if we automatically convert constant
values to functions.
Creates a linear scale for a dimension of a given chart.
", "summary": "Creates a linear scale for a dimension of a given chart.
", "body": "" }, "returns": "{Object} Chart scale object" }, { "params": [ { "types": [ "Object" ], "name": "d4", "description": "chart object" }, { "types": [ "Array" ], "name": "data", "description": "array" }, { "types": [ "string" ], "name": "string", "description": "represnting a dimension e.g. `x`,`y`." } ], "name": "", "type": "", "fileName": "../src/builders/scales.js", "description": { "full": "Creates an ordinal scale for a dimension of a given chart.
", "summary": "Creates an ordinal scale for a dimension of a given chart.
", "body": "" }, "returns": "{Object} Chart scale object" } ] }, { "tag": "../src/charts/column.js", "moxComments": [ { "params": [], "name": "", "type": "", "fileName": "../src/charts/column.js", "description": { "full": "The column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nThe column chart has two axes (x and y). By default the column chart expects
linear values for the y and ordinal values on the x. The basic column chart
has four default features:
bars - series bars
barLabels - data labels above the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { x: '2010', y:-10 },\n { x: '2011', y:20 },\n { x: '2012', y:30 },\n { x: '2013', y:40 },\n { x: '2014', y:50 },\n ];\nvar chart = d4.charts.column();\nd3.select('#example')\n.datum(data)\n.call(chart);\nBy default d4 expects a series object, which uses the following format: { x : '2010', y : 10 }.
The default format may not be desired and so we'll override it:
var data = [\n ['2010', -10],\n ['2011', 20],\n ['2012', 30],\n ['2013', 40],\n ['2014', 50]\n];\nvar chart = d4.charts.column()\n.x(function(x) {\n x.key(0)\n})\n.y(function(y){\n y.key(1);\n});\n\nd3.select('#example')\n.datum(data)\n.call(chart);\nThe grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe grouped column chart is used to compare a series of data elements grouped
along the xAxis. This chart is often useful in conjunction with a stacked column
chart because they can use the same data series, and where the stacked column highlights
the sum of the data series across an axis the grouped column can be used to show the
relative distribution.
bars - series bars
barLabels - data labels above the bars
groupsOf - an integer representing the number of columns in each group
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\n\nvar parsedData = d4.parsers.nestedGroup()\n .x('year')\n .y('unitsSold')\n .value('unitsSold')(data);\n\nvar chart = d4.charts.groupedColumn()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold')\n.groupsOf(parsedData.data[0].values.length);\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe line series chart is used to compare a series of data elements grouped
along the xAxis.
lineSeries - series lines
lineSeriesLabels - data labels beside the lines
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { year: '2010', unitsSold:-100, salesman : 'Bob' },\n { year: '2011', unitsSold:200, salesman : 'Bob' },\n { year: '2012', unitsSold:300, salesman : 'Bob' },\n { year: '2013', unitsSold:400, salesman : 'Bob' },\n { year: '2014', unitsSold:500, salesman : 'Bob' },\n { year: '2010', unitsSold:100, salesman : 'Gina' },\n { year: '2011', unitsSold:100, salesman : 'Gina' },\n { year: '2012', unitsSold:-100, salesman : 'Gina' },\n { year: '2013', unitsSold:500, salesman : 'Gina' },\n { year: '2014', unitsSold:600, salesman : 'Gina' },\n { year: '2010', unitsSold:400, salesman : 'Average' },\n { year: '2011', unitsSold:0, salesman : 'Average' },\n { year: '2012', unitsSold:400, salesman : 'Average' },\n { year: '2013', unitsSold:400, salesman : 'Average' },\n { year: '2014', unitsSold:400, salesman : 'Average' }\n];\nvar parsedData = d4.parsers.nestedGroup()\n .x(function(){\n return 'year';\n })\n .nestKey(function(){\n return 'salesman';\n })\n .y(function(){\n return 'unitsSold';\n })\n .value(function(){\n return 'unitsSold';\n })(data);\n\nvar chart = d4.charts.line()\n.width($('#example').width())\n.x.$key('year')\n.y.$key('unitsSold');\n\nd3.select('#example')\n.datum(parsedData.data)\n.call(chart);\nThe row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nThe row chart has two axes (x and y). By default the column chart expects
linear scale values for the x and ordinal scale values on the y. The basic column chart
has four default features:
bars - series bars
rowLabels - data labels to the right of the bars
xAxis - the axis for the x dimension
yAxis - the axis for the y dimension
var data = [\n { y: '2010', x:-10 },\n { y: '2011', x:20 },\n { y: '2012', x:30 },\n { y: '2013', x:40 },\n { y: '2014', x:50 },\n ];\n var chart = d4.charts.row();\n d3.select('#example')\n .datum(data)\n .call(chart);\nWaterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
Waterfall connectors are orthogonal series connectors which visually join
column series together by spanning the top or bottom of adjacent columns.
When using this feature in charts other than waterfall, be aware that the
mixin expects an accessor property for orientation, which it uses to render
the direction of the lines.
x - Used in placement of the connector lines.y - Used in placement of the connector lines.span - calculates the length of the connector lineclasses - applies the class to the connector lines.
The nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nThe nested group parser is useful for grouped column charts where multiple
data items need to appear relative to the axis value, for example grouped
column charts or multi-series line charts.
_____________________\n| _ |\n| _ _ | |_ |\n| | | | | | | |\n----------------------\nThis module makes use of the d3's \"nest\" data structure layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
\n\nJust like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the waterfall data. Here is a simple
example. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }
var parser = d4.parsers.nestedGroup()\n .x('category')\n .y('value')\n .value('value');\n\nvar groupedColumnData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx - A function which returns a key to access the x values in the data arrayy - A function which returns a key to access the y values in the data arrayvalue - A function which returns a key to access the values in the data array.data - An array of objects with their dimensions specified like this:
var data = [\n{\"year\" : \"2010\", \"category\" : \"Category One\", \"value\" : 23 },\n{\"year\" : \"2010\", \"category\" : \"Category Two\", \"value\" : 55 },\n{\"year\" : \"2010\", \"category\" : \"Category Three\", \"value\" : -10 },\n{\"year\" : \"2010\", \"category\" : \"Category Four\", \"value\" : 5 }]\nThe nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nThe nested stack parser is useful for charts which take a data series
and wants to sort them across a dimension and then display the results.
The most common usecase would be a stacked column chart like this:
_____________________\n| _ |\n| | | _ |\n| |-| | | _ |\n| |-| |-| |-| |\n| | | |-| |-| |\n----------------------\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout
\n\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest
https://github.com/mbostock/d3/wiki/Stack-Layout
Just like D3, this parser uses a chaining declaritiave style to build up
the necessary prerequistes to create the stacked data. Here is a simple
example:
var parser = d4.parsers.nestedStack()\n .x(function() {\n return 'title';\n })\n .y(function(){\n return 'group';\n })\n .value(function() {\n return 'values';\n });\n\n var stackedData = parser(data);\nKeep reading for more information on these various accessor functions.
\n\nx : - function which returns a key to access the x values in the data arrayy : - function which returns a key to access the y values in the data arrayvalue : - function which returns a key to access the values in the data array.data : array - An array of objects with their dimensions specified like this:
var data = [{ \"title\": \"3 Years\", \"group\" : \"one\", \"value\": 30 },\n { \"title\": \"3 Years\", \"group\" : \"two\", \"value\": 20 },\n { \"title\": \"3 Years\", \"group\" : \"three\", \"value\": 10 },\n { \"title\": \"5 Years\", \"group\" : \"one\", \"value\": 3 },\n { \"title\": \"5 Years\", \"group\" : \"two\", \"value\": 2 },\n { \"title\": \"5 Years\", \"group\" : \"three\", \"value\": 1 }]\nGiven the example data and dimension variables above you can use this module
in the following way:
var parser = d4.parsers.nestedStack()\n.x(function() {\n return 'title';\n})\n.y(function(){\n return 'group';\n})\n.value(function() {\n return 'value';\n})\n.call(data);\nThe parser variable will now be an object containing the following structure:
{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\nThe waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values
The waterfall parser is useful for waterfall charts where data items need to account
for the position of earlier values:
_____________________\n| _ _______ |\n| |_|___ | | | | |\n| |_|__|_| | | |\n| |_| |\n----------------------\n\nThis module makes use of the d3's \"nest\" data structure, and \"stack\" layout\nhttps://github.com/mbostock/d3/wiki/Arrays#-nest\nhttps://github.com/mbostock/d3/wiki/Stack-Layout\n\n\nApproach:\nJust like D3, this parser uses a chaining declaritiave style to build up\nthe necessary prerequistes to create the waterfall data. Here is a simple\nexample. Given a data item structure like this: {\"category\" : \"Category One\", \"value\" : 23 }\n\nvar parser = d4.parsers.waterfall()\n .x(function() {\n return 'category';\n })\n .y(function(){\n return 'value';\n })\n .value(function() {\n return 'value';\n });\n\nvar waterfallData = parser(data);\n\nKeep reading for more information on these various accessor functions.\n\nBenefits:\nSupports horizontal or vertical waterfalls
Supports totaling series using a special \"e\" value in a data item.
Limitations:\nDoes not support stacked waterfalls.
\n\nAccessor Methods:\nx : - function which returns a key to access the x values in the data array
y : - function which returns a key to access the y values in the data array
value : - function which returns a key to access the values in the data array.
data : array - An array of objects with their dimensions specified
like this:
var data = [\n {\"category\" : \"Category One\", \"value\" : 23 },\n {\"category\" : \"Category Two\", \"value\" : 55 },\n {\"category\" : \"Category Three\", \"value\" : -10 },\n {\"category\" : \"Category Four\", \"value\" : 5 },\n {\"category\" : \"Category Five\", \"value\" : \"e\" }]\n\nSPECIAL NOTE:\nWaterfalls charts typically have the ability to display subtotals at any point.\nIn order to use this feature simply set the value of your subtotal column to \"e.\"\n\nExample Usage:\nGiven the example data and dimension variables above you can use this module\nin the following way:\n\nvar parser = d4.parsers.nestedStack()\n.dimensions(dimensions)\n.call(data);\n\nThe `parser` variable will now be an object containing the following structure:\n{\n data: Array\n value: {\n key: string,\n values: Array\n },\n x: {\n key: string,\n values: Array\n },\n y: {\n key: string,\n values: Array\n }\n}\n\nTaking these attributes one-by-one:\ndata - is an array of items stacked by D3
value - an object with a key representing the value accessor and an array of values
x - an object with a key representing the x accessor and an array of values
y - an object with a key representing the y accessor and an array of values