Published
Edited
Sep 29, 2020
1 fork
md`# Assignment 5 - Scatterplot Matrix
## Bruce Miller CAP5738
`
irisData.columns
extract = (attribute)=>irisData.map(d=>d[attribute]);
md`Calculate variances for the four variables using d3 function
`
{
let extract = (type,attribute)=>irisData.filter(d=>d.Name == "Iris-"+type).map(d=>d[attribute]);
let setosa = {
mode: "markers",
name: "setosa",
type: "scatter",
x: extract("setosa","SepalLength"),
y: extract("setosa","PetalLength"),
marker: {
size: 12,
color: "black"
}
};
let versicolor = {
mode: "markers",
name: "versicolor",
type: "scatter",
x: extract("versicolor","SepalLength"),
y: extract("versicolor","PetalLength"),
marker: {
size: 12,
color: "red"
}
};
let virginica= {
mode: "markers",
name: "virginica",
type: "scatter",
x: extract("virginica","SepalLength"),
y: extract("virginica","PetalLength"),
marker: {
size: 12,
color: "green"
}
}
let data = [setosa, versicolor, virginica];
let layout = {
title: "Scatter plot for IRIS flower sepal_length_VS_petal_length",
xaxis: {
title: "sepal_length"
},
yaxis: {
title: "petal_length"
}
};
const config = {
//scrollZoom: true,
editable: true,
//staticPlot: true,
responsive: true,
toImageButtonOptions: {
format: 'svg', // one of png, svg, jpeg, webp
//filename: 'custom_image',
},
displayModeBar: true
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout, config);
return div;
}
{
let extract = (type,attribute)=>irisData.filter(d=>d.Name == "Iris-"+type).map(d=>d[attribute]);
let setosa = {
mode: "markers",
name: "setosa",
type: "scatter",
x: extract("setosa","SepalLength"),
y: extract("setosa","PetalLength"),
marker: {
size: 4,
color: "black"
}
};
let versicolor = {
mode: "markers",
name: "versicolor",
type: "scatter",
xaxis: 'x2',
yaxis: 'y2',
x: extract("versicolor","SepalLength"),
y: extract("versicolor","PetalLength"),
marker: {
size: 4,
color: "red"
}
};
let virginica= {
mode: "markers",
name: "virginica",
type: "scatter",
xaxis: 'x3',
yaxis: 'y3',
x: extract("virginica","SepalLength"),
y: extract("virginica","PetalLength"),
marker: {
size: 4,
color: "green"
}
};
let setosaW = {
mode: "markers",
name: "setosa",
type: "scatter",
xaxis: 'x4',
yaxis: 'y4',
x: extract("setosa","SepalWidth"),
y: extract("setosa","PetalWidth"),
marker: {
size: 4,
color: "black"
}
};
let versicolorW = {
mode: "markers",
name: "versicolor",
type: "scatter",
xaxis: 'x5',
yaxis: 'y5',
x: extract("versicolor","SepalWidth"),
y: extract("versicolor","PetalWidth"),
marker: {
size: 4,
color: "red"
}
};
let virginicaW = {
mode: "markers",
name: "virginica",
type: "scatter",
xaxis: 'x6',
yaxis: 'y6',
x: extract("virginica","SepalWidth"),
y: extract("virginica","PetalWidth"),
marker: {
size: 4,
color: "green"
}
};
// let data = [setosa, versicolor, virginica];
/*let trace1 = {
x: [1, 2, 3],
y: [4, 5, 6],
type: 'scatter'
};
let trace2 = {
x: [20, 30, 40],
y: [50, 60, 70],
xaxis: 'x2',
yaxis: 'y2',
type: 'scatter'
};
let trace3 = {
x: [300, 400, 500],
y: [600, 700, 800],
xaxis: 'x3',
yaxis: 'y3',
type: 'scatter'
};
let trace4 = {
x: [4000, 5000, 6000],
y: [7000, 8000, 9000],
xaxis: 'x4',
yaxis: 'y4',
type: 'scatter'
};
*/
let data = [setosa, versicolor, virginica, setosaW, versicolorW, virginicaW];
let layout = {
grid: {rows: 2, columns: 3, pattern: 'independent'},
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
{
let trace1 = {
x: [1, 2, 3],
y: [4, 5, 6],
type: 'scatter'
};
let trace2 = {
x: [20, 30, 40],
y: [50, 60, 70],
xaxis: 'x2',
yaxis: 'y2',
type: 'scatter'
};
let trace3 = {
x: [300, 400, 500],
y: [600, 700, 800],
xaxis: 'x3',
yaxis: 'y3',
type: 'scatter'
};
let trace4 = {
x: [4000, 5000, 6000],
y: [7000, 8000, 9000],
xaxis: 'x4',
yaxis: 'y4',
type: 'scatter'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
showlegend:false,
title: "grid plot example",
grid: {rows: 2, columns: 2, pattern: 'independent'},
xaxis: {
showticklabels: false,
title: "sepal_length",
anchor: 'y1'
},
//domain: [0, 0.45],
//anchor: 'y1'
//},
yaxis: {
title: "petal_length",
//domain: [0.5, 1],
anchor: 'x1'
},
xaxis2: {
//domain: [0.55, 1],
anchor: 'y2'
},
yaxis2: {
// domain: [0.8, 1],
anchor: 'x2'
},
xaxis3: {
// domain: [0.55, 1],
anchor: 'y3'
},
yaxis3: {
//domain: [0.5, 0.75],
anchor: 'x3'
},
xaxis4: {
//domain: [0, 1],
anchor: 'y4'
},
yaxis4: {
//domain: [0, 0.45],
anchor: 'x4'
}
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
{
//let extract = (type,attribute)=>irisData.filter(d=>d.Name == "Iris-"+type).map(d=>d[attribute]);
let extract = (attribute)=>irisData.map(d=>d[attribute]);
let pl_v_sl = {
mode: "markers",
//name: "PetalLength_v_SepalLength",
type: "scatter",
x: extract("SepalLength"),
y: extract("PetalLength"),
marker: {
size: 4,
color: "black"
}
};
let sw_v_sl = {
mode: "markers",
//name: "SepalWidth_v_SepalLength",
type: "scatter",
xaxis: 'x2',
yaxis: 'y2',
x: extract("SepalLength"),
y: extract("SepalWidth"),
marker: {
size: 4,
color: "red"
}
};
let sw_v_pl= {
mode: "markers",
//name: "sepal_width v petal_length",
type: "scatter",
xaxis: 'x3',
yaxis: 'y3',
x: extract("PetalLength"),
y: extract("SepalWidth"),
marker: {
size: 4,
color: "green"
}
};
let pw_v_sl = {
mode: "markers",
//name: "Petalwidth v sepal_length",
type: "scatter",
xaxis: 'x4',
yaxis: 'y4',
x: extract("SepalLength"),
y: extract("PetalWidth"),
marker: {
size: 4,
color: "black"
}
};
let pw_v_pl = {
mode: "markers",
//name: "Petal_width v petal_length",
type: "scatter",
xaxis: 'x5',
yaxis: 'y5',
x: extract("PetalLength"),
y: extract("PetalWidth"),
marker: {
size: 4,
color: "red"
}
};
let pw_v_sw = {
mode: "markers",
//name: "Petal_width v sepal_length",
type: "scatter",
xaxis: 'x6',
yaxis: 'y6',
x: extract("SepalWidth"),
y: extract("PetalWidth"),
marker: {
size: 4,
color: "green"
}
};
let data = [pl_v_sl, sw_v_sl,sw_v_pl,pw_v_sl, pw_v_pl,pw_v_sw];
let layout = {
showlegend:false,
title: "Iris Data Correlations",
grid: {rows: 4, columns: 4, pattern: 'independent'},
xaxis: {
//title: "sepal_length",
showticklabels: false,
domain:[0, 0.3],
anchor: 'y1'
},
yaxis: {
title: "petal_length",
domain: [.6, 1],
anchor: 'x1'
},
xaxis2: {
showticklabels: false,
domain: [0, .3],
anchor: 'y2'
},
yaxis2: {
title:"sepal_width",
domain: [0.35, .6],
anchor: 'x2'
},
xaxis3: {
showticklabels: false,
domain: [0.35, .6],
anchor: 'y3'
},
yaxis3: {
showticklabels: false,
domain: [0.35, 0.6],
anchor: 'x3'
},
xaxis4: {
title:"sepal_length",
domain: [0, .35],
anchor: 'y4'
},
yaxis4: {
title: "petal_width",
domain: [0, .3],
anchor: 'x4'
},
xaxis5:{
title:"petal_length",
domain: [.35, .6],
anchor: 'y5'
},
yaxis5:{
showticklabels: false,
domain: [0, .3],
anchor: 'x5'
},
xaxis6:{
title:"sepal_width",
domain: [.65, 1],
anchor: 'y6'
},
yaxis6:{
showticklabels: false,
domain: [0, .3],
anchor: 'x6'
}
};
const div = DOM.element('div');
/*const config = {
//scrollZoom: true,
//editable: true,
//staticPlot: true,
responsive: true,
toImageButtonOptions: {
format: 'svg', // one of png, svg, jpeg, webp
//filename: 'custom_image',
},
displayModeBar: true
};*/
Plotly.newPlot(div, data, layout/*,config*/);
return div;
}
{
let extract = (attribute)=>irisData.map(d=>d[attribute]);
let pl_v_sl = {
mode: "markers",
//name: "PetalLength_v_SepalLength",
type: "scatter",
x: extract("SepalLength"),
y: extract("PetalLength"),
marker: {
size: 4,
color: "black"
}
};
let data = [pl_v_sl];
const div = DOM.element('div');
let layout = {
title: "Scatter plot for IRIS flower sepal_length_VS_petal_length",
xaxis: {
title: "sepal_length"
},
yaxis: {
title: "petal_length"
}
};
Plotly.newPlot(div, data, layout/*,config*/);
return div;
}
md`---
### Require JavaScript libraries and import Observable tools`
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
d3 = require("d3")
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.
