Code Monkey home page Code Monkey logo

plot's Introduction

Observable Plot

The Observable Plot logo, spelling out the letters P-L-O-T in pastel shapes.

Observable Plot is a free, open-source, JavaScript library for visualizing tabular data, focused on accelerating exploratory data analysis. It has a concise, memorable, yet expressive API, featuring scales and layered marks in the grammar of graphics style.

Documentation 📚

https://observablehq.com/plot/

Examples 🖼️

https://observablehq.com/@observablehq/plot-gallery

Releases 🚀

See our CHANGELOG and summary release notes.

Getting help 🏠

See our community guide.

Contributing 🙏

See CONTRIBUTING.md.

plot's People

Contributors

cinxmo avatar domoritz avatar duaneatat avatar eagereyes avatar ee2dev avatar espinielli avatar fil avatar flother avatar git-ashish avatar juba avatar kentr avatar martgnz avatar mbostock avatar mkfreeman avatar mootari avatar nachocab avatar pbogden avatar riccardoscalco avatar tophtucker avatar visnup avatar yurivish avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

plot's Issues

Line color.

We need a way to control the stroke attribute, and perhaps other attributes, as a function of z.

Labeling algorithms (e.g., occlusion)?

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.

Weighted histogram.

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.

Arbitrary rules with lines.

The zero properties allow a rule at zero, but we should have a way to specify rules at arbitrary x and y values.

Don’t ignore undefined values for ordinal dimensions, and make grouping and faceting consistent?

Marks currently ignore data with undefined values. For example, BarX will ignore data whose y, x1 or x2 value is undefined.

const index = filter(I, ...this._positions(channels), F, S);

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,

return data => groups(data, key).filter(defined1);

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.

Custom facet margins.

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?

Band chart (area with y1 and y2).

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.

Arc mark (for donuts and pies).

Here's a nice(?) example found in the wild, of faceted donuts.

Source

The data is available, but I don't think it's the right dataset to use, since I don't understand what it means :)

Bar and Column charts.

With Bar, x = quantitative and y = ordinal. With Column, x = ordinal and y = quantitative.

Dot radius.

A sqrt scale?

Should we support ordinal data for radius (probably not)?

And how would we render a key?

Brushing

Brush a rectangular region to select data.

Histogram with bars instead of columns.

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.

stand-alone svg?

In the browser (see these lines):

  • xmlns is missing;
  • the style.font declaration is not understood.

In Illustrator 2019:

  • the arrow symbol → is not recognized in the default (sans serif) font. I don't know how to fix this, except by giving an explicit font-family that has more unicode glyphs.

In Affinity Designer 1.8.6:

  • the 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

Proportional symbol mark?

Speaking in general, we have several possibilities for proportional symbols:

  • svg:circle is concise (and possibly the most cpu-efficient); scale with r/size.
  • svg:path + d3.symbol is useful for certain types of scatterplots, but difficult to extend; scale with transform:scale
  • svg:text + emoji works if we're careful to center the mark properly; scale with transform:scale

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.)

Offsets can cause axis labels to go offscreen.

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:

Screen Shot 2020-11-02 at 1 36 36 PM

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
})

Dot z-order.

Dot plots might want control over z-order due to occlusion.

Custom grid density or values.

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.

Axis labels are broken

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.