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
What if we want to change the color and font of axes?
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.
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.
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.)
Per #75 (comment) we want to hide the axis if it has much too many ticks.
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.
Related d3/d3-array#180.
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
})
Related #2.
The zero properties allow a rule at zero, but we should have a way to specify rules at arbitrary x and y values.
Will be needed for Histogram #9: x1, y1, x2, y2 all quantitative.
Currently faceting repeats scales. What if you want a scale that varies by facet, as in a SPLOM?
It defaults to zero, but there may be an x-axis with a top orientation, so that’s wrong.
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.
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.
Dot plots might want control over z-order due to occlusion.
A sqrt scale?
Should we support ordinal data for radius (probably not)?
And how would we render a key?
Note: D3 doesn't have an "identity" scale in that sense (d3.scaleIdentity coerces values to numbers).
And for facets, the maximum across all facets?
It’s useful!
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?
I hard-coded one for use with histogram, but it should be configurable.
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.
It’d be nice to have a tooltip that shows the value nearest the mouse.
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 :)
partially implemented in #38 and
https://observablehq.com/d/c364dd180391294a
With Bar, x = quantitative and y = ordinal. With Column, x = ordinal and y = quantitative.
We need a way to control the stroke attribute, and perhaps other attributes, as a function of z.
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.
Building it into a specialized Mark type seems to work well. d4e4df8
But… probably not until they’ve baked a little more.
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.
How would we support this?
What about streamgraphs? Or diverging stacks?
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?
#36 explores a "Carto" mark.
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
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})
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.