This project is a full-stack data-driven web application for visualizing datasets about bacterial samples. Data was collected and filtered from a SQLite database using Flask and Python, then used to drive visualizations using Plotly. The gauge plot is a version of Plotly's custom Gauge Chart, modified to automate the tier count and associated color gradient. The app is deployed using Heroku.
Procedural coloration of gauge chart sectors based on a 3-color gradient
function threeColorLerp(value){
var color1 = [132,181,137];
var color2 = [213,229,153];
var color3 = [248,243,236];
value = value < 0 ? 0: value;
value = value > 1 ? 0: value;
var ca = value < 0.5 ? color1: color2;
var cb = value < 0.5 ? color2: color3;
var v = value < 0.5 ? value*2 : value*2-1;
var newColor = ca.map((x,i)=>x+(cb[i]-x)*v);
return `rgb(${newColor[0]},${newColor[1]},${newColor[2]})`
}
// Inside the trace for the gauge's donut-chart...
marker: {
colors: [...Plotly.d3.range(numLevels)
.map(x=>threeColorLerp(x/numLevels)),
"rgba(0,0,0,0)"],
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent