898 #920

Ronit0104123 · 2025-02-27T18:52:37Z

Description

Related issue

#898

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.

Ronit0104123 · 2025-02-27T18:55:14Z

I have created this draft PR, the code currently is working for line and pie chart. I am working to make it work for treemaps also.

dpgiakatos · 2025-03-05T06:12:33Z

Hello, do you have any updates on this PR?

Ronit0104123 · 2025-03-06T05:14:22Z

Thank you for reaching out! I wanted to provide an update, I’ve been in the middle of my exams, so I haven’t been able to give this PR my full attention. My exams will be over by March 8, and I’m looking forward to resuming work on it soon after.
Let me know if there’s anything urgent I should prioritize. Thanks for your patience!

dpgiakatos · 2025-03-06T05:18:19Z

No worries, just confirming that you are still working on this. This PR is not urgent. Good luck with your exams.

dpgiakatos · 2025-03-14T07:41:00Z

Hello @Ronit0104123, sorry for pinging, but we are planning to have a new release soon. I want to check if there is any progress on this PR.

dpgiakatos

Please address my inline comments. Thanks.

src/components/charts/ReactiveChart.vue

dpgiakatos · 2025-03-14T08:24:32Z

src/components/charts/ReactiveChart.vue

+  default: [
+    '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', 
+    '#8c564b', '#e377c2','#7f7f7f','#bcbd22', '#17becf'
+  ],


Delete these lines. We do not need them as the colors are reset in lines 178-180.

Ronit0104123 · 2025-03-15T09:11:11Z

I was working on ensuring adjacent nodes have distinct colors, but due to different screen sizes, their positions change dynamically. I also noticed that trace.ids is not arranged in ascending order of percentages but appears randomly, which further affects color distribution. I see two possible approaches (1) Expanding the color palette for each CVD type or (2) Modifying the implementation so that once all colors are used, the next cycle uses lighter shades of the same colors. However, I’m unsure if lighter shades would still be distinguishable for people with color vision deficiencies. Would love to hear your thoughts on this.

dpgiakatos · 2025-03-15T12:05:06Z

If using lighter shades of the same colors does not create conflicts, then we should do this. Otherwise, we have to expand the color palette. To check palette conflicts, you can use the following link: https://projects.susielu.com/viz-palette

Ronit0104123 · 2025-03-16T17:55:57Z

The lighter shades of the same colors conflict, so I am thinking of expanding the color palette. I am finding the right non-conflicting colors for each CVD using a viz-palette.
Would you have any recommendations or best practices for selecting additional distinct, CVD-safe colors that avoid conflicts?

dpgiakatos · 2025-03-17T01:56:41Z

When I created the proposed color palettes, I used the following resource:
https://www.disabled-world.com/disability/accessibility/websitedesign/color-spectrum-chart.php#hex

I recommend using the same one to select the rest of the color codes. After selecting them, you can then use the viz-palette tool to check for conflicts. If it is impossible to avoid conflicts entirely, then I think it will be okay to have a few minor color conflicts.

Thanks.

Ronit0104123 · 2025-03-17T07:20:06Z

Okay. Yes, will need to select some colors with minor color conflicts. How many colors for each CVD must I add to the palette?

dpgiakatos · 2025-03-17T07:28:09Z

I guess we need around 10 more colors in each palette. Be sure to keep the same cycle form for the colors, like the current palette, for example:

Correct: ..., yellow1, blue1, yellow2, etc.
Wrong: ..., yellow1, blue1, blue2, etc.

dpgiakatos · 2025-03-17T08:36:19Z

src/components/charts/ReactiveChart.vue

+    displayModeBar: true,
+    modeBarButtonsToAdd: [{
+      name: 'cvd-dropdown',
+      title: 'Toggle CVD Colors',


Replace title: 'Toggle CVD Colors', with: title: 'CVD Palette',

dpgiakatos · 2025-03-17T08:36:38Z

src/components/charts/ReactiveChart.vue

+    modeBarButtonsToAdd: [{
+      name: 'cvd-dropdown',
+      title: 'Toggle CVD Colors',
+      icon: Plotly.Icons.pencil,


Replace icon: Plotly.Icons.pencil, with:

icon: { svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>' },

dpgiakatos · 2025-03-17T08:37:49Z

I added two more inline comments regarding the icon.

Ronit0104123 · 2025-03-17T13:24:46Z

I’ve created this color palette for Protanopia, ensuring minimal color conflicts. I tested many other colors but they were conflicting for larger areas.

Viz Palette

Would this palette work effectively for Protanopia? I'd appreciate your feedback on any improvements or adjustments needed.

dpgiakatos · 2025-03-18T01:42:10Z

I checked the colors, and this conflict level is acceptable. I refined them and reordered them, and you can find them here:

protanopia: [
    '#ffe41c', '#aabdff', '#3c360f', '#c8b317', '#19376a',
    '#8f8c8b', '#d7c997', '#648ceb', '#505b80', '#7e711b',
    '#000000', '#0060c7', '#a18e21', '#bbb3a4', '#c7ccee',
    '#ffefb1', '#8e91a7', '#686566', '#4a4100', '#0079fc'
  ],

You can continue with the other two categories. For deuteranopia, you can use the viz-report again. For tritanopia, you will have to do it empirically using the following tool: https://www.tools366.com/tool/color-blindness-converter. If anything is unclear, please let me know. Thanks.

dpgiakatos · 2025-03-18T07:44:22Z

If you have to reorder protanopia palette (the one I provided above) to avoid cases where blocks that are next to each other can have the same code color, feel free to do it.

Ronit0104123 · 2025-03-20T17:54:08Z

Hi,
I have created a viz palette report for deuteranopia and a color palette for tritanopia.

For Deuteranopia - viz-palette for deuteranopia

For Tritanopia,

'#fd6e74', '#cbefff', '#bfa9b6', '#cc1600', '#228791',
'#67656c', '#660b00', '#79eeff', '#173033', '#ffc0cd',
'#32cd32', '#ff4500', '#20b2aa', '#ff00ff', '#6a5acd',
'#d2691e', '#9932cc', '#8fbc8f', '#da70d6', '#8a2be2'

I haven't finalized the order yet but wanted to confirm first if the color conflicts are acceptable. Let me know your thoughts!

dpgiakatos · 2025-03-21T01:34:23Z

Hello, I checked the colors, below I have refined them, but they are unordered. Please adjust the order.

deuteranopia: [
    '#ffd592', '#b0bcf9', '#c09300', '#679bf2', '#ffeafd',
    '#f6c600', '#918694', '#674f00', '#253d60', '#6f6367',
    '#000000', '#557dc2', '#ddb69e', '#987648', '#004b84',
    '#bab4d9', '#0068b5', '#423100', '#cfa36c', '#8894ca',
  ],

tritanopia: [
    '#fd6e74', '#cbefff', '#bfa9b6', '#cc1600', '#228791',
    '#67656c', '#660b00', '#79eeff', '#173033', '#ffc0cd',
    '#67becd', '#ff4346', '#36aebb', '#ed656c', '#4d717a',
    '#d46269', '#845c63', '#98b3c2', '#cf818b', '#6a6168'
  ]

Thank you.

Ronit0104123 · 2025-03-21T05:56:50Z

Hi,
I have ordered the color palettes for each CVD. For tritanopia, the order was already well-structured, so I didn’t make any changes. Below are the finalized palettes:

protanopia: [
    '#ffe41c', '#aabdff', '#3c360f', '#c8b317', '#19376a',
    '#8f8c8b', '#d7c997', '#648ceb', '#505b80', '#7e711b',
    '#000000', '#0060c7', '#a18e21', '#bbb3a4', '#c7ccee',
    '#ffefb1', '#4a4100', '#8e91a7', '#0079fc', '#686566'
  ],

deuteranopia: [
    '#ffd592', '#b0bcf9', '#c09300', '#679bf2', '#ffeafd',
    '#f6c600', '#918694', '#674f00', '#253d60', '#6f6367',
    '#557dc2', '#ddb69e', '#004b84', '#987648', '#000000',
    '#bab4d9', '#0068b5', '#423100', '#cfa36c', '#8894ca'
  ],

tritanopia: [
    '#fd6e74', '#cbefff', '#bfa9b6', '#cc1600', '#228791',
    '#67656c', '#660b00', '#79eeff', '#173033', '#ffc0cd',
    '#67becd', '#ff4346', '#36aebb', '#ed656c', '#4d717a',
    '#d46269', '#845c63', '#98b3c2', '#cf818b', '#6a6168'
  ]

Let me know if any further refinements are needed. Thanks!

dpgiakatos · 2025-03-21T07:19:31Z

Ok, you can proceed with the code implementation. Thanks.

Ronit0104123 · 2025-03-21T08:16:50Z

I've submitted the PR. Please have a look when you get a chance. Thanks!

dpgiakatos

Thanks

Ronit0104123 added 2 commits February 20, 2025 18:55

Added CVD button in plotly

9267444

Added CVD support for pie and line chart

6db228c

Updated code for treemap color issue

06cb129

Ronit0104123 marked this pull request as ready for review March 14, 2025 07:48

dpgiakatos self-requested a review March 14, 2025 07:51

dpgiakatos requested changes Mar 14, 2025

View reviewed changes

dpgiakatos reviewed Mar 17, 2025

View reviewed changes

dpgiakatos mentioned this pull request Mar 17, 2025

New CVD palette for plotly: achromatopsia #940

Closed

Updated color palettes for each CVD

b747a1e

dpgiakatos self-requested a review March 25, 2025 10:07

dpgiakatos approved these changes Mar 26, 2025

View reviewed changes

dpgiakatos merged commit 58249c5 into InternetHealthReport:master Mar 26, 2025
5 of 6 checks passed

dpgiakatos mentioned this pull request Mar 26, 2025

Add Support for Heatmap Plot Type in CVD Palette Feature #950

Closed

Ronit0104123 deleted the 898 branch March 26, 2025 13:29

898 #920

898 #920

Uh oh!

Conversation

Ronit0104123 commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Ronit0104123 commented Feb 27, 2025

Uh oh!

dpgiakatos commented Mar 5, 2025

Uh oh!

Ronit0104123 commented Mar 6, 2025

Uh oh!

dpgiakatos commented Mar 6, 2025

Uh oh!

dpgiakatos commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dpgiakatos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dpgiakatos Mar 14, 2025

Choose a reason for hiding this comment

Uh oh!

Ronit0104123 commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dpgiakatos commented Mar 15, 2025

Uh oh!

Ronit0104123 commented Mar 16, 2025

Uh oh!

dpgiakatos commented Mar 17, 2025

Uh oh!

Ronit0104123 commented Mar 17, 2025

Uh oh!

dpgiakatos commented Mar 17, 2025

Uh oh!

dpgiakatos Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dpgiakatos Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dpgiakatos commented Mar 17, 2025

Uh oh!

Ronit0104123 commented Mar 17, 2025

Uh oh!

dpgiakatos commented Mar 18, 2025

Uh oh!

dpgiakatos commented Mar 18, 2025

Uh oh!

Ronit0104123 commented Mar 20, 2025

Uh oh!

dpgiakatos commented Mar 21, 2025

Uh oh!

Ronit0104123 commented Mar 21, 2025

Uh oh!

dpgiakatos commented Mar 21, 2025

Uh oh!

Ronit0104123 commented Mar 21, 2025

Uh oh!

dpgiakatos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Ronit0104123 commented Feb 27, 2025 •

edited

Loading

dpgiakatos commented Mar 14, 2025 •

edited

Loading

Ronit0104123 commented Mar 15, 2025 •

edited

Loading

dpgiakatos Mar 17, 2025 •

edited

Loading

dpgiakatos Mar 17, 2025 •

edited

Loading