get color_name_summaries.html to show full colors too

Author: kylethayer

vis/color_name_summaries.html

@@ -47,9 +47,21 @@
 	<h1>Color Name Viewer</h1>
 	<p>This page lets you see the color names in different languages</p>
 
-  
+  <div class="form-check form-check-inline">
+    <input class="form-check-input" type="radio" name="color_set" id="full_colors" checked>
+    <label class="form-check-label" for="full_colors">
+      Full Colors
+    </label>
+  </div>
+  <div class="form-check form-check-inline">
+    <input class="form-check-input" type="radio" name="color_set" id="hue_colors" >
+    <label class="form-check-label" for="hue_colors">
+      Hue Colors
+    </label>
+  </div>
+
 
-  <div class="form-check justify-content-center align-items-center flex-nowrap">
+  <div class="form-check form-check-inline justify-content-center align-items-center flex-nowrap">
     <label class="form-label" for="selected_langs" style="display: block; text-align: center;" >Language</label>
     <div class="small" style="max-width:500px;margin:auto;">
       <select class="form-select small" name ="selected_langs" id="selected_langs" value="selected_langs" style="width:100%">

vis/js/color_name_summaries.js

@@ -10,31 +10,48 @@ const escapeHTML = str => String(str).replace(/[&<>'"]/g,
 $(document).on('ready page:load', async () => {
 
 const hueColorNames = await d3.csv("../model/hue_colors_info.csv");
+const fullColorNames = await d3.csv("../model/full_colors_info.csv");
 console.log(hueColorNames[0]);
 
-const allNamesByLang = Object.groupBy(hueColorNames, ({lang}) => lang)
-
-console.log(Object.keys(allNamesByLang))
-
-let selected_lang_temp = true
-for(lang of Object.keys(allNamesByLang)){
-    $("#selected_langs").append(new Option(lang, lang, true, selected_lang_temp))
-    selected_lang_temp = false
-}
-
 $("#selected_langs").change(e => { 
     updateTableData()
 })
 
-const table = d3.select("#data_view")
+$("input:radio[name=color_set]").change(e => { 
+    updateColorSet()
+})
+
+let allNamesByLang
+const table =  d3.select("#data_view")
     .html("")
     .append("table")
 
 
+updateColorSet()
+
+function updateColorSet(){
+    const color_set_val = $('#full_colors').prop("checked") ? "full_colors" : "hue_colors"
+    let color_set = fullColorNames
+    if(color_set_val == "hue_colors"){
+        color_set = hueColorNames
+    }
+
+    allNamesByLang = Object.groupBy(color_set, ({lang}) => lang)
 
-updateTableData();
+    console.log(Object.keys(allNamesByLang))
+
+    $("#selected_langs").empty()
+    let selected_lang_temp = true
+    for(lang of Object.keys(allNamesByLang)){
+        $("#selected_langs").append(new Option(lang, lang, true, selected_lang_temp))
+        selected_lang_temp = false
+    }
+
+    updateTableData();
+}
 
 function updateTableData(){
+
     const selected_lang = $("#selected_langs").val()
     if(!selected_lang){
         return
@@ -49,16 +66,12 @@ function updateTableData(){
         .selectAll("tr")
         .data(Object.entries(nameData))
         .join("tr")
-            .attr("test", d => {
-                d.test
-            })
 
     rows.selectAll("td")
         .data(d => Object.entries(d[1]))
         .join("td")
         .html(d => {
-            console.log("html", d[0])
-            if(d[0] == "avgHueColor"){
+            if(d[0] == "avgHueColor" || d[0] == "avgColorRGBCode"){
                 return `
                 <div
                     style="height:20px; width: 20px; float:left; margin: 5px;