I'm using d3 to draw a bar chart, where the bars are used to compare different groups (e.g. men/women). For the filling I take a color which is saved in the data file (json) and vary it using d3.rgb().darker()/.brighter().
.attr("fill", function(d){return d3.rgb(d.color).darker(1);})
It works in Firefox but in Internet Explorer 9 all the bars are shown as black (which is the first used color). I was wondering if this is just an issue with this browser in particular or if I am missing something to avoid this behavior.
One solution would be of course to assign the colors individually, but if possible I'd like to use the provided possibilities.
This happens because you're using attr("fill") instead of style("fill") to set a style property.
The style function includes some additional checking to turn a property value into an appropriate string if needed, so you wouldn't need to do the toString() yourself manually.
Changing your original line to:
.style("fill", function(d){return d3.rgb(d.color).darker(1);})
should work on all browsers including IE.
Related
Is there any way to set white space visible for a given scope?
I'm working on modifying a color scheme to suite my liking and would like to be able to show spaces within a given scope. I haven't seen anything suggesting it's possible within the color-scheme documentation on Sublime's website.
For my specific case, and I imagine there's other useful cases, I'm working with Markdown and want to highlight a double-space line-break. I'm able to set the background, but this doesn't look quite right. I'm hoping to be able to make whitespace visible for this small scope and change the foreground color to make it stick out.
The short answer to your question is no; or rather, Yes, but only in the way that you've already discovered.
Color schemes can only apply foreground/background colors to scopes as well as bold/italic font weights. So assuming that there is a specific scope detected by the syntax you're using that is used for the things you're trying to highlight, the only thing the color scheme can do is alter the background color to make them visible.
The only thing that can render white space natively is the draw_white_space setting, which at the moment only allows you to turn it off everywhere, turn it on everywhere, or turn it on only for selected text. In this case that doesn't really help.
There are possibilities for something like this in the plugin realm though (these examples can be tested by opening the Sublime console with View > Show Console or Ctrl+` and entering the code in there; they also assume that you're using the default Markdown syntax):
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", flags=sublime.DRAW_NO_FILL)
This will cause all of the hard line breaks to be outlined as if they were find results; the color is selected by the scope (which is comment here); that would make them visible without making the whole character position have a background color.
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", "dot", flags=sublime.HIDDEN)
This will add a dot (colored as a comment) in the gutter for lines that end with this scope; you can also combine this with the previous example to outline them and also call attention in the gutter.
style = '<style>.w { color: darkgray; }</style>'
content = '<body id="whitespace">' + style + '<span class="w">ยทยท</span></body>'
phantom_set = sublime.PhantomSet(view, "whitespace")
phantoms = [sublime.Phantom(r, content, sublime.LAYOUT_INLINE) for r in view.find_by_selector("punctuation.definition.hard-line-break.markdown")]
phantom_set.update(phantoms)
This uses Sublime's ability to apply inline HTML phantoms into the document in order to inject a small inline sequence of two unicode center dots immediately between the actual whitespace and the text that comes before it. Here the content can be what you like if you can generate the appropriate HTML; we're just applying a color to the text in this example.
A potential downside here is that the characters you see in the inline HTML aren't considered to be part of the document flow; the cursor will skip over them in one chunk, and they're followed by the actual whitespace.
The result of this example looks like this:
Going the plugin route, you'd need an event handler like on_load() to apply these when a file is loaded and on_modified() to re-update them after modifications are made to the buffer. There may or may not be a package that already exists that has implemented this.
I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.
Let's say that I have two Raster objects (or any other Holoviews object really). I can easily visualize one with appropriate color scaling, and I can do a layout to get both figures with the same scaling and coloring. What if I want to do two figures (e.g. because I need them on different pages), but with the same coloring and scaling so that the figures are comparable.
If there's no way to do this automatically, is there any way to access the relevant settings and then feed them manually to the second figure?
If you're using a notebook: The %opts line magic : IPython specific syntax applied globally [string format]http://holoviews.org/user_guide/Customizing_Plots.html and I think hv.opts works globally in script.
For both backends, you can do hv.renderer('bokeh').get_plot(your_element_variable).state (or replace bokeh with matplotlib) and get the original bokeh/matplotlib items.
Then you can use matplotlib's plt.getp() or bokeh's attribute calling (as I've done here https://github.com/ahuang11/holoext/blob/master/holoext/xbokeh.py#L501-L508) to get the base item's color/font/labels/etc.
Is there a nice and easy way to to have the functionality of lengthAdjust (together with textLength) for shrinking text if necessary (if too wide) but never attempting to stretch it?
Two possible solutions for a SVG generated through JS come to my mind:
Count characters (or rather grapheme clusters) and based on that (together with some heuristics unless a fixed-width size font is used) determine whether to set textLength or not.
First do it without textLength set and then determine using getBBox() whether the text needs some shrinking in which case textLength will be set.
Both solutions are IMHO quite ugly (and possibly buggy from my recollections of past encounters with getBBox()). Is there maybe some nicer solution I missed?
Have a look at this: https://stackoverflow.com/a/39886640/1925631
Essentially, make a path which spans the exact coordinates where you want to spread your text on a path. Measure this path. Then, measure how many pixels your text requires, with a font-size of 1px (and other desired font-features). Now adjust the font-size to fill your desired percentage of the available path advance width. Adjust start-offset and text-anchor. Now finally calculate your author specified textLength and choose a lengthAdjust value to get exact alignment on low precision / non-conformant renderers.
Finally, if you need to support viewers without text on a path rendering support, you can use a conformant viewer with javascript support to create a backwards compatible/fallback version. Render the content and use the SVG DOM api to fetch the x, y and rotate values for each character/glyph, now create a new SVG DOM representation with those attributes specified. You might need javascript to calculate absolute width and height for the root svg element as well, and a correctly specified viewBox, and cascade/resolve/convert all css selectors/rules/properties to inline attributes. But this way you can get cross-platform, cross-browser/viewer rendering of text, with a single compilation step per immutable source file version.
I've also made a gist to ease the last step, of resolving the css and removing all classNames, while preserving the rendered end-result: https://gist.github.com/msand/4b37d3ce04246f83cb28fdbfe4716ecc
This is for the purpose of a single universal svg + javascript codebase, and web+ios+android software development (based on react + react-native + react-native-svg)
When a chart is copied from Excel to PowerPoint, if the fonts on the Axis have been changed due to the style or theme applied in Excel, then they will normally change to be consistent with whichever theme is applied in PowerPoint (which is good). However, when the font (possibly formatting in general) has been overridden by a user, that the user specified font is the one used.
Writing code to detect what the default font is and apply it probably isn't that tricky, but I'd rather apply the theme font in a way that will match subsequent theme changes. Can anyone tell me how to do this?
I'm using C#, but am familiar with VBA and the object model is more or less identical in both, so approaches in either language should be fine.
After a little more digging, setting any font to a theme font looks like it can be accomplished by using the special font names comprised of:
+mj or +mn for heading or body fonts respectively
-lt, -ea, or -cs for latin, east asian, or complex script fonts respectively
So for my purposes, if I just assign all heading-like shapes' font properties to have font.name = "+mn-lt" then I accomplish what I need to, i.e. the font will match the theme and reflect subsequent theme changes.
NB that detecting whether this actually is already the case, since the font can be assigned either using the special font name or the actual font name, is a difficult problem (addressed elsewhere on SO). Thankfully, I don't have to worry too much about this...