GH-495 Adds the Scatter Chart #504
Conversation
| @@ -0,0 +1,6 @@ | |||
| .axis path, | |||
| .axis line { | |||
GordonSmith
Jun 18, 2015
Member
Should be prefixed with the scatter class ID
Should be prefixed with the scatter class ID
| XYAxis.call(this); | ||
| INDChart.call(this); | ||
| } | ||
|
|
GordonSmith
Jun 18, 2015
Member
Remove blank line
Remove blank line
| .attr("class", "point") | ||
| .attr("r", context.pointSize()/2) | ||
| .on("click", function (d2, idx) { | ||
| context.click(context.rowToObj(d), context._columns[idx + 1]); |
mzummo
Jun 18, 2015
Contributor
idx not defined (its i right now)
idx not defined (its i right now)
anmoljagetia
Jun 18, 2015
Author
Contributor
The idx refers to the function defined on line 46. The d element has the row from the array, and then d2 is individual elements from the array (Found with the help of idx).
The idx refers to the function defined on line 46. The d element has the row from the array, and then d2 is individual elements from the array (Found with the help of idx).
GordonSmith
Jun 18, 2015
Member
Its defined on line 46
Its defined on line 46
mzummo
Jun 18, 2015
Contributor
ah i missed that, odd it was giving me an error about idx ...
ah i missed that, odd it was giving me an error about idx ...
| Scatter.prototype.implements(INDChart.prototype); | ||
|
|
||
| Scatter.prototype.publish("paletteID", "default", "set", "Palette ID", Scatter.prototype._palette.switch(),{tags:['Basic','Shared']}); | ||
| Scatter.prototype.publish("dotRepresentation", "cross", "set", "Selects the representation for the data", ["circle", "rectangle", "cross"]); |
GordonSmith
Jun 18, 2015
Member
rename to pointShape and improve description "Point Shape" or such like.
rename to pointShape and improve description "Point Shape" or such like.
|
|
||
| Scatter.prototype.publish("paletteID", "default", "set", "Palette ID", Scatter.prototype._palette.switch(),{tags:['Basic','Shared']}); | ||
| Scatter.prototype.publish("dotRepresentation", "cross", "set", "Selects the representation for the data", ["circle", "rectangle", "cross"]); | ||
| Scatter.prototype.publish("pointSize", 8, "number", "pointSize"); |
| this._palette = this._palette.switch(this.paletteID()); | ||
|
|
||
| var column = this.svgData.selectAll(".data") | ||
| .data(this._data, function (d) { var k = d.filter(function(d, i) {return i > 0;}); return k + Math.random(); }) |
GordonSmith
Jun 18, 2015
Member
The "key" function here is worrying, the "random" will probably force all the points to be removed and re-appended on every update call. Can you delete this and I can show you a better way to handle the "shape" changing issue.
The "key" function here is worrying, the "random" will probably force all the points to be removed and re-appended on every update call. Can you delete this and I can show you a better way to handle the "shape" changing issue.
| .each(function (d, i) { | ||
| var element = d3.select(this); | ||
| var point = element.selectAll(".point").data(d.filter(function(d, i) {return i > 0;})); | ||
| var point1 = element.selectAll(".point").data(d.filter(function(d, i) {return i > 0;})); |
GordonSmith
Jun 18, 2015
Member
You will want to give this a different class name otherwise it could interfere with the other one.
You will want to give this a different class name otherwise it could interfere with the other one.
GordonSmith
Jun 18, 2015
Member
Another approach would have been to add a single point of type "g" and append two lines within that.
Another approach would have been to add a single point of type "g" and append two lines within that.
| var title = point | ||
| .enter().append("circle") | ||
| .attr("class", "point") | ||
| .attr("r", context.pointSize()/2) |
GordonSmith
Jun 18, 2015
Member
This should be set in the "update" cycle not the "enter()" cycle (and it only appears to be working now due to the random above)
This should be set in the "update" cycle not the "enter()" cycle (and it only appears to be working now due to the random above)
| .enter().append("rect") | ||
| .attr("class", "point") | ||
| .attr("width", context.pointSize()) | ||
| .attr("height", context.pointSize()) |
GordonSmith
Jun 18, 2015
Member
width + height should be applied at the update cycle.
width + height should be applied at the update cycle.
| var title = point | ||
| .enter().append("line") | ||
| .attr("class", "point") | ||
| .attr("stroke-width", 2) |
GordonSmith
Jun 18, 2015
Member
Can this be moved into the style sheet?
Can this be moved into the style sheet?
| var title1 = point1 | ||
| .enter().append("line") | ||
| .attr("class", "point") | ||
| .attr("stroke-width", 2) |
GordonSmith
Jun 18, 2015
Member
Can this be moved into the style sheet?
Can this be moved into the style sheet?
anmoljagetia
Jun 18, 2015
Author
Contributor
If I move this to style sheet, I will have to color the stroke with every other shape, and the size estimation we have now, will also change. Also this is only relevant for the cross shape.
If I move this to style sheet, I will have to color the stroke with every other shape, and the size estimation we have now, will also change. Also this is only relevant for the cross shape.
| point.transition() | ||
| .attr("cx", function (d2, idx) { return context.dataScale(d[0]) + context.dataScale.rangeBand()/2 ;}) | ||
| .attr("cy", function (d2, idx) { return context.valueScale(d2); }) | ||
| .style("fill", function (d2, idx) { return context._palette(idx + 1); }) |
GordonSmith
Jun 18, 2015
Member
All calls to "_palette" should use the column label and not the idx so that the colours are consistent with other charts displaying the same data...
All calls to "_palette" should use the column label and not the idx so that the colours are consistent with other charts displaying the same data...
| title | ||
| .text(function (d2, idx) { return d[0] + " (" + d2 + ")" + ": " + context._columns[idx + 1]; }) | ||
| ; | ||
| point.exit().remove(); |
GordonSmith
Jun 18, 2015
Member
point1 will need a remove also?
point1 will need a remove also?
anmoljagetia
Jun 18, 2015
Author
Contributor
Added the removal of point1 also.
Added the removal of point1 also.
anmoljagetia
force-pushed the
anmoljagetia:scatterPlot
branch
3 times, most recently
from
ea3ed86
to
1f34d85
| } | ||
|
|
||
| var column = this.svgData.selectAll(".data") | ||
| .data(this._data, function (d) { var k = d.filter(function(d, i) {return i > 0;}); return k; }) |
GordonSmith
Jun 18, 2015
Member
The whole key function is not needed: , function (d) { var k = d.filter(function(d, i) {return i > 0;}); return k; }
The whole key function is not needed: , function (d) { var k = d.filter(function(d, i) {return i > 0;}); return k; }
|
|
||
| this._palette = this._palette.switch(this.paletteID()); | ||
|
|
||
| if (this._prevPointShape !== this.pointSize()) { |
GordonSmith
Jun 18, 2015
Member
Should be pointShape()
Should be pointShape()
|
|
||
| if (this._prevPointShape !== this.pointSize()) { | ||
| this.svgData.selectAll(".data").remove(); | ||
| this._prevPointShape = this.pointSize(); |
GordonSmith
Jun 18, 2015
Member
Should be pointShape()
Should be pointShape()
| title = point | ||
| .enter().append("line") | ||
| .attr("class", "point") | ||
| .attr("stroke-width", 2) |
GordonSmith
Jun 18, 2015
Member
Can this be a style?
Can this be a style?
| title1 = point1 | ||
| .enter().append("line") | ||
| .attr("class", "point1") | ||
| .attr("stroke-width", 2) |
GordonSmith
Jun 18, 2015
Member
Can this be a style?
Can this be a style?
anmoljagetia
Jun 18, 2015
Author
Contributor
Adding this to style will add a stroke on everything else as well, i.e. circles and also the rectangles. In that case, we will have to resize everything, and also handle the strokes on circle and rectangles separately.
Adding this to style will add a stroke on everything else as well, i.e. circles and also the rectangles. In that case, we will have to resize everything, and also handle the strokes on circle and rectangles separately.
GordonSmith
Jun 19, 2015
Member
Not if you added it as "line.point, line.point1 {...}"
Not if you added it as "line.point, line.point1 {...}"
Fixed GH-495 Signed-off-by: Anmol Jagetia <anmoljagetia@gmail.com>
GH-495 Adds the Scatter Chart
GordonSmith
merged commit e782582
into
hpcc-systems:master
@GordonSmith @mlzummo Please review.
Demo at : http://rawgit.com/anmoljagetia/Visualization/scatterPlot/demos/dermatology.html?src/chart/Scatter
Fixed GH-495
Signed-off-by: Anmol Jagetia anmoljagetia@gmail.com