observablehq / plot Goto Github PK
View Code? Open in Web Editor NEWA concise API for exploratory data visualization implementing a layered grammar of graphics
Home Page: https://observablehq.com/plot/
License: ISC License
A concise API for exploratory data visualization implementing a layered grammar of graphics
Home Page: https://observablehq.com/plot/
License: ISC License
Related d3/d3-array#180.
Related #2.
In some line plots, if the cardinality of z is relatively low, it would be nice to label the lines say at the start or end. Similarly for dot plots, it would be lovely to have an automatic labeling strategy. Related vega-label.
I hard-coded one for use with histogram, but it should be configurable.
How would we support this?
What about streamgraphs? Or diverging stacks?
And for facets, the maximum across all facets?
Here's a nice(?) example found in the wild, of faceted donuts.
The data is available, but I don't think it's the right dataset to use, since I don't understand what it means :)
Brush a rectangular region to select data.
Related area #21, but this is interesting because it’s the first case where multiple abstract dimensions share the same y-scale, so we now need to support a many-to-one mapping from abstract dimensions to scales.
The Histogram plot currently only lets you specify the x-values, but it’d be nice if you could specify y-values instead and get a Histogram with bars (i.e., rotated 90°) instead.
Marks currently ignore data with undefined values. For example, BarX will ignore data whose y, x1 or x2 value is undefined.
Line 44 in 9fc3a10
This is a handy feature for avoiding SVG errors. However, we’re not entirely inconsistent with grouping. I fixed the group1 transform to skip groups whose key is undefined,
Line 7 in 9fc3a10
but I forgot to fix group2 at the same time. And we don’t apply this same technique to faceting, which is also inconsistent.
I’m now of the opinion that ignoring undefined data for ordinal dimensions — which includes grouping and faceting — is undesirable. Whereas there’s no consistent way to handle undefined data in a quantitative dimension, undefined values don’t have to be specially treated in ordinal dimensions. Furthermore, null and undefined are often used to represent an “other” or “unknown” category with grouping and faceting.
Therefore, I think we should changing the filtering logic and only filter undefined values for quantitative dimensions.
A sqrt scale?
Should we support ordinal data for radius (probably not)?
And how would we render a key?
#36 explores a "Carto" mark.
I think this might be related to #1, but we need to do some clamping or reconsider whether axis offsets apply to label anchors. Note the “V” is cut in half below:
Plot.Dot(AAPL, {
x: {
value: d => Math.abs(d.Close - d.Open) / d.Open * 100,
label: "Daily change (%) →",
format: "+f",
rule: 0
},
y: {
value: d => Math.log10(d.Volume),
label: "↑ Volume (log₁₀)",
offset: 12
},
grid: true
})
The zero properties allow a rule at zero, but we should have a way to specify rules at arbitrary x and y values.
Speaking in general, we have several possibilities for proportional symbols:
Note that svg:use + defs covers the three cases, and removes the difficulty of having to define complex symbols when we're not happy with the set in d3.symbols.
See https://observablehq.com/@fil/svg-use
So if we want a variant of Plot.dot that allows various symbols, I would try to code it with <use>
. The range of the symbol scale is a list of objects that would have an id and be added to the defs, or a list of ids—but then how do we pass the objects themselves? The mark could default to <use href=#square>
. And it would accept an orientation channel!
(discarding svg:polygon which has no advantage that I know of over svg:path.)
With Bar, x = quantitative and y = ordinal. With Column, x = ordinal and y = quantitative.
If y is specified as a function of the input data (or an equivalent array of values of the same length as x, and a quantitative value), then the size of each bin should be proportional to the sum of y-values for that bin, rather than a count of values. The default should be equivalent to () => 1.
Will be needed for Histogram #9: x1, y1, x2, y2 all quantitative.
It defaults to zero, but there may be an x-axis with a top orientation, so that’s wrong.
We need a way to control the stroke attribute, and perhaps other attributes, as a function of z.
Building it into a specialized Mark type seems to work well. d4e4df8
Currently faceting repeats scales. What if you want a scale that varies by facet, as in a SPLOM?
In the browser (see these lines):
In Illustrator 2019:
In Affinity Designer 1.8.6:
currentColor
declaration is not recognized and some bars are interpreted as brown instead of black. This could be fixed by replacing "currentColor" by "black".We also want a way to specify "id=xxx" for layers and marks, which become names of the objects in the Illustrator layers panel.
related keywords: export, illustrator
Dot plots might want control over z-order due to occlusion.
Currently x defaults to indexOf and y defaults to identity, but it’d be nice if when you only specified y, x could default to indexOf, e.g.
Plot.Line({length: 500}, {y: Math.random})
partially implemented in #38 and
https://observablehq.com/d/c364dd180391294a
It’d be neat if you could use a quantitative dimension for faceting, and we automatically binned it (say using d3.bin) into a reasonable number of facets.
But… probably not until they’ve baked a little more.
Seems like 7017838 broke axis labels; the elements are there but invisible, because currentColor is white or null for them or something? the label matched the old .plot text { fill: currentColor }
CSS but doesn’t go through the Text Mark code path so now it's undefined?
It’d be nice to have a tooltip that shows the value nearest the mouse.
Note: D3 doesn't have an "identity" scale in that sense (d3.scaleIdentity coerces values to numbers).
Per #75 (comment) we want to hide the axis if it has much too many ticks.
Currently grid is strictly a boolean, but true could be equivalent to the corresponding ticks, a number could compute new ticks (e.g., for higher density) and an array could contain explicit tick values.
The problem is that the label anchor defaults to center if the type of the y-axis is ordinal, but at the time we apply the default, we don’t yet know the scale type.
What if we want to change the color and font of axes?
It’s useful!
Facet margins currently double the chart margins, but sometimes you want the two margins to be different. Perhaps fx and fy could take a margin property that affects the respective margin?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.