Have been experimenting with multiple approaches so far. At this stage trying to figure out what the final ES6 classes should look like and also how to get there without, potentially, introducing errors.

It would be nice to have a sunburst or a nested donut chart directly from dc.js. I call sunburst or nested donut chart a chart like Is it possible, already done by someone, I would be very interested to know.

This will allow users to set the text attached with a number-display. (TO DO) Pluralization of text, (https://github.com/blakeembrey/pluralize) can be helpful.

D3 is being broken up into smaller modules for v4 (e.g. d3-scale, d3-selection, etc) and there are some API changes.

Discuss version support & approach. Should dc.js support d3 v3 and v4 or only one of them? One option to support both is a jQuery-style approach where 2.x supports v3 and 3.x supports v4.

This is work in progress. Please check using http://localhost:8888/web/zoom/restrict-panning.html

I need suggestions at this stage:

• I am assuming that in a range/focus chart pair will have same domains. Are you aware of any situation where it will not be the case?
• In the D3v4, setting a zoom programmatically calls the event handler as well, to avoid infinite loop, there is check in the beginning of the event handler (picked from D3 examples). Same case is there for brushing as well.
• Now we get a peculiar situation when a range chart tell the focus chart to update which it turn tells the range chart. In previous version it was checking if the previous filter/focus values were same according intimate the other chart. In newer D3 API, the zoom and brush events return screen measurements (i.e. scale.range()) which needs to be converted to domain values. This very rarely (combined with the fact that computations are in floating point) gives slightly different values than the original - leading to infinite loop. I was thinking to introduce an optional 2nd parameter to few calls (for example: _chart.focus) to indicate that do not issue further intimations to other charts. Do you have any other thoughts?

The above gives slightly peculiar UI glitches because some updates get applied immediately while some are debounced.

Quite a lot of code has changed, I will refactor before making final commit :)

There has been a lot of interest in the dc.js community for an ES6 version, but it was not a priority to me as long as we had to transpile and run on IE. (*)

However, d3 6.0 will finally drop IE - see d3/d3-array#87. Glory day! We can use ES6 natively!

I'd be happy to work with someone or a team of people who want to port dc.js to Rollup, NO BABEL or transpilation, and ES6 modules. I think we should keep the code in one repo but have lots of modules in it. ES6 modules should allow anyone to mix and match their own dc.js charts or versions of dc.js charts with those in the official repo, and only take what they need.

I don't have the time to do all this work myself, but I have the time to do code review, make decisions and commit PRs for this project.

Challenges:

1. The dependency between modules is complicated. I think we will save ongoing effort by staying in one repo with one version number, but we still need to figure out the dependencies beyond the class hierarchy. I'll bet there are many places where the dependencies are not pure, yet we want tree-shaking to work, etc.
2. Currently dc.js does not use prototype inheritance, so the path to ES6 classes is not completely clear. I doubt it will lead to significant performance improvements, but it would be nice to use idiomatic ES6 classes. There may be things we are doing, like adding and changing methods on other classes, which will not work or will cause subtle bugs.
3. As much as possible, we should be able to keep code written for DCv3 working with v4, but where ES6 helps the dc.js API, we should use it. ES6 classes may break the interface a little. I don't know if we'll have trouble with the places where people replace methods like yAxisMin in order to get the right effect.

We can't fix everything at once - let's try to leave drastic interface changes for later, wherever possible.

I bet a lot of people out there have already gone through the ES5->ES6 transformation and know the best practices. Anyone have time to take this up? Anyone have experience with Rollup the way it is used to bundle D3?

Please leave a comment if you're interested in working on this: doing the translation, review PRs, help debug, or just offer advice.

I know some people worked with @mtrayham's fork #1175. I closed the PR because I didn't want to transpile & still don't want to. I also want to use rollup instead of webpack because it is simpler. Nonetheless it's the right direction - did anyone try to merge that fork with the D3v4/5 changes in 3.x?

I don't know how many d3 modules have dropped ES5 and moved to ES6. I know of d3-array and d3-force so far, but d3 6.0 has not been released yet. We have the opportunity to get ahead of the curve and release DCv4 soon after D3v6.

(*) I continue to be opposed to transpilation, since we frequently need to debug incompatibilities using the devtools of every browser. In my experience, only the Chrome debugger works reliably for debugging transpiled code. However, if someone else wants to maintain the toolchain for transpiling dc.js 4.0, and debug any issues that arise, I am cool with that!

A logo is not a necessary component but it definitely contributes to dc's perceived quality and adds some flair to it's identity. I looked around the issues etc. but couldn't find any logo yet. This is my recommendation. It is based on the "unofficial" Javascript logo and reference's dc's attachment to D3.js as well.

The Javascript logo.

The D3.js logo

So here's the logo I'd like to propose -

If this is acceptable, I'd like to adapt the logo in any relevant formats like SVG's and multiple dimensions to suitable contexts like favicons or for the Github README page etc.

Awaiting criticism/suggestions. Thanks :)

First of all props for releasing this nice lib. I love the choropleth support and a natural extension is to render it as some kind of layer in a mapping lib like leaflet, cartodb, ..

So I was looking for something like this but linked into dc and that I can extend to multiple layers, each binding to a different set of dimensions/groups.

Advice from Google seems to be to look at the snack dashboard by @jeroenooms but I failed to find the unminified source with the relevant code.

@yurukov mentions he did something similar in #119 and @NickQiZhu in #14. Im sure it cant be that hard but would appreciate some pointers or example code.

as suggested by Nick, PR for inclusion.

I didn't succeed to have grunt make working, so I included manually src/data-grid.js in the example, it shouldn't be needed with a normal make.

I will document it in the wiki after code review (I'm assuming you'll suggest improvements, I'll document only when it's "stable" and pulled)

In the ep example, I did use jquery for lazyloading the images and underscore for the templating. Neither are requirements, but obviously loading 800 images isn't good usability and using a template for generating html fragment is more convenient.

Enable es module users to specify d3js compatibility layer while maintaining dynamic adaptation to run-time d3js version for UMD users.

TODO:

• [x] html-legend has a hard dependency on d3v5 selection
• [x] possibly have a better import than 'dc/src/core/..' for es module users
• [x] fix units.js:47 Uncaught (in promise) Error: dc.units.ordinal should not be called - it is a placeholder
• [x] move compat helpers out of config to d3compat to avoid clash with upcoming dc@5 config

Fixes #1822 Fixes #1823

I plan to submit an enhanced BoxPlot chart that is fully backward compatible. This enhancement will also fix issue #1120. I have never submitted a pull request, but would like to learn so I can help maintain this chart and potentially help with others.

Currently I am using a different name for this chart (BoxPlotJitter), but I will change it back to BoxPlot. It looks like I need to submit changes for src/box-plot.js, src/d3.box.js and style/dc.scss.

We are currently running against dc.js 2.1.9.

I will build a jsfiddle example and post the link later today to show the enhancements.

Got this error No d3.js compatbility nester registered, load v5 or v6 compability layer. when trying to render a series chart. I include the part of the code that does the chart render.

import { SeriesChart, LineChart, units } from "dc";
import { curveCardinal } from "d3-shape";
import { scaleLinear, scaleTime } from "d3-scale";

let height = "280";
let width = "";
let style = "width:100%";

 let dimension = data.dimension((d) => [d.gender, d.height]);
 let group = dimension.group().reduceCount();

 let valueAccessor = "";
 let keyAccessor = "";
 let seriesAccessor = "";
 let x = "";

let from = new Date(new Date().setDate(today.getDate() - 30));
let to = new Date() - 

let chart = new SeriesChart(e);
    chart
      .height(height)
      .width(width)
      .chart((c) => {
        return new LineChart(c).curve(curveCardinal);
      })
      .x(scaleTime().domain([from,to]))
      .elasticY(true)
      .dimension(dimension)
      .group(group)
      .valueAccessor((d) => +d.value)
      .seriesAccessor((d) => d.key[1])
      .keyAccessor((d) => d.key[0])
      .render();

I'm currently building a angular project where i need to draw a line chart with multiple datasets.

Angular 14 dc.js 4.2.7

Example object format: { id: "string", datasets: [ id: "string", data: []; color: "string"; ] }

I followed some examples and only could made a series chart where each line is an address. where's a clean run of what i've got: https://jsfiddle.net/TheAndre98/zexncpd5/41/ *in this example the data arrays start seperated from the color string

Tried to change the dimension and tried colors with colorAcessor but nothing worked.

Is it possible to make a line chart where each line is a address and the color of the line is the from the dataset ? Meaning multiple lines with same address but diferent colors and values.

** if not, is it possible to do something similiar with a bar chart too ?

High vulnerability found (30.09.2022) from npm audit

https://github.com/advisories/GHSA-36jr-mh4h-2g58

┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ d3-color vulnerable to ReDoS │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ d3-color │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=3.1.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ dc │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ dc > d3 > d3-color │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://github.com/advisories/GHSA-36jr-mh4h-2g58 │ └───────────────┴──────────────────────────────────────────────────────────────┘

My guess would just be to update the d3 lib that has a d3-color fixed

dc(4.2.7) using d3(6.6.2) as required dependency , d3 has d3-color:2.0.0 vulnerability, it needs to update latest d3 version https://github.com/advisories/GHSA-36jr-mh4h-2g58

"dc": { "version": "4.2.7", "resolved": "https://registry.npmjs.org/dc/-/dc-4.2.7.tgz", "integrity": "sha512-83vzVpBmXFCW7V2uVhBolcPX22d19k4GV7zJWu8jkyNhMstAb/XYl2Eld3Kp71eLD8YM9RsIRgtrmLViQeZTuQ==", "requires": { "d3": "^6.6.2" }, .... }

Gordon Woodhull is stepping down from maintaining dc.js at the end of 2022. He may occasionally respond on Stack Overflow or on GitHub issues, but will no longer maintain or contribute to the project.

Deepak Kumar (@kum-deepak) has volunteered to be the active maintainer, but he needs your help:

• Beta testing new versions and features
• Refactoring, adding features, and fixing bugs
• Improving documentation
• Answering questions on GitHub Issues, Stack Overflow, and mailing list

Please reach out through this ticket or through our emails in bios if you are interested in becoming a maintainer.

dc@5

Deepak is taking dc.js in a new direction in dc version 5, available in the dc-v5 branch.

Design goals include:

• Simplifying and modularizing code; separating concerns
• Server-side filtering and aggregation directly supported without workarounds
• Fully ported to Typescript
• Saving and restoring filters

Due to fixing longstanding issues with dc.js, the interface will not be backward compatible, but there are codemods to ease the transition.

when i set the externalLabels on a sunburst chart all labels are displayed in the center of the chart.

the problem is that startAngle and endAngle is not set on the d3Shape.arc in the function _labelPositon. when i change to

_labelPosition (d, _arc) {
         let centroid;
         if (this._externalLabelRadius) {
             centroid = d3Shape.arc()
                 .startAngle(d => d.x0)
                 .endAngle(d => d.x1)
                 .outerRadius(this._radius + this._externalLabelRadius)
                 .innerRadius(this._radius + this._externalLabelRadius)
                 .centroid(d);
         } else {
             centroid = _arc.centroid(d);
         }
         if (isNaN(centroid[0]) || isNaN(centroid[1])) {
             return 'translate(0,0)';
         } else {
             return `translate(${centroid})`;
         }
     }

the labels are displayed but labels of each path in the tree overwrite each other. so the position in the path should be taken into account.

versions: "d3": "^6.6.2", "dc": "^4.2.7"