Dot Chart Issues

[skirscher]

I wanted to display a scatter plot using the "dot" chart with zoom enabled. However, using the latest version of n3-charts, I was unable to get the zoom feature to work properly. I reverted back to an earlier version of n3-charts (v1.11) and was able to get the zoom feature functional but now there is a line being rendered between each of the dots which I cannot figure out how to remove. It's making my scatter plot look like a very interesting starburst. What confuses me even further is that the current version of n3-charts doesn't do this. Any help that can be provided with either resolving the lines issue or getting the most current version of n3-charts to work with the zoomable feature would be greatly appreciated.

Note: I am getting a sample set of data from an Oracle database every time I load/reload the page as my data set for the chart. This being said, here is the $scope.options part of my code from my controller:

$scope.options = { margin: { bottom: 80, right: 80 }, pan: { x: true, x2: false, y: true, y2: false }, series: [{ y: "y", dataset: "numerical", key: "x", label: "Test", color: "hsla(88, 48%, 48%, 1)", type: ["dot"], id: "mySeries0" }], axes: { x: { key: 'x', zoomable: true } }, hideOverflow: true, zoom: { x: true, y: true } };

[lorem--ipsum]

Hi ! What do you mean by "work properly" ?

[skirscher]

The zoom was not working with the current version...at all.

[skirscher]

It also isn't working in one of the codepen examples I found through this GitHub: http://codepen.io/anon/pen/JXWavo

[lorem--ipsum]

This is something we should totally communicate more about : zooming works by pressing alt and clicking. Simple click and drag is dedicated to panning. Let me know if that helps :)

[skirscher]

That does help. Definitely needs to be documented better, I had been double clicking all this time... 0_o

[skirscher]

Okay so when I stated it helped, I was only looking at the codepen project. When I went to replace the older versions of n3-chart's library files on my server with the newest/latest version (still keeping d3.js version 3.5); it broke my chart. Now it is giving me a the following error:

TypeError: this.sets[t.dataset] is undefined e</e.prototype.getDatasetValues() line-chart.min.js:1 n</i.prototype.updateData() line-chart.min.js:2 i</e.prototype.updateSeries/<() line-chart.min.js:2 Co.each/<() d3.v3.min.js:3 Y() d3.v3.min.js:1 Co.each() d3.v3.min.js:3 i</e.prototype.updateSeries() line-chart.min.js:2 i</e.prototype.updateSeriesContainer() line-chart.min.js:2 i</e.prototype.softUpdate() line-chart.min.js:2 bound () self-hosted t() d3.v3.min.js:1 e</t.prototype.trigger() line-chart.min.js:1 e/this.link/d<() line-chart.min.js:2 e</t.debounce/</n<() line-chart.min.js:1

Currently I am setting the $scope.data to a hard coded array. Here is my $scope.data and $scope.options;

$scope.data = [{ x: 262, y: 4198 },{ x: 729, y: 2300 },{ x: 608, y: 717 },{ x: 150, y: 84 },{ x: 229, y: 357 },{ x: 149, y: 95 },{ x: 849, y: 986 }, { x: 74, y: 325 },{ x: 129, y: 239 },{ x: 198, y: 469 },{ x: 367, y: 586 },{ x: 236, y: 360 },{ x: 182, y: 260 },{ x: 101, y: 144 },{ x: 505, y: 4287 }, { x: 183, y: 779 },{ x: 340, y: 683 },{ x: 184, y: 94 },{ x: 475, y: 408 },{ x: 345, y: 797 },{ x: 236, y: 613 },{ x: 205, y: 409 },{ x: 242, y: 402 }, { x: 395, y: 678 },{ x: 371, y: 645 },{ x: 494, y: 648 },{ x: 314, y: 1848 },{ x: 842, y: 216 },{ x: 35, y: 212 },{ x: 378, y: 819 },{ x: 212, y: 307 }, { x: 344, y: 284 },{ x: 191, y: 412 },{ x: 110, y: 345 },{ x: 332, y: 177 },{ x: 361, y: 427 },{ x: 382, y: 1381 },{ x: 98, y: 142 },{ x: 409, y: 484 }, { x: 324, y: 964 },{ x: 567, y: 837 },{ x: 265, y: 357 },{ x: 269, y: 440 },{ x: 168, y: 273 },{ x: 165, y: 451 },{ x: 136, y: 570 },{ x: 508, y: 500 }, { x: 421, y: 605 },{ x: 208, y: 419 },{ x: 233, y: 1459 },{ x: 215, y: 83 },{ x: 488, y: 1167 },{ x: 394, y: 372 },{ x: 102, y: 377 },{ x: 460, y: 839 }, { x: 223, y: 664 },{ x: 180, y: 16026 },{ x: 119, y: 287 },{ x: 324, y: 528 },{ x: 320, y: 453 },{ x: 194, y: 1187 },{ x: 208, y: 443 },{ x: 204, y: 230 }, { x: 205, y: 381 },{ x: 290, y: 946 },{ x: 294, y: 483 },{ x: 238, y: 1778 },{ x: 532, y: 1274 },{ x: 651, y: 1441 },{ x: 515, y: 451 },{ x: 229, y: 307 }, { x: 340, y: 758 },{ x: 342, y: 2503 },{ x: 189, y: 236 },{ x: 172, y: 67 },{ x: 52, y: 65 },{ x: 415, y: 1605 },{ x: 319, y: 488 },{ x: 591, y: 1311 }, { x: 281, y: 326 },{ x: 527, y: 416 },{ x: 209, y: 339 },{ x: 99, y: 140 },{ x: 307, y: 433 },{ x: 910, y: 708 },{ x: 255703, y: 52063 },{ x: 23, y: 213 }, { x: 809, y: 1387 },{ x: 246, y: 198 },{ x: 193, y: 515 },{ x: 366, y: 172 },{ x: 547, y: 903 },{ x: 282, y: 414 },{ x: 98, y: 100 },{ x: 267, y: 161 }, { x: 366, y: 1051 },{ x: 423, y: 334 },{ x: 356, y: 1517 },{ x: 97, y: 106 },{ x: 293, y: 1275 },{ x: 433, y: 331 },{ x: 194, y: 85 },{ x: 408, y: 552 }, { x: 174, y: 2515 },{ x: 684, y: 706 },{ x: 166, y: 198 },{ x: 395, y: 331 },{ x: 256, y: 265 },{ x: 138, y: 632 },{ x: 565, y: 582 },{ x: 271, y: 446 }, { x: 320, y: 299 },{ x: 92, y: 165 },{ x: 280, y: 771 },{ x: 243, y: 280 },{ x: 398, y: 84 },{ x: 791, y: 2276 },{ x: 308, y: 499 },{ x: 164, y: 357 }, { x: 416, y: 424 },{ x: 113, y: 256 },{ x: 261, y: 165 },{ x: 31, y: 54 },{ x: 365, y: 765 },{ x: 118, y: 159 },{ x: 49, y: 279 },{ x: 125, y: 321 }, { x: 63, y: 246 },{ x: 406, y: 415 },{ x: 296, y: 286 },{ x: 377, y: 285 },{ x: 536, y: 1246 },{ x: 113, y: 188 },{ x: 300, y: 407 },{ x: 195, y: 188 }, { x: 259, y: 264 },{ x: 335, y: 445 },{ x: 354, y: 556 },{ x: 515, y: 300 },{ x: 414, y: 454 },{ x: 323, y: 399 },{ x: 206, y: 518 },{ x: 157, y: 209 }, { x: 226, y: 324 },{ x: 205, y: 1082 },{ x: 523, y: 566 },{ x: 287, y: 78 },{ x: 122, y: 409 },{ x: 199, y: 396 },{ x: 370, y: 631 },{ x: 212, y: 940 }, { x: 494, y: 319 },{ x: 264, y: 1741 },{ x: 379, y: 2310 },{ x: 339, y: 1599 },{ x: 316, y: 378 },{ x: 187, y: 353 },{ x: 289, y: 1922 },{ x: 217, y: 345 }, { x: 12, y: 37 },{ x: 153, y: 83 },{ x: 408, y: 1115 },{ x: 520, y: 380 },{ x: 211, y: 348 },{ x: 200, y: 185 },{ x: 461, y: 263 },{ x: 522, y: 457 }, { x: 496, y: 391 },{ x: 98, y: 93 },{ x: 131, y: 449 },{ x: 386, y: 1459 },{ x: 552, y: 822 },{ x: 100, y: 458 },{ x: 306, y: 415 },{ x: 726, y: 587 }, { x: 357, y: 264 },{ x: 140, y: 536 },{ x: 349, y: 314 },{ x: 388, y: 743 },{ x: 368, y: 425 },{ x: 216, y: 1510 },{ x: 155, y: 324 }];

$scope.options = { margin: { bottom: 80, right: 80 }, series: [ { y: "y", dataset: "numerical", key: "x", label: "Test", color: "hsla(88, 48%, 48%, 1)", type: ["dot"], id: "mySeries0" }], axes: { x: { key: 'x', zoomable: true } }, hideOverflow: true };

Any suggestions?

[lorem--ipsum]

Hm. Any chance you could post a CodePen that replicates the issue ? That'd help tremendously

[skirscher]

I will see what I can do...

[skirscher]

I was able to get a plunkr together recreating the errors. Hope this helps: http://plnkr.co/edit/TR5mmmI0hQpSL0dkwGcX?p=preview

Suggestions?

[lorem--ipsum]

Okay here's a working version.

You forgot a couple of things :

1. the options were missing some stuff (the options structure changed from v1 to v2, I think you had v1 options especially regarding the series key)
2. the data structure wasn't right (again, probably v1 data — we now use an object that contains datasets)
3. the LineChart's CSS file wasn't linked
4. the data wasn't sorted on the abscissas and contained an extreme point (see the comment in the code)

Hope that helps. You might wanna give a height and a width to your chart, otherwise it'll get its dimensions wrong (useful for tooltip positioning as well I think). Also, LineChart's default style is more suitable for display on a light background, so you might wanna change that as well (but that's more of a personal opinion ^^).

[skirscher]

Thanks for your help. I was able to get things working by switching up the options and fixing how I was creating my data. The color scheme is actually something that was decided upon by the project lead so don't think that will be changed. However, I will most likely be setting the height/width of chart. In doing so, would this affect the scale? Also, the higher numbers are going to end up in our data because it's related to job file count averages among other stats we are reporting upon. I will bring up considering the removal of really high counts that wouldn't correlate to the rest of the data and just be a random spike, thanks for your input.

[skirscher]

One other question, any way to adjust the scale? Would like to be able to keep it smaller so that it shows the correlation better, even when there are the huge spikes.

[lorem--ipsum]

Yeah, you can use min and max on the axes in the options to customize the chart. Take a look at the documentation for moar.

[skirscher]

*more K, thanks! ^_^