Skip to content

Instantly share code, notes, and snippets.

@sleamer

sleamer/golden_munsell_hue.csv

Last active August 29, 2015 14:08
Show Gist options
  • Save sleamer/3094380436ef943fbf9a to your computer and use it in GitHub Desktop.
Save sleamer/3094380436ef943fbf9a to your computer and use it in GitHub Desktop.
Download ZIP
Munsell chart for Golden Acrylics
Raw
golden_munsell_hue.csv
COLOR NAME HUE FAMILY HUE BIAS VALUE CHROMA
Violet Oxide YR 0.5 2.75 5.5
CP Cadmium Orange YR 2 6.25 17.5
Burnt Sienna YR 3 3.25 4
Mars Yellow YR 3.5 4.5 7.7
Transparent Red Iron Oxide YR 5 2.5 6
Quinacridone Gold YR 6 2.5 5.5
Burnt Umber Light YR 8 3 1.6
Transparent Yellow Iron Oxide YR 8 4.5 6
Diarylide Yellow YR 8 7 15.8
Burnt Umber YR 9 2.5 1
Raw Sienna YR 9 4.5 6.6
Orange Oxide YR 9 5.25 7.7
CP Cadmium Yellow Dark YR 9 7.75 16.5
Yellow Ochre YR 9.5 5 8.8
Yellow Oxide Y 1.5 6 8.4
Cadmium Yellow Medium Hue Y 1.5 8 13.7
Hansa Yellow Light Y 10 8.25 13.8
Titanate Yellow Y 10 8.5 8.6
CP Cadmium Yellow Primrose Y 10 9 16
Hansa Yellow Medium Y 2 7.75 16.8
Raw Umber Y 3 2.5 1.3
CP Cadmium Yellow Medium Y 3 8 16.1
Nickel Azo Yellow Y 3.5 4.75 9
Titan-Buff Y 4.5 8.25 2.8
Primary Yellow Y 4.6 8.6 13
Hansa Yellow Opaque Y 5 8 16
N7 Neutral Gray Y 5.3 7 0.1
N8 Neutral Gray Y 6.2 7.9 0.1
N5 Neutral Gray Y 8.3 5.1 0
N6 Neutral Gray Y 8.3 6.1 0.1
CP Cadmium Yellow Light Y 8.5 8.75 16
Light Green (Blue Shade) GY 10 6.2 12
Chromium Oxide Green GY 9 4 4.6
Jenkins Green GY 8 1.5 2.4
Light Green (Yellow Shade) GY 8 7.2 11.8
Green Gold GY 2 4.25 7.3
Cobalt Titanate Green G 1.5 5.75 8
Cobalt Green G 10 3 5.5
Permanent Green Light G 4 3.75 12
Phthalo Green YS G 5 1.75 5.4
Light Turquois (Phthalo) BG 1 5 10.4
Cobalt Turquois BG 10 3.75 7.8
Turquois (Phthalo) BG 5 1.25 2.6
Phthalo Green BS BG 5 1.25 5
Cobalt Teal BG 9 5.5 8
N4 Neutral Gray B 8.2 4.2 0
Cerulean Blue PB 1 4 7.6
Cerulean Blue Deep PB 1.2 3 7.9
Light Ultramarine Blue PB 3 6.3 7.9
Paynes Gray PB 4 1.75 0.6
Cobalt Blue Hue PB 4 3.2 8.3
N2 Neutral Gray PB 4.6 2.8 0.1
Primary Cyan PB 5.4 3.2 8.4
Cobalt Blue PB 6 3 11
Phthalo Blue GS PB 7 1.25 6.5
Anthraquinone Blue PB 7.5 1.25 3.3
Phthalo Blue RS PB 7.5 1.25 6
Ultramarine Blue PB 8 2 4.5
Light Violet PB 9 4.9 7.7
N3 Neutral Gray P 6.3 3.5 0
Dioxazine Purple P 2.5 1 0.5
Ultramarine Violet P 2.5 2.5 2
Medium Violet P 2.5 2.7 7.5
Quinacridone Violet RP 10 2.5 8
Light Magenta RP 10 7 8
Quinacridone Magenta RP 10 2.5 10
Permanent Violet Dark RP 3 1.5 3
Medium Magenta RP 3 4.8 11.6
Quinacridone Burnt Orange R 10 2 6
Red Oxide R 10 3 7.8
Vat Orange R 10 5.25 15.3
Quinacridone Crimson R 2.5 2 6
Quinacridone Red R 2.5 3.25 12
Primary Magenta R 4.6 4.1 11.4
Naphthol Red Medium R 5.1 3.6 9.9
Quinacridone Red Light R 6 4 10.9
CP Cadmium Red Dark R 6 4 14
Pyrrole Red R 6.5 4.25 17
CP Cadmium Red Medium R 7 4.25 16
Naphthol Red Light R 7 4.25 17
Transparent Pyrrole Orange R 7.4 4.6 13.1
Pyrrole Red Light R 8 4.25 17
Cadmium Red Medium Hue R 9 3.7 13.4
CP Cadmium Red Light R 9 5.25 15.9
Pyrrole Orange R 9 5 18
Carbon Black Black Black 1 0.3
Bone Black Black Black 1 0.5
Mars Black Black Black 1 0.7
Graphite Gray Black Black 3 0.7
Titanium White White White 10 1.1
Zinc White White White 10 1.5
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style>
div.bar {
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid red;
font-size: .4em;
padding: 5px;
}
body {
background-color: lightgrey;
}
</style>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
var goldenAColors;
d3.csv("golden_munsell_hue.csv", function(error, data) {
if (error) { //If error is not null, something went wrong.
console.log(error); //Log the error.
} else { //If no error, the file loaded correctly. Yay!
console.log(data); //Log the data.
//Include other code to execute after successful file load here
goldenAColors = data;
var mYtotal = 0;
var mGYtotal = 0;
var mGtotal = 0;
var mBGtotal = 0;
var mBtotal = 0;
var mPBtotal = 0;
var mPtotal = 0;
var mRPtotal = 0;
var mRtotal = 0;
var mYRtotal = 0;
var mWhitetotal = 0;
var mBlacktotal = 0;
var mY = "yellow";
var mGY = "greenyellow";
var mG = "green";
var mBG = "cyan";
var mB = "blue";
var mPB = "blueviolet";
var mP = "purple";
var mRP = "magenta";
var mR = "red";
var mYR = "orange";
var mWhite = "white";
var mBlack ="black";
goldenAColors.forEach(function(d/*, i, array*/) {
if (d["HUE FAMILY"] === "Y") {
mYtotal++
}
else if (d["HUE FAMILY"] === "GY") {
mGYtotal++
}
else if (d["HUE FAMILY"] === "G") {
mGtotal++
}
else if (d["HUE FAMILY"] === "BG") {
mBGtotal++
}
else if (d["HUE FAMILY"] === "B") {
mBtotal++
}
else if (d["HUE FAMILY"] === "PB") {
mPBtotal++
}
else if (d["HUE FAMILY"] === "P") {
mPtotal++
}
else if (d["HUE FAMILY"] === "RP") {
mRPtotal++
}
else if (d["HUE FAMILY"] === "R") {
mRtotal++
}
else if (d["HUE FAMILY"] === "YR") {
mYRtotal++
}
else if (d["HUE FAMILY"] === "White") {
mWhitetotal++
}
else if (d["HUE FAMILY"] === "Black") {
mBlacktotal++
} else {
console.log("You missed one Buddy!")
}
});
/* console.log(mYtotal);
console.log(mGYtotal);
console.log(mGtotal);
console.log(mBGtotal);
console.log(mBtotal);
console.log(mPBtotal);
console.log(mPtotal);
console.log(mRPtotal);
console.log(mRtotal);
console.log(mYRtotal);
console.log(mYRtotal);
console.log(mWhitetotal);
console.log(mBlacktotal);*/
var yellowSet = {
"name": "Yellow",
"score": mYtotal,
"color": mY
}
var greenYellowSet = {
"name": "Green Yellow",
"score": mGYtotal,
"color": mGY
}
var greenSet = {
"name": "Green",
"score": mGtotal,
"color": mG
}
var blueGreenSet = {
"name": "Blue Green",
"score": mBGtotal,
"color": mBG
}
var blueSet = {
"name": "Blue",
"score": mBtotal,
"color": mB
}
var purpleBlueSet = {
"name": "Purple Blue",
"score": mPBtotal,
"color": mPB
}
var purpleSet = {
"name": "Purple",
"score": mPtotal,
"color": mP
}
var redPurpleSet = {
"name": "Red Purple",
"score": mRPtotal,
"color": mRP
}
var redSet = {
"name": "Red",
"score": mRtotal,
"color": mR
}
var yellowRedSet = {
"name": "Orange",
"score": mYRtotal,
"color": mYR
}
var whiteSet = {
"name": "White",
"score": mWhitetotal,
"color": mWhite
}
var blackSet = {
"name": "Black",
"score": mBlacktotal,
"color": mBlack
}
var mTotalArray = [];
mTotalArray.push(yellowSet, greenYellowSet, greenSet, blueGreenSet, blueSet, purpleBlueSet, purpleSet, redPurpleSet, redSet, yellowRedSet, whiteSet, blackSet );
var borderAttr = "1px solid "
d3.select("body").selectAll("bubba") // The variable in SelectAll doesn't care what it is called.
.data(goldenAColors)
.enter()
.append("div")
.text( function(d) { return d["COLOR NAME"]; })
.attr("class", "bar")
.style("border", function(d) {
if ( d["HUE FAMILY"] === "Y") {
return borderAttr + mY;
} else if ( d["HUE FAMILY"] === "YR"){
return borderAttr + mYR;
} else if ( d["HUE FAMILY"] === "B"){
return borderAttr + mB;
} else if ( d["HUE FAMILY"] === "P"){
return borderAttr + mP;
} else if ( d["HUE FAMILY"] === "PB"){
return borderAttr + mPB;
} else if ( d["HUE FAMILY"] === "G"){
return borderAttr + mG;
} else if ( d["HUE FAMILY"] === "BG"){
return borderAttr + mBG;
} else if ( d["HUE FAMILY"] === "RP"){
return borderAttr + mRP;
} else if ( d["HUE FAMILY"] === "R"){
return borderAttr + mR;
} else if ( d["HUE FAMILY"] === "GY"){
return borderAttr + mGY;
} else {
return borderAttr + " black";
}
});
//Width and height
var w = 1000;
var h = 200;
var barPadding = 1; // <-- New!
console.log(mTotalArray);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("newBubba")
.data(mTotalArray)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * (w / mTotalArray.length); })
.attr("y", 20)
.attr("width", w / mTotalArray.length - barPadding)
.attr("height", function(d, i) {return d.score * 10})
.attr("fill", function(d, i) {return d.color});
svg.selectAll("text")
.data(mTotalArray)
.enter()
.append("text")
.text(function(d) { return d.score; })
.attr("x", function(d, i) { return i * (w / mTotalArray.length) + (w / mTotalArray.length - barPadding) / 2; })
.attr("y", 44)
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "white")
.attr("text-anchor", "middle")
.style("text-shadow", "5px 5px 10px black");
}
});
/*========================================*/
</script>
</body>
</html>
@hdngr
Copy link

hdngr commented Nov 7, 2014

@sleamer, I am pretty sure that if you save "golden_munsell_hue.csv" to this gist, you can link to it in the way you are calling it... Ping me when you've tried and I am happy to look at the code itself.

@hdngr
Copy link

hdngr commented Nov 7, 2014

also, index may need to be index.html in order to work. Also, consider adding a thumbnail.png so that is shows up in the d3 examples gallery

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment