A friendly reusable charts DSL for D3

We've completely moved our client-side dependencies from Bower to npm and use Browserify for dependency management. Browserify allows you to include npm modules on the client. It's great.

There are ways to include Bower modules within Browserify. Debowerify works sometimes but can cause conflicts depending on what other transforms you have.

For reference for others coming here, this is a way to get d4 workings within Browserify:

package.json:

  "browser": {
    "bootstrap": "./src/javascript/vendor/bootstrap.js",
    "d4": "./src/javascript/vendor/d4.js",
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "coffeeify",
    ]
  },
  "browserify-shim": {
    "bootstrap": {
      "exports": "bootstrap",
      "depends": [
        "jquery:$"
      ]
    },
    "d4": {
      "exports": "d4",
      "depends": [
        "d3:d3"
      ]
    },

Then you can require it in your modules:

d4 = require('d4')

But it's really nice to just be able to do this and be done:

npm install d4 --save

When I try to run the sample script on my machine. I get this error: d4.js:95 Uncaught Error: [d4] The scale type: "ordinal" is unrecognized. D4 only supports these scale types: time, time.utc When I log supportedScales in line 175 (function validateScale); d3.scale is undefined.

I load d3.js first, then d4.js.

Any idea why this happens?

This PR uses the handy d4.appendOnce convention for new series and axes. It then does a data bind and reselects the elements to apply attributes. This prevents features from being drawn twice. You can see, for example, in the dynamic data example, that the axes are re-appended every render. This PR fixes that, and should also make the transitions API easier to implement for column, shape, and line series.

Note I didn't rebuild the project, just trying to keep the diff clean.

Hello. I'm using d4 and my graph missing one bar:

Still it's present in data model:

Code:

for(var i = window.data.length - 1; i >= 0; i --){
    graphData.push({
        x: i + 1,
        y: window.data[i].count
    });
}

var columnChart = d4.charts.column().outerWidth(900);
d3.select('#graph').datum(graphData).call(columnChart);

Any help is appreciated ;)

I've been working on trying to figure out the best way to allow for a left axis and a right axis on different scales. (and thus series on different scales) Like this:

At the moment d4 provides no way to override the chart-wide scale on a feature by feature basis.

So far I've tried the following,

• add alt_scale to the yAxis feature's accessors with a default of null
• change the first line of yAxis.render from scope.scale(this.y) to scope.scale(scope.alt_scale() ? scope.alt_scale() : this.y);
  • in other words: "if there is a custom scale, use that, otherwise use the default"

but there is no way to access a custom scale (that I can see) from inside of a feature (such as lineSeries) since the accessor is called in the context of the chart not the context of the feature. (e.g. d4.functor(scope.accessors.y).bind(this))

If you want to keep this functionality, perhaps it's better adding alt_y on the chart object instead—a clone of chart.y. Then there can be alt_y accessors on each feature and logic on when to use it in the render based on a use_alt_y accessor boolean on the feature. A similar thing could also be added to the x methods.

Of course once there are two axes...why not three, four, etc? That type of functionality would require the chart.x and chart.y methods to return arrays of scales and features to have something like y_scale_index (defaulting to 0). It could also really mess up the API.

What are your thoughts on how to achieve this @heavysixer?

If i create a grid for bar chat, the grid line goes throw the group. But i want to set it between the lines. How could it be done in a more elegant way?

I think it will be useful to be able to build charts inside of existing elements. I added logic to scaffoldChart that does the following.

if the container is a svg, make a chart in that svg if the container is a g, make a chart in that g else the container is something else, append an svg and make a chart in that svg

As a result I renamed this.svg to this.container

Is there a way to assign the stacking order of elements?

So far i've had to mod the source code or call a send to back routine in an afterRender function

http://jsfiddle.net/q16eqjg4/

It looks like the y attributes are correct, but their height attribute is not because it is set by the chart y()instead of the custom scale set to it.

Possibly due to this line? https://github.com/heavysixer/d4/blob/master/src/features/grouped-column-series.js#L42

Hello. So the more flexible and canonical way to do grouped columns/rows in d3 is to have what I'm calling "nested axes", meaning an outer axis to place the groups and an inner one to place the series within each group. See this example.

I've refactored grouped-column-series to use this kind of implementation. This fixes https://github.com/heavysixer/d4/issues/25 and https://github.com/heavysixer/d4/issues/10, which as far as I can tell are the same issue. It also removes some hard-coding in the size and placement of the groups and such, because values are set according to the rangeBand of the outer axis. You can check against my grouped-axes branch on d4-www to see it in action. All of the grouped column/row examples work as far as I can tell.

My naming treats x or y as the outer axis, and groups as the inner.

I'm curious to see if you have any feedback on the stuff in scales.js and base.js, as some of the checks in there seem a bit dirty. Also, customizing the inner axis is not possible through the chart definition because it needs the rangeBand() of the outer axis to determine the range. So I've included roundBands as a customizable property of the groups scale.

I should note as well that this is a breaking change as the groups axis key is required. It may be possible to fall back to an index, but I'm not so sure how to do that at the moment. Thanks and sorry for the long winded explanation!

In case of this bug https://bugzilla.mozilla.org/show_bug.cgi?id=612118 i recommend to replace js var axisBB = axis.node().getBBox(); to

 try {
       axisBB = node.node.getBBox();
      } catch (err) {
          axisBB = {
          x: node.clientLeft,
          y: node.clientTop,
          width: node.clientWidth,
          height: node.clientHeight
        };
     }

what do you think about it?

There is a small typo in d4.js, d4.min.js, docs/d4-doc.md, src/charts/stacked-column.js, src/charts/stacked-row.js, src/charts/waterfall.js, test/lib/d4.js, test/tests/d4-bundle.js.

Should read continuous rather than continious.

if the order in punch-card data is not order by week,hour ,the graph is wrong. example data:

[[0,0,0],[0,1,0],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[1,0,0],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[2,0,0],[2,1,0],[2,2,0],[2,3,1],[2,4,0],[2,5,0],[2,6,0],[3,0,0],[3,1,0],[3,2,0],[3,3,3],[3,4,1],[3,5,0],[3,6,0],[4,0,0],[4,1,1],[4,2,0],[4,3,1],[4,4,0],[4,5,0],[4,6,0],[5,0,0],[5,1,0],[5,2,0],[5,3,0],[5,4,0],[5,5,0],[5,6,2],[6,0,0],[6,1,2],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[7,0,0],[7,1,2],[7,2,0],[7,3,0],[7,4,0],[7,5,0],[7,6,1],[8,0,0],[8,1,1],[8,2,0],[8,3,1],[8,4,0],[8,5,0],[8,6,0],[9,0,0],[9,1,6],[9,2,0],[9,3,1],[9,4,0],[9,5,1],[9,6,0],[10,0,0],[10,1,1],[10,2,0],[10,3,0],[10,4,0],[10,5,0],[10,6,0],[11,0,0],[11,1,0],[11,2,0],[11,3,0],[11,4,0],[11,5,4],[11,6,0],[12,0,0],[12,1,0],[12,2,0],[12,3,0],[12,4,0],[12,5,0],[12,6,0],[13,0,0],[13,1,0],[13,2,0],[13,3,0],[13,4,0],[13,5,0],[13,6,0],[14,0,0],[14,1,0],[14,2,0],[14,3,1],[14,4,0],[14,5,0],[14,6,0],[15,0,0],[15,1,0],[15,2,0],[15,3,0],[15,4,0],[15,5,0],[15,6,0],[16,0,0],[16,1,0],[16,2,0],[16,3,0],[16,4,0],[16,5,0],[16,6,0],[17,0,0],[17,1,0],[17,2,0],[17,3,0],[17,4,0],[17,5,1],[17,6,0],[18,0,0],[18,1,0],[18,2,0],[18,3,0],[18,4,0],[18,5,0],[18,6,0],[19,0,0],[19,1,1],[19,2,0],[19,3,0],[19,4,1],[19,5,0],[19,6,1],[20,0,0],[20,1,0],[20,2,1],[20,3,0],[20,4,0],[20,5,0],[20,6,1],[21,0,0],[21,1,0],[21,2,0],[21,3,0],[21,4,1],[21,5,0],[21,6,0],[22,0,0],[22,1,0],[22,2,0],[22,3,0],[22,4,0],[22,5,0],[22,6,0],[23,0,0],[23,1,0],[23,2,0],[23,3,0],[23,4,0],[23,5,0],[23,6,0]]

If I missing [week,hour,0] data,only provide non-zero data, such as

[[2,3,1],[3,3,3],[3,4,1],[4,1,1],[4,3,1],[5,6,2],[6,1,2],[7,1,2],[7,6,1],[8,1,1],[8,3,1],[9,1,6],[9,3,1],[9,5,1],[10,1,1],[11,5,4],[14,3,1],[17,5,1],[19,1,1],[19,4,1],[19,6,1],[20,2,1],[20,6,1],[21,4,1]]

the punchcard graph as following

Trying to use d4 with reactjs::

Getting: d4.js:1172 Uncaught ReferenceError: d4 is not defined

import React from 'react'; import ReactDOM from 'react-dom'; import ReactFauxDOM from 'react-faux-dom';

import d3 from 'd3'; import d4 from 'd4';

class App extends React.Component {

render () { const data = [ {x: "For Investment", y: 13.27}, {x: "For Distribution", y: 8.66}, {x: "Outstanding Principal", y: 5.22}, {x: "Accrued Interest", y: 5} ];

const myChart = d4.charts.column().width(500)

const d = d3.select(ReactFauxDOM.createElement('div')) .datum(data).call(myChart);

return d.node().toReact()

} } export default App;