2b:null 2c:["$","title",null,{"children":"caViz | Jonas Almeida | Observable"}] 31:T450,md`# caViz

Near real time visualization of cancer data, primarily from CDC and SEER sources, is now possible with resort to their public Application Programming Interfaces (API). This observable notebook explores those data APIs and interactive visualizations that are then ported to a library served from github.com/episphere/caviz. The shared library was developed both to support this visualization experiment and for stand alone dahsboards, for exemple, at episphere.github.io/caviz. `32:T4f9,plot = (caviz.plot = function(gender = "Female", year = "2016", div) { div = div || document.getElementById("plotDiv") || DOM.element('div'); let parms = { gender: "Female", year: "2016" }; if (localStorage.cavizparms) { // track parameter values in localStorage parms = JSON.parse(localStorage.cavizparms); if (gender) { parms.gender = gender; } if (year) { parms.year = year; } } localStorage.cavizparms = JSON.stringify(parms); let states = Object.keys(melanomaMortality_by_state_gender_year); var dt = { type: 'choropleth', locationmode: 'USA-states', locations: states, z: states.map( st => caviz.melanomaMortality_by_state_gender_year[st][parms.gender][ parms.year ].datavalue ), colorscale: 'Jet', // https://plot.ly/javascript/colorscales/ zmin: 1, zmax: 6 }; Plotly.newPlot(div, [dt], { title: `${parms.gender} melanoma mortality per 100,000 in ${parms.year}`, geo: { scope: 'usa', showlakes: true, lakecolor: 'rgb(255,255,255)' } }); // defaults let y = DOM.element('p'); y.innerText = 'Click on gender and year buttons above to generate new Maps'; y.align = 'right'; return y; //div; })33:[] 2f:{"id":"bb441094e3a19646","slug":"caviz","title":"caViz ","thumbnail":"cf840502b09ee91b491a8d470f675dfa7802ffd35f6783a251433d11a66bc89b","access_level":"public","create_time":"$D2019-05-21T23:44:35.798Z","update_time":"$D2022-10-25T19:57:45.816Z","view_time":null,"first_public_time":"$D2019-05-21T23:44:38.541Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0f2e596d5bd6ef6e","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":"starter_2024"},"version":686,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null}],"members":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"caViz ","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`\n

Connecting

Checking connection with CDC (open) and SEER (requires API key).

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n

CDC API

\nSee documentation at open.cdc.gov/apis.html. Note in particular use of FHIR in CDC vocabulary services. CDC uses the Open Data Socrata platform, which enables serveless approaches to data visualization and analysis such as those demonstrated in (Almeida 2019). CDC API connection can be verified by retrieving, for example [➚], the first 1000 entries on chronic diseases (click on triagle to open/close data structure):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"cdcCancer = (await fetch(\n \"https://chronicdata.cdc.gov/resource/g4ie-h725.json?topic=Cancer\"\n)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"html`individual entries, for example #13 above, will look like this

${JSON.stringify(\n  cdcCancer[13],\n  null,\n  3\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"html`\n

SEER

SEE provides an API but requires credentialed use with an API Key (api.seer.cancer.gov/docs). In contrast with CDC's reliance on a consumer-facing data platform with a general purpose API, SEER uses a customized parameter structure: api.seer.cancer.gov/swagger-ui.html. Let's start by making sure there is a valid API key:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"seerKeyCheck = {\n let div = DOM.element('div');\n let h = '';\n if (localStorage.seerAPIkey) {\n let seerAPIkey = localStorage.seerAPIkey;\n h = 'Valid API key found 👍';\n // checking if the key is valid\n if (!caviz.seerData) {\n h =\n 'Invalid API key found, please fix that at SEERkey, and then refresh this page.';\n }\n } else {\n h =\n 'SEER API key not found. After you fix that at SEERkey, refresh this page.';\n }\n div.innerHTML = h;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"{\n let div = DOM.element('div');\n let sel = DOM.element('select');\n let title = DOM.element('h4');\n title.innerText = 'list of diseases in SEER';\n div.appendChild(title);\n sel.id = \"selDiseases_SEER\";\n sel.size = 10;\n div.appendChild(sel);\n let pre = DOM.element('pre');\n div.appendChild(pre);\n diseases_SEER.results.forEach(d => {\n let op = DOM.element('option');\n op.innerText = d.name;\n sel.appendChild(op);\n });\n sel.onchange = _ => {\n let i = sel.selectedIndex;\n pre.innerText = JSON.stringify(diseases_SEER.results[i], null, 3);\n };\n sel.selectedIndex = 0;\n sel.onchange(); // select first entry\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`\n

All together now

Using Melanoma as an example (CDC, above), if a valid key for the SEER API was found, we'll now retrieve data from both CDC and SEER.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`\n

Melanoma

SEER's disiese list shows a single entry for Melanoma, with id ${melanoma_SEER.id}:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"melanoma_SEER = diseases_SEER.results.filter(r => r.name.match(/Melanoma/))[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"md`\n

Now that SEER's API key is in the browser environment, its API can be engaged the same way one would CDC's open API (clicking on the right-hand \"⋮\" bellow will reveal the API call command, clicking on ▶ will open and close data structure):

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"infoMelanoma_SEER = await caviz.seerGet(\n 'https://api.seer.cancer.gov/rest/disease/latest/id/51f6cf53e3e27c3994bd5111'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"brainStaging_SEER = caviz.seerGet(\n \"https://api.seer.cancer.gov/rest/staging/tnm/latest/schema/brain\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`\n

Since CDC's open API does not require credentials, data on Melanoma mortality can be dereferenced directly [➚]. ${melanomaMortalityCDC.length} studies were found, ${melanomaMortalityCDC_crude_rate.length} reporting crude mortality rate:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"melanomaMortalityCDC = (await fetch(\n \"https://chronicdata.cdc.gov/resource/g4ie-h725.json?topic=Cancer&question=Melanoma, mortality&$limit=10000\"\n)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"melanomaMortalityCDC_crude_rate = melanomaMortalityCDC.filter(\n x => x.datavaluetype == \"Average Annual Crude Rate\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`\n

One could, for example, consider only the studies that report mortality stratified by gender and compare males vs females. A close inspection of the data (click on ▶ to open the data structure), reveals that it reports mortality rates calculated from deadth certificates for sliding windows of 5 years, between 2008 and 2016. This can then be wrangled into a new data structure indexed to the state, gender and year:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"melanomaMortality_by_state_gender_year = {\n let y = {};\n melanomaMortalityCDC_crude_rate\n .filter(x => x.stratificationcategory1 == \"Gender\")\n .forEach(x => {\n x.datavalue = parseFloat(x.datavalue); // make sure value is reported as number\n if (!y[x.locationabbr]) {\n y[x.locationabbr] = {}; // index state\n }\n if (!y[x.locationabbr][x.stratification1]) {\n y[x.locationabbr][x.stratification1] = {}; // index gender\n }\n if (!y[x.locationabbr][x.stratification1][x.yearend]) {\n y[x.locationabbr][x.stratification1][x.yearend] = x; // index year the survey ends\n }\n //debugger;\n });\n return y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"(caviz.melanomaMortality_by_state_gender_year = melanomaMortality_by_state_gender_year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`\n

Gender: \n
Year:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`\n

Methods

Support libraries and test scripts.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"caviz = require(\"https://episphere.github.io/caviz/caviz.js\")\n//caviz = require(\"http://localhost:8000/caviz/caviz.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\nSEER API status check returned a list of ${schemas_SEER.length} disease schemas: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"schemas_SEER=await caviz.seerLogin()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"diseases_SEER = await caviz.seerDiseaseAll()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`

Graphics library

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"c=b/10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"a=44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"b=a+9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"