Code Monkey home page Code Monkey logo

Comments (5)

veroshin avatar veroshin commented on May 6, 2024

+1 on this one.
Yes having autopadding would be very useful. Right now with very long label text they just got cut off this makes chart look very ugly. It would be nice if this could be solved with either autopadding or with text wrapping or with elipses in the labels. I've seen the same issue with out of the box D3 Axes would be great if this could be solved in Vega.

from vega.

marcprux avatar marcprux commented on May 6, 2024

It occurs to me that this might be tricky to do with headless rendering, since I don't believe that node.js provides any sort of getBBox() function for SVG text measuring. If this were to be implemented, perhaps when rendering in a browser, the text could be accurately measured, and in an environment where it cannot (e.g., node.js or broken browsers), it could fall back to a very crude estimation like fontPointSize*numberOfCharacters+aLittleExtraPadding.

from vega.

marcprux avatar marcprux commented on May 6, 2024

This issue could be generalized to include other attributes that would benefit from resizability, such as the number of tick labels. The use case I envision is to have the exact same visualization spec be usable for both a small 50x50 thumbnail version of a chart and a 1024x768 full-screen version of the chart. The marks themselves will currently be valid at any resolution, but the decorations (like axes and legends) would need to be smart about their rendering at different sizes & aspect ratios (such as increasing/decreasing the number of smart ticks, font sizes, legend size).

from vega.

gerwitz avatar gerwitz commented on May 6, 2024

+1

There is potential in not only resizing drawn elements, but dynamically adjusting tick drawing to avoid bunching. I'm desperate for "subdivide": "smart".

from vega.

jheer avatar jheer commented on May 6, 2024

Auto-padding was added in commit 00341c7. Auto-padding can be invoked by using "padding": "auto" in the top-level of the Vega spec and is now the default padding choice.

Currently padding is added in addition to the specified width and height. If there is interest, a future work might include the option to adjust width, height and padding to ensure that the chart fits within a specified bounds.

from vega.

Related Issues (20)

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.