Title: Interactive graph changes from many colors to black only when clicked on
Tags: r;r-highcharter;d3tree
Question: I create an interactive treemap based on the following code:
library(treemap)
library(devtools)
install_github(&quot;timelyportfolio/d3treeR&quot;)
library(d3treeR)
tm2 <- treemap(
dtf = mData_col,
index = c(&quot;GICS_SECTOR_NAME&quot;, &quot;Virk&quot;),
vSize = &quot;CUR_MKT_CAP_EUR&quot;,
vColor = &quot;myColors&quot;,
type = &quot;color&quot;
d3tree3(tm2 ,rootname = &quot;S&amp;P500&quot;)
The column &quot;myColors&quot; are created as follows: Each return gets an unique color going from red (negative returns) to green (positive returns):
myColors = paletteer_c(&quot;ggthemes75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0lassic Red-Green&quot;, length(bloomData$CURRENT_TRR_3MO))
Which yields:
So all the colours are perfect here. But when I zoom in it just turns black and white? Do you folks have any idea why?
Code that can replicate the data.frame that is used:
mData_col = structure(structure(
list(
SHORT_NAME = c(
&quot;VALEO&quot;,
&quot;AZEK CO INC/THE&quot;,
&quot;META PLATFORMS-A&quot;,
&quot;ALIGN TECHNOLOGY&quot;,
&quot;APTIV PLC&quot;,
&quot;PUMA SE&quot;,
&quot;INFINEON TECH&quot;,
&quot;GENERAL MOTORS C&quot;,
&quot;ING GROEP NV&quot;,
&quot;INTUITIVE SURGIC&quot;,
&quot;NIKE INC -CL B&quot;,
&quot;DSM (KONIN)&quot;,
&quot;MARVELL TECHNOLO&quot;,
&quot;SAP SE&quot;,
&quot;TJX COS INC&quot;,
&quot;DUFRY AG-REG&quot;,
&quot;SALESFORCE.COM&quot;,
&quot;QUALCOMM INC&quot;,
&quot;VOLVO AB-B&quot;,
&quot;LVMH MOET HENNE&quot;,
&quot;DSV A/S&quot;,
&quot;CHIPOTLE MEXICAN&quot;,
&quot;NVIDIA CORP&quot;,
&quot;VONOVIA SE&quot;,
&quot;PFIZER INC&quot;,
&quot;MICROSOFT CORP&quot;,
&quot;WALT DISNEY CO/T&quot;,
&quot;JPMORGAN CHASE&quot;,
&quot;GENMAB A/S&quot;,
&quot;BOOKING HOLDINGS&quot;,
&quot;NEXTERA ENERGY&quot;,
&quot;GENERAC HOLDINGS&quot;,
&quot;PRYSMIAN SPA&quot;,
&quot;PARKER HANNIFIN&quot;,
&quot;CTS EVENTIM AG &amp;&quot;,
&quot;NESTLE SA-REG&quot;,
&quot;NN GROUP&quot;,
&quot;ENGIE&quot;,
&quot;FISERV INC&quot;,
&quot;ALPHABET INC-C&quot;,
&quot;MONDELEZ INTER-A&quot;,
&quot;PROCTER &amp; GAMBLE&quot;,
&quot;ASSA ABLOY AB-B&quot;,
&quot;SEGRO PLC&quot;,
&quot;APPLE INC&quot;,
&quot;AMAZON.COM INC&quot;,
&quot;PEPSICO INC&quot;,
&quot;VESTAS WIND SYST&quot;,
&quot;ANHEUSER-BUSCH I&quot;,
&quot;ROCHE HLDG-GENUS&quot;,
&quot;VISA INC-CLASS A&quot;,
&quot;UNITEDHEALTH GRP&quot;,
&quot;DEUTSCHE TELEKOM&quot;,
&quot;ALLIANZ SE-REG&quot;,
&quot;ACCOR SA&quot;,
&quot;NOVO NORDISK-B&quot;,
&quot;ELI LILLY &amp; CO&quot;,
&quot;ARCELORMITTAL&quot;,
&quot;RWE AG&quot;,
&quot;PALO ALTO NETWOR&quot;,
&quot;SPIRIT AEROSYS-A&quot;,
&quot;CATERPILLAR INC&quot;,
&quot;UNION PAC CORP&quot;,
&quot;LONDON STOCK EX&quot;,
&quot;QUANTA SERVICES&quot;,
&quot;ADP&quot;,
&quot;MTU AERO ENGINES&quot;,
&quot;FREEPORT-MCMORAN&quot;,
&quot;EQUINOR ASA&quot;,
&quot;ANGLO AMER PLC&quot;,
&quot;CHEVRON CORP&quot;
),
CUR_MKT_CAP_EUR = c(
3780527961.885,
4559874262.35656,
646674588530.244,
39490654609.3844,
35145247442.3341,
11797503340.8,
40052601271.79,
71001155309.7512,
37529779767.352,
112826727606.333,
230784501073.123,
28114332764.65,
66361806122.4,
123784086416.32,
79964791616.5763,
3548992091.81653,
236896195140,
194785187002,
3900484756109.26,
323700881500.7,
319200000000,
47903113191.0745,
730064081840,
34131455246.55,
328495256039.221,
2499696636206.72,
279730539055.265,
461810736139.515,
155987116593,
98730280238.9059,
178321879754.243,
22655934082.8066,
8237391237.12,
40888681785.0338,
5761920000,
347755465944,
14120150088.2,
29466948633.0999,
71877512165.3115,
2030620676808.37,
93736663619.9131,
399235147815.955,
3098454597353.48,
13113870238.8599,
3021185669281.29,
1840157216728.19,
249319031613.142,
195106354632,
107928483456.85,
308256524005.963,
518559780489.195,
521384124570.439,
82914833534.288,
87062795629.95,
+1-279-619-7813.4,
1726956000000,
297658886513.073,
27885773600.155,
25094525981.28,
64520156416.0414,
5510386491.55821,
130876608687.381,
185682844126.015,
36530154218.6868,
20171088907.0297,
+1-279-619-7813.2,
11515468344,
79542301438.9622,
1039528147303.7,
39471875850.0022,
350444879702.601
),
GICS_SECTOR_NAME = c(
&quot;Consumer Discretionary&quot;,
&quot;Industrials&quot;,
&quot;Communication Services&quot;,
&quot;Health Care&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Information Technology&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Financials&quot;,
&quot;Health Care&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Materials&quot;,
&quot;Information Technology&quot;,
&quot;Information Technology&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Information Technology&quot;,
&quot;Information Technology&quot;,
&quot;Industrials&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Industrials&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Information Technology&quot;,
&quot;Real Estate&quot;,
&quot;Health Care&quot;,
&quot;Information Technology&quot;,
&quot;Communication Services&quot;,
&quot;Financials&quot;,
&quot;Health Care&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Utilities&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Communication Services&quot;,
&quot;Consumer Staples&quot;,
&quot;Financials&quot;,
&quot;Utilities&quot;,
&quot;Information Technology&quot;,
&quot;Communication Services&quot;,
&quot;Consumer Staples&quot;,
&quot;Consumer Staples&quot;,
&quot;Industrials&quot;,
&quot;Real Estate&quot;,
&quot;Information Technology&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Consumer Staples&quot;,
&quot;Industrials&quot;,
&quot;Consumer Staples&quot;,
&quot;Health Care&quot;,
&quot;Information Technology&quot;,
&quot;Health Care&quot;,
&quot;Communication Services&quot;,
&quot;Financials&quot;,
&quot;Consumer Discretionary&quot;,
&quot;Health Care&quot;,
&quot;Health Care&quot;,
&quot;Materials&quot;,
&quot;Utilities&quot;,
&quot;Information Technology&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Financials&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Industrials&quot;,
&quot;Materials&quot;,
&quot;Energy&quot;,
&quot;Materials&quot;,
&quot;Energy&quot;
),
CURRENT_TRR_3MO = c(
-41.4,
-39.8,
-35.4,
-30.1,
-27.2,
-26.7,-24.8,
-21.7,
-21.6,
-21.3,
-19.5,
-18.6,
-18.5,
-18.4,
-16.8,-13.8,
-13.8,
-13.4,
-13.2,
-12.5,
-11.6,
-10.9,
-10.5,
-10.1,-9,
-9,
-8.8,
-8.8,
-8.5,
-8.3,
-8.2,
-7.8,
-7.2,
-6.6,
-6.3,-6.3,
-6.1,
-6.1,
-4.8,
-4.7,
-4.7,
-4.6,
-4.6,
-4.4,
-4.1,-3.6,
-2.6,
-1.3,
-0.4,
0.3,
1,
2.3,
2.6,
3,
3.2,
3.4,
4.8,
4.8,
5.8,
6.3,
8.2,
8.5,
8.7,
12.3,
15.3,
17,
18.2,
21.6,
31.9,
33.2,
42.4
),
Virk = c(
&quot;VALEO (-41.4%)&quot;,
&quot;AZEK CO INC/THE (-39.8%)&quot;,
&quot;META PLATFORMS-A (-35.4%)&quot;,
&quot;ALIGN TECHNOLOGY (-30.1%)&quot;,
&quot;APTIV PLC (-27.2%)&quot;,
&quot;PUMA SE (-26.7%)&quot;,
&quot;INFINEON TECH (-24.8%)&quot;,
&quot;GENERAL MOTORS C (-21.7%)&quot;,
&quot;ING GROEP NV (-21.6%)&quot;,
&quot;INTUITIVE SURGIC (-21.3%)&quot;,
&quot;NIKE INC -CL B (-19.5%)&quot;,
&quot;DSM (KONIN) (-18.6%)&quot;,
&quot;MARVELL TECHNOLO (-18.5%)&quot;,
&quot;SAP SE (-18.4%)&quot;,
&quot;TJX COS INC (-16.8%)&quot;,
&quot;DUFRY AG-REG (-13.8%)&quot;,
&quot;SALESFORCE.COM (-13.8%)&quot;,
&quot;QUALCOMM INC (-13.4%)&quot;,
&quot;VOLVO AB-B (-13.2%)&quot;,
&quot;LVMH MOET HENNE (-12.5%)&quot;,
&quot;DSV A/S (-11.6%)&quot;,
&quot;CHIPOTLE MEXICAN (-10.9%)&quot;,
&quot;NVIDIA CORP (-10.5%)&quot;,
&quot;VONOVIA SE (-10.1%)&quot;,
&quot;PFIZER INC (-9%)&quot;,
&quot;MICROSOFT CORP (-9%)&quot;,
&quot;WALT DISNEY CO/T (-8.8%)&quot;,
&quot;JPMORGAN CHASE (-8.8%)&quot;,
&quot;GENMAB A/S (-8.5%)&quot;,
&quot;BOOKING HOLDINGS (-8.3%)&quot;,
&quot;NEXTERA ENERGY (-8.2%)&quot;,
&quot;GENERAC HOLDINGS (-7.8%)&quot;,
&quot;PRYSMIAN SPA (-7.2%)&quot;,
&quot;PARKER HANNIFIN (-6.6%)&quot;,
&quot;CTS EVENTIM AG &amp; (-6.3%)&quot;,
&quot;NESTLE SA-REG (-6.3%)&quot;,
&quot;NN GROUP (-6.1%)&quot;,
&quot;ENGIE (-6.1%)&quot;,
&quot;FISERV INC (-4.8%)&quot;,
&quot;ALPHABET INC-C (-4.7%)&quot;,
&quot;MONDELEZ INTER-A (-4.7%)&quot;,
&quot;PROCTER &amp; GAMBLE (-4.6%)&quot;,
&quot;ASSA ABLOY AB-B (-4.6%)&quot;,
&quot;SEGRO PLC (-4.4%)&quot;,
&quot;APPLE INC (-4.1%)&quot;,
&quot;AMAZON.COM INC (-3.6%)&quot;,
&quot;PEPSICO INC (-2.6%)&quot;,
&quot;VESTAS WIND SYST (-1.3%)&quot;,
&quot;ANHEUSER-BUSCH I (-0.4%)&quot;,
&quot;ROCHE HLDG-GENUS (0.3%)&quot;,
&quot;VISA INC-CLASS A (1%)&quot;,
&quot;UNITEDHEALTH GRP (2.3%)&quot;,
&quot;DEUTSCHE TELEKOM (2.6%)&quot;,
&quot;ALLIANZ SE-REG (3%)&quot;,
&quot;ACCOR SA (3.2%)&quot;,
&quot;NOVO NORDISK-B (3.4%)&quot;,
&quot;ELI LILLY &amp; CO (4.8%)&quot;,
&quot;ARCELORMITTAL (4.8%)&quot;,
&quot;RWE AG (5.8%)&quot;,
&quot;PALO ALTO NETWOR (6.3%)&quot;,
&quot;SPIRIT AEROSYS-A (8.2%)&quot;,
&quot;CATERPILLAR INC (8.5%)&quot;,
&quot;UNION PAC CORP (8.7%)&quot;,
&quot;LONDON STOCK EX (12.3%)&quot;,
&quot;QUANTA SERVICES (15.3%)&quot;,
&quot;ADP (17%)&quot;,
&quot;MTU AERO ENGINES (18.2%)&quot;,
&quot;FREEPORT-MCMORAN (21.6%)&quot;,
&quot;EQUINOR ASA (31.9%)&quot;,
&quot;ANGLO AMER PLC (33.2%)&quot;,
&quot;CHEVRON CORP (42.4%)&quot;
),
myColors = c(
&quot;#9C0824FF&quot;,
&quot;#A10A22FF&quot;,
&quot;#A50B21FF&quot;,
&quot;#AA0D1FFF&quot;,
&quot;#AF0E1DFF&quot;,
&quot;#B4101BFF&quot;,
&quot;#B81118FF&quot;,
&quot;#BD1316FF&quot;,
&quot;#C01416FF&quot;,
&quot;#C31417FF&quot;,
&quot;#C61517FF&quot;,
&quot;#C81518FF&quot;,
&quot;#CB1618FF&quot;,
&quot;#CE1619FF&quot;,
&quot;#D11719FF&quot;,
&quot;#D3241FFF&quot;,
&quot;#D52D24FF&quot;,
&quot;#D73629FF&quot;,
&quot;#D93D2FFF&quot;,
&quot;#DB4434FF&quot;,
&quot;#DD4B3AFF&quot;,
&quot;#DF513FFF&quot;,
&quot;#E35847FF&quot;,
&quot;#E8604EFF&quot;,
&quot;#EC6756FF&quot;,
&quot;#F06E5DFF&quot;,
&quot;#F47565FF&quot;,
&quot;#F87C6DFF&quot;,
&quot;#FC8375FF&quot;,
&quot;#F78E81FF&quot;,
&quot;#F2998DFF&quot;,
&quot;#ECA399FF&quot;,
&quot;#E5ADA5FF&quot;,
&quot;#DDB7B1FF&quot;,
&quot;#D4C1BDFF&quot;,
&quot;#CACACAFF&quot;,
&quot;#C5C9C2FF&quot;,
&quot;#BFC8B9FF&quot;,
&quot;#B9C6B1FF&quot;,
&quot;#B4C5A8FF&quot;,
&quot;#AEC4A0FF&quot;,
&quot;#A8C297FF&quot;,
&quot;#A2C18FFF&quot;,
&quot;#9ABD88FF&quot;,
&quot;#92BA82FF&quot;,
&quot;#8AB67BFF&quot;,
&quot;#82B275FF&quot;,
&quot;#7AAE6EFF&quot;,
&quot;#71AB67FF&quot;,
&quot;#69A761FF&quot;,
&quot;#62A35CFF&quot;,
&quot;#5AA058FF&quot;,
&quot;#529C53FF&quot;,
&quot;#4A994FFF&quot;,
&quot;#42954AFF&quot;,
&quot;#399246FF&quot;,
&quot;#2F8E41FF&quot;,
&quot;#2D8B3FFF&quot;,
&quot;#2A873EFF&quot;,
&quot;#28843CFF&quot;,
&quot;#25813AFF&quot;,
&quot;#237D38FF&quot;,
&quot;#207A37FF&quot;,
&quot;#1E7735FF&quot;,
&quot;#1B7433FF&quot;,
&quot;#197132FF&quot;,
&quot;#166E30FF&quot;,
&quot;#136B2FFF&quot;,
&quot;#10682DFF&quot;,
&quot;#0D652CFF&quot;,
&quot;#09622AFF&quot;
class = &quot;data.frame&quot;,
row.names = c(
9L,
49L,
2L,
37L,
17L,
11L,
55L,
15L,
27L,
36L,
12L,
64L,
56L,
60L,
14L,
8L,
53L,
59L,
51L,
10L,
38L,
16L,
62L,
68L,
33L,
57L,
5L,
25L,
32L,
13L,
71L,
45L,
50L,
44L,
4L,
20L,
29L,
69L,
54L,
1L,
22L,
18L,
41L,
67L,
52L,
6L,
21L,
39L,
19L,
35L,
61L,
31L,
3L,
26L,
7L,
30L,
34L,
65L,
70L,
58L,
46L,
43L,
42L,
28L,
47L,
40L,
48L,
66L,
24L,
63L,
23L
Comment: Hi @Nuller, could you please share your (sample) data using `dput(data)`?

Comment: @Quinten - I have commented the dput data in this post. Didnt know the dput function! Neat! Thanks.

Comment: @Quinten and the requried packages are also edited in now.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:03/24/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<r><r-highcharter><d3tree>', 'Title': 'Interactive graph changes from many colors to black only when clicked on', 'ViewCount': 46, 'id': 71598777, 'user_AboutMe': None, 'user_AccountId': 23168757.0, 'user_DisplayName': 'Nuller', 'user_Reputation': 89.0, 'user_Views': 13.0, 'user_id': 17268291.0}}