Published
Edited
May 12, 2020
demoData=(await fetch('https://api.gdc.cancer.gov/files/d853e541-f16a-4345-9f00-88e03c2dc0bc?pretty=true')).json()
malesUrl = 'https://api.gdc.cancer.gov/projects?cases=primary_site&from=0&size=1000&sort=disease_type:asc'
dt = (await fetch('https://api.gdc.cancer.gov/files')).json()
dataPlot={
let dtt={}
let y = dt.data.hits.map(x=>{
debugger
if(!dtt[x.primary_site]){
dtt[x.primary_site]=0
}
dtt[x.primary_site]+=1
})
return dtt
}
Object.keys(dataPlot).map(tp=>dataPlot[tp])
plotly=require("https://cdn.plot.ly/plotly-latest.min.js")
"Above is the picture to hotspot all of the data collected in the code above, the code above collects all of the parts of the body to allow us to collect data for body parts, where skin cancer has a higher chance of occurring"
"Second Idea"
"Use a body picture as seen above to find the hotspots on the human body that skin cancer occurs the most on, The plan is the collect the data for how much each body part gets skin cancer, then allocating specific color range for each percentage that a body part has of the collected data to see how much each body part gets skin canacer versus the whole body"
hunter = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}
];
// set the dimensions and margins of the graph
margin = {top: 30, right: 30, bottom: 30, left: 30},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// append the svg object to the body of the page
svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Labels of row and columns
myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]
// Build X scales and axis:
x = d3.scaleBand()
.range([ 0, width ])
.domain(myGroups)
.padding(0.01);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Build X scales and axis:
y = d3.scaleBand()
.range([ height, 0 ])
.domain(myVars)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y));
// Build color scale
varmyColor = d3.scaleLinear()
.range(["white", "#69b3a2"])
.domain([1,100])
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
})
slide = new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.crossOrigin = "anonymous";
image.src =
'https://api.gdc.cancer.gov/tile/26eaabb1-0a6e-4b77-b1fd-710e616ea92e?level=14&x=1&y=0';
image.width = 300;
image.height = 300;
})
slide1 = new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.crossOrigin = "anonymous";
image.src =
'https://api.gdc.cancer.gov/tile/26eaabb1-0a6e-4b77-b1fd-710e616ea92e?level=10&x=0&y=0';
image.width = 10;
image.height = 10;
})
betterFetch = async function(url,body) {
let fetchData = {
method: 'POST',
body: JSON.stringify(body),
headers:{'Content-Type':'application/json'}
}
let tmpData=(await fetch(url, fetchData)).json()
return(tmpData)
}
projecData = {
let url = 'https://api.gdc.cancer.gov/files'
let body = ({
'fields': "data_format,id",
'from': 0,
'size': 10000
})
return(await betterFetch(url,body))
}
imageData = projecData.data.hits
tissueSamples = projecData.data.hits.filter(function(d) {return d.data_format == "SVS"})
fetchImageData = async function(numberOfCases) {
let hosturl = 'https://api.gdc.cancer.gov/files'
let body = ({
'fields': "data_format,id",
'from': 0,
'size': numberOfCases
})
let betterFetch = async function(url,body) {
let fetchData = {
method: 'POST',
body: JSON.stringify(body),
headers:{'Content-Type':'application/json'}
}
let tmpData=(await fetch(url, fetchData)).json()
return(tmpData)
};
let temp = (await betterFetch(hosturl,body))
let tissueID = temp.data.hits.filter(function(d) {return d.data_format == "SVS"})
let sampleData = []
for(var i = 0; i < tissueID.length; i++) {
temp = new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.crossOrigin = "anonymous";
image.src =
'https://api.gdc.cancer.gov/tile/' + tissueID[i].id + '?level=10&x=0&y=0';
image.width = 10;
image.height = 10;
})
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// Set width and height
//canvas.width = img.width;
//canvas.height = img.height;
// Draw the image
ctx.drawImage(await temp, 0, 0);
//return ctx.getImageData(0,0,300,300).data;
let temp1 = ctx.getImageData(0,0,10,10).data
ctx.clearRect(0, 0, canvas.width, canvas.height);
sampleData.push(Array.prototype.slice.call(temp1))
}
return (sampleData)
};
imagedata = fetchImageData(10000)
tf = require('@tensorflow/tfjs@0.15.1')
autoencoder = {
const model = tf.sequential();
// To simulate PCA we use 1 hidden layer with a linear (relu) activation
const encoder = tf.layers.dense({
units: 1,
batchInputShape:[null,400], //We will input N samples X 4 columns
activation: 'relu',
kernelInitializer:"randomNormal", //Randomize to avoid degenerate cases
biasInitializer:"ones"});
const decoder = tf.layers.dense({units: 400, activation: 'relu'});
model.add(encoder);
model.add(decoder);
await model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});
return {
'model':model,
'encoder':encoder,
'decoder':decoder
}
}
autoencoderTrain = {
const xs = tf.tensor2d(imagedata);
let h = await autoencoder.model.fit(xs, xs, {epochs: 5,batchSize:400,shuffle:true,validationSpit:0.1});
xs.dispose();
return h;
}
predictions = {
autoencoderTrain;
const tidyWrapper = tf.tidy(() => {
const predictor = tf.sequential();
predictor.add(autoencoder.encoder);
let xs = tf.tensor2d(test);
let ret = predictor.predict(xs);
xs.dispose();
return ret;
});
yield tidyWrapper.data();
try {
yield invalidation;
} finally {
tidyWrapper.dispose();
}
}
test = [imagedata[100],imagedata[101]]
fetchImageData1 = async function(numberOfCases) {
let hosturl = 'https://api.gdc.cancer.gov/files'
let body = ({
'fields': "data_format,id",
'from': 0,
'size': numberOfCases
})
let betterFetch = async function(url,body) {
let fetchData = {
method: 'POST',
body: JSON.stringify(body),
headers:{'Content-Type':'application/json'}
}
let tmpData=(await fetch(url, fetchData)).json()
return(tmpData)
};
let temp = (await betterFetch(hosturl,body))
let tissueID = temp.data.hits.filter(function(d) {return d.data_format == "SVS"})
let sampleData = []
for(var i = 0; i < tissueID.length; i++) {
sampleData.push('https://api.gdc.cancer.gov/tile/' + tissueID[i].id + '?level=10&x=0&y=0')
}
return (sampleData)
};
variable1 = fetchImageData1(100000)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
