mirror of
https://git.gfz-potsdam.de/naaice/tug.git
synced 2025-12-13 09:28:23 +01:00
chore: cleanup of repository
This commit is contained in:
Max Lübke
parent
61a4b0ae8a
commit
da6d004e16
@ -1 +0,0 @@
|
||||
Subproject commit b7c21ec5ceeadb4951b00396fc1e4642dd347e5f
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB |
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
<form>
|
||||
<label for="c_file">Select an output file: </label>
|
||||
<input type="file" id="c_file" name="c_file" accept="text/csv" />
|
||||
</form>
|
||||
|
||||
|
||||
<script type="module">
|
||||
|
||||
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
|
||||
|
||||
// Declare the chart dimensions and margins.
|
||||
const width = 600;
|
||||
const height = 600;
|
||||
const svgMargin = { top: 50, right: 50, bottom: 50, left: 50 };
|
||||
|
||||
var gridWidth = width - svgMargin.left - svgMargin.right;
|
||||
var gridHeight = height - svgMargin.top - svgMargin.bottom;
|
||||
const gap = 1;
|
||||
var state = 0;
|
||||
var numIterations = 0;
|
||||
var cellXcount = 0;
|
||||
var cellYcount = 0;
|
||||
var concentrations = [];
|
||||
|
||||
// Create the outer SVG container.
|
||||
const svg = d3.create("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
svg.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("fill-opacity", 0)
|
||||
.attr("stroke-width", 4)
|
||||
.attr("stroke", "black");
|
||||
|
||||
var grid = svg.append("g")
|
||||
.attr("class", "grid")
|
||||
.attr("transform", `translate(${svgMargin.left}, ${svgMargin.top})`);
|
||||
|
||||
// color scale
|
||||
var colorScale = d3.scaleLinear()
|
||||
.range(["#d0d0ec", "#7f0000"])
|
||||
.domain([1, 2000]);
|
||||
function getColor(c, max) {
|
||||
if (c == -1) {
|
||||
return "#000000";
|
||||
}
|
||||
|
||||
colorScale.domain([0, max]);
|
||||
return colorScale(c);
|
||||
}
|
||||
|
||||
function calcMaxConcentrationInIteration(state) {
|
||||
var maxRow = concentrations[state].map(function(row){ return Math.max.apply(Math, row); });
|
||||
var maxC = Math.max.apply(null, maxRow);
|
||||
return maxC;
|
||||
}
|
||||
|
||||
// Load data from file
|
||||
async function createVisualFromFile(csv_input) {
|
||||
// console.log(csv_input);
|
||||
// var data = await d3.text(csv_input).then(function(csv){
|
||||
// return d3.dsvFormat(" ").parseRows(csv);
|
||||
// })
|
||||
var data = d3.dsvFormat(" ").parseRows(csv_input);
|
||||
// console.log(data);
|
||||
var leftBoundary = data[0];
|
||||
var rightBoundary = data[1];
|
||||
var topBoundary = data[2];
|
||||
var bottomBoundary = data[3];
|
||||
cellXcount = topBoundary.length;
|
||||
cellYcount = leftBoundary.length;
|
||||
concentrations = []; // reset concentrations
|
||||
grid.selectAll("rect").remove();
|
||||
svg.selectAll("rect").remove();
|
||||
state = 0;
|
||||
console.log(topBoundary);
|
||||
|
||||
var cellWidth = gridWidth / cellXcount;
|
||||
var cellHeight = gridHeight / cellYcount;
|
||||
var iteration = [];
|
||||
numIterations = (data.length - 6) / (cellYcount + 2);
|
||||
console.log(numIterations);
|
||||
for (let i = 0; i < numIterations; i++) {
|
||||
iteration = [];
|
||||
for (let j = 0; j < cellYcount; j++) {
|
||||
iteration.push(data[i * (cellYcount + 2) + 6 + j])
|
||||
}
|
||||
concentrations.push(iteration);
|
||||
}
|
||||
console.log(concentrations);
|
||||
|
||||
var maxC = calcMaxConcentrationInIteration(state);
|
||||
// Create grid
|
||||
for (let i = 0; i < cellYcount; i++) {
|
||||
for (let j = 0; j < cellXcount; j++) {
|
||||
grid.append("rect")
|
||||
.attr("x", i * cellWidth + gap/2)
|
||||
.attr("y", j * cellHeight + gap/2)
|
||||
.attr("width", cellWidth - gap)
|
||||
.attr("height", cellHeight - gap)
|
||||
.attr("fill", getColor(concentrations[state][i][j], maxC));
|
||||
}
|
||||
}
|
||||
|
||||
// Create Boundaries
|
||||
// left and right
|
||||
for (let j = 0; j < cellYcount; j++) {
|
||||
svg.append("rect")
|
||||
.attr("x", svgMargin.left - 10)
|
||||
.attr("y", svgMargin.top + j * cellHeight + gap/2)
|
||||
.attr("width", 7)
|
||||
.attr("height", cellHeight - gap)
|
||||
.attr("fill", getColor(leftBoundary[j], maxC));
|
||||
svg.append("rect")
|
||||
.attr("x", width - svgMargin.right + 3)
|
||||
.attr("y", svgMargin.top + j * cellHeight + gap/2)
|
||||
.attr("width", 7)
|
||||
.attr("height", cellHeight - gap)
|
||||
.attr("fill", getColor(rightBoundary[j], maxC));
|
||||
}
|
||||
|
||||
// top and bottom
|
||||
for (let i = 0; i < cellXcount; i++) {
|
||||
svg.append("rect")
|
||||
.attr("x", svgMargin.left + i * cellWidth + gap/2)
|
||||
.attr("y", svgMargin.top - 10)
|
||||
.attr("width", cellWidth - gap)
|
||||
.attr("height", 7)
|
||||
.attr("fill", getColor(topBoundary[i], maxC));
|
||||
svg.append("rect")
|
||||
.attr("x", svgMargin.left + i * cellWidth + gap/2)
|
||||
.attr("y", height - svgMargin.bottom + 3)
|
||||
.attr("width", cellWidth - gap)
|
||||
.attr("height", 7)
|
||||
.attr("fill", getColor(bottomBoundary[i], maxC));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateGrid(new_state) {
|
||||
var maxC = calcMaxConcentrationInIteration(new_state);
|
||||
console.log(maxC);
|
||||
grid.selectAll("rect")
|
||||
.attr("fill", function (d,i) {
|
||||
var row = Math.floor(i/20);
|
||||
var col = i%20;
|
||||
return getColor(concentrations[new_state][row][col], maxC);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// key events for changing grid iteration state
|
||||
addEventListener("keydown", (event) => {
|
||||
if (event.isComposing || event.keyCode === 81) {
|
||||
if (state > 0) {
|
||||
state -= 1;
|
||||
updateGrid(state);
|
||||
}
|
||||
}
|
||||
if (event.isComposing || event.keyCode === 69) {
|
||||
if (state < numIterations-1) {
|
||||
state += 1;
|
||||
updateGrid(state);
|
||||
}
|
||||
}
|
||||
if (event.isComposing || event.keyCode === 65) {
|
||||
if (state > 9) {
|
||||
state -= 10;
|
||||
} else {
|
||||
state = 0;
|
||||
}
|
||||
updateGrid(state);
|
||||
}
|
||||
if (event.isComposing || event.keyCode === 68) {
|
||||
if (state < numIterations-10) {
|
||||
state += 10;
|
||||
} else {
|
||||
state = numIterations-1;
|
||||
}
|
||||
updateGrid(state);
|
||||
}
|
||||
});
|
||||
|
||||
async function logFile() {
|
||||
var file = document.getElementById("c_file").files[0];
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file);
|
||||
console.log(reader.result);
|
||||
}
|
||||
|
||||
function reader(file, callback) {
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => callback(null, fr.result);
|
||||
fr.onerror = (err) => callback(err);
|
||||
fr.readAsText(file);
|
||||
}
|
||||
|
||||
|
||||
// document.getElementById("c_file").addEventListener("change", logFile);
|
||||
document.getElementById("c_file").addEventListener("change", (evt) => {
|
||||
// No files, do nothing.
|
||||
if (!evt.target.files) {
|
||||
return;
|
||||
}
|
||||
reader(evt.target.files[0], (err, res) => {
|
||||
console.log(res); // Base64 `data:image/...` String result.
|
||||
createVisualFromFile(res);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Append the SVG element.
|
||||
container.append(svg.node());
|
||||
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user