Hi!

The group focus indicator isn't great (especially for scatter, line, and clustered bars).

I'm talking about this:

I've got a suggested solution: filters. You're already using them for text and geometries - it's the dual-outline strategy (and white outline on text). We can use that same strategy to create some great looking group focus indicators. On focus, you'd apply the filter to a special group appended at the end of the chart (the group doesn't need to be appended on focus, just change the href values).

This "top" group contains <use> elements, which simply reference the group or element you want to duplicate:

Like this:

<g filter="url(#VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision)">
    <use href=""></use>
    <use href=""></use>
</g>

Here's what it would look like if you group stuff up like this and apply a filter to the group:

The code for the filter looks like this:

<filter id="VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision" class="VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision">
    <feMorphology in="SourceAlpha" result="dilatedText" operator="dilate" radius="10"></feMorphology>
    <feFlood flood-color="#ffffff" flood-opacity="1" result="whiteTextFlood"></feFlood>
    <feComposite in="whiteTextFlood" in2="dilatedText" operator="in" result="textOutline"></feComposite>

    <feMorphology in="SourceAlpha" result="dilatedBlack" operator="dilate" radius="11.5"></feMorphology>
    <feFlood flood-color="#000" flood-opacity="1" result="blackFlood"></feFlood>
    <feComposite in="blackFlood" in2="dilatedBlack" operator="in" result="blackOutline"></feComposite>

    <feMerge>
        <feMergeNode in="blackOutline"></feMergeNode>
        <feMergeNode in="textOutline"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

You can obviously change the radius values to whatever:

Here are some examples:

Of course, you can just show the filter effect on only the geometry group if you want, just don't add a <use> element for the text:

And for line, you have 3 elements (line, dot group, text):

I think this is quite an aesthetic improvement and also improves accessibility. The bounding-box style focus indicator just isn't great (I wonder who designed that...).

(Oh, and as a note: when we hover and get that dotted line effect? The components are currently accomplishing this with filters and fill effects on a duplicated element. It would actually be an improvement to copy my above solution and have a <g> element that contains <use> elements here too, and you just have to update the reference id (and add the fancy fill/filter effects to the <use> element). It's not a big deal, since the current system works. But this reduces render/draw time and only requires a paint update instead.)

When I attempt to build the packages initially for the monorepo with the yarn dev --b command, the computer becomes unresponsive. I'm wondering if this is specific to me, or if it does happen to others as well?! I know the note says that the initial build might take some time...

There's a malicious ua-parser-js NPM takeover, safe ua-parser-js version is 0.7.30.

Security advisory: GHSA-pjwm-rvh2-c87w
GH thread: faisalman/ua-parser-js#536

The frequency values in the final Alluvial html file are missing. This issue can be replicated by viewing the Alluvial chart provided by the package's code sample.

Do to distributed denials of service I have not received immediately my open source requested cards .These corporate syndicated affiliates are committing espionage and cyber terrorism while committed international banking fraud, medical malpractice,and espionage.[](10.81.52.53 2600:380:5652:1b62:7af1:37b4:2579:3240) ``

[email protected]

The readme for barchart points to the color utility file using this link:
https://github.com/visa/visa-chart-components/blob/master/packages/utils/src/colors.ts

It should point either to this location in the util's readme:
https://github.com/visa/visa-chart-components/tree/master/packages/utils#colors

Or it should point to the file it intended to (one level deeper):
https://github.com/visa/visa-chart-components/blob/master/packages/utils/src/utils/colors.ts

The screenshot in the documentation for accessibility descriptions shows the old keyboard navigation instructions/description overlay. A new strategy should probably be employed here (since the keyboard instructions are their own component now).

https://github.com/visa/visa-chart-components/tree/master/packages/utils#accessibilityDescriptions

You cannot save an object of class visaNodeLinkChart as a self-contained html file using the saveWidget function from the htmltools pkg; is there a reason for this? I know there are several js-based files that drive the creation of the plot, but it would really be nice if there was a way to save an object of class visaNodeLinkChart as a self-contained html file.

Considering the @visa/charts-angular package was built in angular 14 and updates since then have broken the components in angular 16.

No matter what chart I use from the package I get these errors in the console.

Pie Chart: Value (%) label not being read by screenreaders

To replicate:
-Turn on screenreader (voiceover/chrome/mac or NVDA/Chrome/Win11)

• Go to piechart example: https://visa.github.io/visa-chart-components/?path=/story/pie-chart--default#storybook-preview-wrapper
• Navigate to piechart slice
• Note that Value(%) value is not read out by screen readers

Thanks for sharing this great work!

I love how the Visa Chart Components incorporate best practices for accessibility, e.g. always provide a table representation of the data. But as soon as the components are used for inference rather than description, VCC lacks a good way to visualize the dispersion of data, e.g. via confidence intervals around point estimates. This could be implemented as error bars around bar charts or bands/ribbons around line charts.

Providing information about the variance / standard error besides a variable's mean is considered best practice in the communication of statistical results and I would love to see that implemented for VCC.

It is not clear how to change the colorization of the Alluvial streams in an Alluvial chart. Can you provide additional documentation code specific to chart colorization, and more specifically, an Alluvial chart?s? Code samples should be specific, not just a reference made to a general argument list. If it is not possible to change the color, would you consider adding an argument to change alluvial color streams?

The annotations section of the utils readme is okay: https://github.com/visa/visa-chart-components/tree/master/packages/utils#annotations

But the util has a specific feature (that you can add/subtract using nested arrays) that is not documented anywhere.
This example is powerful and custom to the annotation util wrapper that is built into VCC (Susie Lu's documentation will not teach this feature): x: [["category1"],["category2]]

(That example will calculate the pixel value of category2 and subtract it from the calculated pixel value of category1.)

Not only that, but the only explanation of the special features of the util are shown in comments in the example code snippet. It would be nice if there was a table that shows valid things that could be passed to each property (and which properties take precedence over others, such as x: versus data:).

In addition to this missing piece of documentation in the utils, the documentation in each component only points to d3-annotation by Susie Lu. It does not point to the utils doc (which has additional examples).
Bar chart: https://github.com/visa/visa-chart-components/tree/master/packages/bar-chart#annotation-props

If you want to install the @visa/charts-react library with the latest create-react-app, you get an upstream dependency conflict. I assume that the create-react-app is using [email protected] while your library is using [email protected].

Upon trying to install charts-react with the legacy-peer-deps flag the installation works perfectly.

I wont to include your npm modules directly as esm but your package json is wrong.

the export: "module" points to "dist/index.js"
wich has this code:

  export * from './esm-es5/index.js'; 

but the index.js in esm-es5 is empty

Could you please take a look at this issue?

[Open Browser Console for more detailed log - Double click to close this message]
Model class 'ChartModel' from module '@visa/charts-python' is loaded but can not be instantiated
TypeError: i._deserialize_state is not a function
at tn._make_model ()