Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

override the predefined colors #139

Open
nalhadad opened this issue Nov 19, 2019 · 2 comments
Open

override the predefined colors #139

nalhadad opened this issue Nov 19, 2019 · 2 comments

Comments

@nalhadad
Copy link

Hello,
In d3plus V1, for a TreeMap, I used to define arrays of colors that I use in the treeMap depending on my skin. I just needed to put this array in the .color() and my TreeMap takes these colors automaticlly like the following example

<script charset="UTF-8" src="http://www.d3plus.org/js/d3.js"></script> <script charset="UTF-8" src="http://www.d3plus.org/js/d3plus.js"></script>
<script type='text/javascript'> var sample_data=[{"LivraisonPays":"Argentina" , "year":2015 , "Prix":3 }, {"LivraisonPays":"Argentina" , "year":2022 , "Prix":81 }, {"LivraisonPays":"Argentina" , "year":2014 , "Prix":81 }, {"LivraisonPays":"Argentina" , "year":2022 , "Prix":264 }, {"LivraisonPays":"France" , "year":2022 , "Prix":27 }, {"LivraisonPays":"France" , "year":2012 , "Prix":27 }, {"LivraisonPays":"France" , "year":2016 , "Prix":28 }, {"LivraisonPays":"France" , "year":2017 , "Prix":28 }, {"LivraisonPays":"France" , "year":2012 , "Prix":28 }, {"LivraisonPays":"Austria" , "year":2013 , "Prix":14 }, {"LivraisonPays":"Austria" , "year":2015 , "Prix":15 }, {"LivraisonPays":"Austria" , "year":2015 , "Prix":34 }, {"LivraisonPays":"Austria" , "year":2021 , "Prix":35 }, {"LivraisonPays":"Austria" , "year":2022 , "Prix":36 } ]; var visualization = d3plus.viz() .container("#viz") .data(sample_data) .type("tree_map") .id(["LivraisonPays","year"]) .size("Prix") .color({"heatmap": [ '#BFEFFF','#104E8B'],"missing" : "black"}) .color({"range": [ '#00CDCD','#FFFFFF','#0023fa'],"missing" :"black"}) .color({"scale": [ '#BFEFFF','#ADD8E6','#33A1C9','#009ACD','#00B2EE','#87CEFF','#87CEFA','#4F94CD','#5CACEE','#63B8FF','#4682B4','#1874CD','#C6E2FF','#1E90FF'],"missing" :"black"}) .depth(0) .labels({ "align": "left", "valign": "top" }) .background( "#FFFFFF" ) .font ({"family":"Times","decoration":"none"}) .legend(false) .mouse({ "move":false}) .draw() </script>

I can't find a way to use my arrays of predefined colors in V2. I can see that we can use functions but this isn't what I need. I need to override ur predefined colors for a treemap or a Pie.
Can I do that in V2?

Thank you very much.

@davelandry
Copy link
Member

let me know if this example helps: http://d3plus.org/examples/d3plus-hierarchy/custom-color/

@nalhadad
Copy link
Author

Hello,
I am trying to override your predefined colors in a pie/treemap. I need to use my own set of colors. My set of Colors are NOT RELATED TO THE DATA. I just need that the Treemap/Pie take my colors instead of your default colors.
I tried to create a JS in the shapeConfig. You find My example here : https://jsfiddle.net/ubxLemfy/
It works but the legend donesn't correspond to the colors in the Treeamp/Pie, in my example, sweden is red in the pie while it is purple in the legend.
Am I doing somethig wrong? is there another way to do it?
In version 1 I just needed to add
.color({"scale": [ Array of Colors]})

@davelandry davelandry transferred this issue from d3plus/d3plus-color Dec 13, 2019
@davelandry davelandry changed the title TreeMap: override the predefined colors override the predefined colors Dec 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants