initialState parameter for category (colors!)

[cweinard]

Hello, I'm looking to make color categories active when the visualization is loaded as a static site.

I added parameters to initialState in the metadata.json, and they seem to work, for the most part. The "category" parameter, however, isn't reflected when the site loads. (No colors shown)

What's the best approach?

Thanks!

[donghaoren]

Currently there isn't an easy way to do this, you'd have to set initialState.charts, with an embedding view that have the category field specified, like this:

initialState.charts = { 
  embeddingView: {
    type: "embedding",
    title: "Embedding",
    data: {
      x: "x",
      y: "y",
      text: "text",
      category: "category_column"
    }
  }
}

But if you simply set initialState.charts like above with a single entry, the app will display only the embedding view, not the table and anything else. What you can do instead is to copy the base64 encoded url, decode it (base64 decode, and then gzip decompress, you'll get a JSON string), and modify the embedding view's category field, and then use that as the initial state.

[cweinard]

Thanks for your help. I tried what you suggested (I think?). I noticed that the current state is encoded in the url, so I can share that url and the customized visualization opens. That's super.

I then looked for a way to share the url so that it would open to the customized view without needing a query string. I decoded the url into a JSON string. That JSON string included a "category" field which is great. I copied the decoded JSON string into the initialState field in manifest.json...and unfortunately the "category" field isn't reflected in the resulting visualization. (Other initialState fields seem to work.)

Maybe there's a problem with my configuration file? Here's the metadata.json with category specified:

{"props": {"data": {"id": "_row_index", "projection": {"x": "image_proj_x", "y": "image_proj_y"}}, "initialState": {
"version": "0.12.0",
"timestamp": 1762196931.948,
"charts": {
"1": {
"type": "embedding",
"title": "Embedding",
"data": {
"x": "image_proj_x",
"y": "image_proj_y",
"category": "keywords"
}
},
"2": {
"type": "predicates",
"title": "SQL Predicates"
},
"3": {
"type": "table",
"title": "Table",
"columns": [
"image",
"objectIDconstituents",
"constituentsconstituentID",
"constituentsconstituentIDdetails",
"constituentsULANID",
"constituentspreferredDisplayName",
"constituentsforwardDisplayName",
"constituentsconstituentType",
"constituentswikidataid",
"objectID",
"uuidobjects",
"accessioned",
"accessionNum",
"locationID",
"title",
"displayDate",
"beginYear",
"endYear",
"visualBrowserTimeSpan",
"medium",
"dimensions",
"inscription",
"markings",
"description",
"curatorialRemarks",
"attributionInverted",
"attribution",
"wikidataID",
"id",
"iiifURL",
"iiifThumbURL",
"width",
"height",
"maxPixels",
"termID",
"objectIDterms",
"term",
"termPath",
"remarks",
"iadthesXrefID",
"iadtermID",
"objectIDiad",
"iadterm",
"iadtermPath",
"iadremarks",
"keywords",
"glossaryMatt comment",
"historicalobjectDateID",
"historicalobjectID",
"historicaldateText",
"year",
"historicaldateEnd",
"historicalremarks",
"image_proj_x",
"image_proj_y",
"_ev_keywords_id",
"FILE_NAME",
"_row_index"
]
},
"7": {
"type": "count-plot",
"title": "constituentsconstituentType",
"data": {
"field": "constituentsconstituentType"
}
},
"8": {
"type": "count-plot",
"title": "constituentswikidataid",
"data": {
"field": "constituentswikidataid"
}
},
"9": {
"type": "histogram",
"title": "objectID",
"data": {
"field": "objectID"
},
"binCount": 20
},
"10": {
"type": "histogram",
"title": "locationID",
"data": {
"field": "locationID"
},
"binCount": 20
},
"11": {
"type": "count-plot",
"title": "displayDate",
"data": {
"field": "displayDate"
}
},
"12": {
"type": "histogram",
"title": "beginYear",
"data": {
"field": "beginYear"
},
"binCount": 20
},
"13": {
"type": "histogram",
"title": "endYear",
"data": {
"field": "endYear"
},
"binCount": 20
},
"14": {
"type": "count-plot",
"title": "visualBrowserTimeSpan",
"data": {
"field": "visualBrowserTimeSpan"
}
},
"15": {
"type": "count-plot",
"title": "medium",
"data": {
"field": "medium"
}
},
"16": {
"type": "count-plot",
"title": "markings",
"data": {
"field": "markings"
}
},
"17": {
"type": "histogram",
"title": "width",
"data": {
"field": "width"
},
"binCount": 20
},
"18": {
"type": "histogram",
"title": "height",
"data": {
"field": "height"
},
"binCount": 20
},
"19": {
"type": "histogram",
"title": "termID",
"data": {
"field": "termID"
},
"binCount": 20
},
"20": {
"type": "histogram",
"title": "objectIDterms",
"data": {
"field": "objectIDterms"
},
"binCount": 20
},
"21": {
"type": "count-plot",
"title": "term",
"data": {
"field": "term"
}
},
"22": {
"type": "count-plot",
"title": "termPath",
"data": {
"field": "termPath"
}
},
"23": {
"type": "histogram",
"title": "iadthesXrefID",
"data": {
"field": "iadthesXrefID"
},
"binCount": 20
},
"24": {
"type": "histogram",
"title": "iadtermID",
"data": {
"field": "iadtermID"
},
"binCount": 20
},
"25": {
"type": "histogram",
"title": "objectIDiad",
"data": {
"field": "objectIDiad"
},
"binCount": 20
},
"26": {
"type": "count-plot",
"title": "iadterm",
"data": {
"field": "iadterm"
}
},
"27": {
"type": "count-plot",
"title": "keywords",
"data": {
"field": "keywords"
}
},
"28": {
"type": "count-plot",
"title": "glossaryMatt comment",
"data": {
"field": "glossaryMatt comment"
}
},
"29": {
"type": "histogram",
"title": "historicalobjectDateID",
"data": {
"field": "historicalobjectDateID"
},
"binCount": 20
},
"30": {
"type": "histogram",
"title": "historicalobjectID",
"data": {
"field": "historicalobjectID"
},
"binCount": 20
},
"31": {
"type": "histogram",
"title": "year",
"data": {
"field": "year"
},
"binCount": 20
},
"32": {
"type": "histogram",
"title": "historicaldateEnd",
"data": {
"field": "historicaldateEnd"
},
"binCount": 20
},
"33": {
"type": "histogram",
"title": "_ev_keywords_id",
"data": {
"field": "_ev_keywords_id"
},
"binCount": 20
},
"34": {
"type": "histogram",
"title": "_row_index",
"data": {
"field": "_row_index"
},
"binCount": 20
}
},
"chartStates": {
"1": {
"viewport": {
"x": -0.4995821863412857,
"y": 0.015403603203594685,
"scale": 0.08626756091027528
}
}
},
"layout": "list",
"layoutStates": {
"list": {
"showTable": false
}
}
}
}, "isStatic": true, "database": {"type": "wasm", "load": true}}