An implementation of dot charts #554
Conversation
…he dot-chart option set brownplt#469 chart.arr: Added dot-chart-from-list() dot-chart-test.arr added
|
Example of a colorful dot chart (pardon horrible colors, this is just to show it's possible). Done with
P.S. Looks like when using |
|
Ensured no intrusive column outlines when
|
|
I took a brief look at it and already told @ds26gte it looked plausible. I haven't had bandwidth for anything more thorough, given the time of year. |
|
|
||
| // if custom images are defined, use the image at that location | ||
| // and overlay it atop each dot | ||
|
|
| and construct a dot chart | ||
| ``` | ||
| # Type Checking | ||
| values.each(check-num) |
There was a problem hiding this comment.
Pretty sure this is redundant, given that P.LoN does a deep check (
code.pyret.org/src/web/js/trove/chart-lib.js
Line 1741 in a5adce5
| google.visualization.events.addListener(chart, 'ready', function () { | ||
| // HACK(Emmanuel): | ||
| // If Google changes the DOM for charts, these lines will likely break | ||
| const svgRoot = chart.container.querySelector('svg'); | ||
| const rects = svgRoot.children[1].children[1].children[1].children; | ||
| $('.__img_labels').each((idx, n) => $(n).remove()); | ||
|
|
||
| if (hasImage) { |
| } | ||
|
|
||
| if (dotChartP) { | ||
| table.forEach(function (row, i) { |
| if (dotChartP) { | ||
| table.forEach(function (row, i) { | ||
| // console.log('row', i, '=', row); | ||
| const rect = rects[i]; |
There was a problem hiding this comment.
I'm not reviewing this SVG code; I assume from the screenshots that this works adequately enough
| zoo-more = render-image(zoo-series.colors(more-colors)) | ||
|
|
||
| check: | ||
| zoo satisfies is-image |
There was a problem hiding this comment.
I'm not sure what these tests actually do, other than maybe show that the code above runs without error? Might be better to somehow have the tests fail rather than crash, though.
Issue #469
Usage:
from-list.dot-chart(labels, counts), wherelabelsandcountsare lists -- the signature is exactly as forbar-chart. An example of a dot chart it produces: