Or, there’s a more verbose option:
canvas = toyplot.Canvas(width=600, height=300)
axes = canvas.cartesian()
axes.x.scale = "log"
axes.y.scale = "log"
mark1 = axes.plot(x, y1)
mark2 = axes.plot(x, y2)
mark3 = axes.plot(x, y3)
See https://toyplot.readthedocs.io/en/stable/log-scales.html for more examples of coordinate system scales. See https://toyplot.readthedocs.io/en/stable/canvas-layout.html and https://toyplot.readthedocs.io/en/stable/convenience-api.html for additional background on the relationship among canvas, axes, and marks.
@ha:matrix.org :)
@matrixbot - if you’re interested in scaling, I strongly recommend “Formal Metrics for Large-Scale Parallel Performance”, http://www.kennethmoreland.com/parallel-scaling-metrics/, which happens to use Toyplot for the figures.
Hi @tshead2 , I'm making progress on the text-marker version of toytree, so it should be compatible to run with toyplot v.0.15 soon. I have a question about data export. I'd like to add functionality to right-click and download a string representation of a tree file, similar to how CSV files can be downloaded from a barplot. It doesn't look like
filename is currently provided as an option to graphs. Do you think it would be a difficult hack to make something like that work?
@dereneaton - okay, it’s a complicated story. My intent is to have two separate CSV download options for graphs, one for the vertices and one for the edges. Since the code is in front of me, I just went in and implemented vertex export. I’ll take a look at edge export later tonight (basically, the current client-side Javascript code assumes one export type per mark, and I need to remove that constraint). So that’s straightforward.
For Toytree, what you really want is some kind of API to allow you to add your own export file formats. That might-or-might-not involve some combination of Python and Javascript code (currently, the CSV files are dynamically generated on the client from the underlying data, using Javascript). Also, I’m under the impression that there isn’t a one-to-one mapping between Toytree tree vertices and Toyplot graph vertices, is that correct? That would be a good reason to want to disable the current vertex output.
Plan C would be to derive your own class from toyplot.mark.Graph, and register a custom function to render it. The function implementation could use the Graph rendering code, then alter it. It would require a little bit of new Toyplot API to make this work, but it’s probably your best bet.
Hey @dereneaton , just a heads-up that I went ahead and made the code for creating and rendering custom marks public; you can see an example in the sandibox/custom-marks notebook. What’s missing at the moment is some way to register the code to create your tree files, which I’ll work on next. There are basically two possible approaches. The expedient approach would be to allow callers to just embed a blob of data in a mark and make it exportable. That would be easy, because you’d use the existing Graph mark, generate the tree file in Python code, “embed” it in the mark, and some boilerplate Javascript could handle the exports. The objection to this approach is that if you have many different supported file formats, you end-up duplicating the data many times over in your figure. So the efficient approach would be to allow the caller to register some JavaScript code to convert the underlying data to the export format as-needed. That’s the current hard-coded approach to CSV export, which I would be opening-up to customization. That would be trickier because you’d need to derive from the existing Graph mark, register a rendering function that falls back on the existing graph rendering code, then registers the Javascript to handle the export.
Hi, @dereneaton - I finished reorganizing the Javascript code to allow for either option. The Toyplot code in text/html.py uses the efficient option (embed tabular data in the Javascript, then use Javascript code to convert it to CSV), while the
sandbox/custom-marks notebook has an example of the easy option (embed an arbitrary blob of data in the figure as Javascript, and write it out on request). Let me know what you think. Cheers, Tim.
@tshead2 On a related note: I'm interested in ways to reduce the size of the DOM that is produced by
toyplot.html.render. In some cases I've run into the maximum-output error in jupyter b/c too much data was being printed to a cell. I noticed that for some objects, like a toyplot-mark-Text class object, the style dictionary is repeated in the DOM for every Toyplot-Datum <g> object, which makes the HTML huge when there are many points with lots of styling. Is there an easy way in toyplot -- outside of hacking the etree element itself -- to pass in a single style dict to the toyplot-mark-Text<g> object, so that all of the Toyplot-Datum objects inherit the style from their parent? Or is the best way to manipulate the xml.etree?
For example, the following code:
x = np.arange(5)
y = np.arange(5)
canvas = toyplot.Canvas(width=200, height=200)
axes = canvas.cartesian()
mark = axes.text(x, y, list("abcde"))repeats the default dictionary for the text markers five times in the xml tree and DOM:
[('transform', 'translate(3.127343632818357,6)')]
[('y', '8.555'), ('x', '-2.78'), ('style', 'fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre')]
[('transform', 'translate(26.56367181640918,6)')]
[('y', '8.555'), ('x', '-2.78'), ('style', 'fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre')]
[('transform', 'translate(49.999999999999986,6)')]
[('y', '8.555'), ('x', '-2.78'), ('style', 'fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre')]
[('transform', 'translate(73.4363281835908,6)')]
[('y', '8.555'), ('x', '-2.78'), ('style', 'fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre')]
[('transform', 'translate(96.87265636718163,6)')]
[('y', '8.555'), ('x', '-2.78'), ('style', 'fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre')]
OK. Thanks. It's not so much a problem for text, I was just using that as a simple example, but where it really starts to cause problems for me is in graphs, where hundreds or thousands of edges start to create really large strings of data. It's only troublesome for particularly large plots, of course. For now maybe I'll just hack a solution for those particular types of plots.
@dereneaton - FYI, I just pushed an updated version of the custom-marks notebook, with an example of a lighter-weight, cleaner way to add a context menu item to an existing mark without having to derive from it or do anything fancy. The example adds a menu item to export data from a graph in GraphViz .dot format, using client-side code to generate the output (so no duplication of data). Should be a very close match to what you’re doing. Cheers - Tim.
Gang:
I’ve been pushing a lot of graph visualization related features to a new branch called neural-net. Highlights are support for head, middle, and tail markers on graph edges (so you can have edges with arrows), and updated drawing so edges don’t overlap vertex markers. @dereneaton, I’d particularly like to get your feedback on whether this causes problems for Toytree.
Cheers,
Tim
Hey @tshead2, I'm finding variable behavior on the placement of text when I use custom markers versus standard text plotting. On the current master (commit 9ef9a84) example. Any suggestions for lining up text within the scatter points with markers?
Actually, you must be using Firefox. The current markup doesn’t specify units for the font-size, and Firefox (correctly) ignores this, while Safari and Chrome (misleadingly) treat a font size without units as being in pixels. The fix should land on master once I make sure it doesn’t break anything else. Cheers, Tim.
Toyplot 0.15.1 Released - lots of good stuff here, markers can be embedded in any text, text can contain hyperlinks, legends are implemented using tables, there is new API to simplify creating custom marks and modifying existing marks, graph edges can have head, middle, and tail markers, and more! See http://toyplot.readthedocs.io/en/stable/markers.html and http://toyplot.readthedocs.io/en/stable/graph-visualization.html#edge-rendering for details on the new capabilities, along with a new case-study on visualizing neural networks at http://toyplot.readthedocs.io/en/stable/neural-network-case-study.html, plus http://toyplot.readthedocs.io/en/stable/projects.html for links to Toytree. Per the norm, full details are at http://toyplot.readthedocs.io/en/stable/release-notes.html … enjoy!
hannes is it possible to add value labels to the cells of a http://toyplot.readthedocs.io/en/stable/matrix-visualization.html ?
hannes and is it possible to visually "link" the axes of the plot at the bottom of http://toyplot.readthedocs.io/en/stable/matrix-visualization.html ? so that you could have eg histograms of the bars or columns
hannes BTW there is a bug: if i click into the matrix in that last plot, the mouse coordinates are shown in the distribution plot with its coordinates!
A matrix visualization is a special-case of a table, so you can do anything with it that a table can do, see http://toyplot.readthedocs.io/en/stable/table-coordinates.html
Getting multiple plots on one canvas to line-up is tricky-but-doable. We are actively looking at how to make it easier.
I created an example, take a look at https://github.com/sandialabs/toyplot/blob/master/sandbox/matrix-plus-labels.ipynb
hannes i was thinking i would need to use table.body.cell.data thingies :)
Also, when I click the axes, the displayed value is wherever I clicked. This did not match my expectation which was that the displayed value would be the closest actual data point. What is the intent? I looked in the bug list and didn't find this reported (unless sandialabs/toyplot#147 is related).
@lannybroo - thanks for the kind words. In the absence of box plots or violin plots you might consider using
axes.fill to display percentiles, like the example in http://toyplot.readthedocs.io/en/stable/labels-and-legends.html#canvas-legends
Agreed that the intent for interaction is to go beyond simply showing pointer coordinates - #147 is an example, along with #75, and the
spatial branch, which I need to get back to.