Skip to content

Commit

Permalink
Merge pull request #12 from esg-epfl-apc/jsvis-prototype
Browse files Browse the repository at this point in the history 
Jsvis prototype
  • Loading branch information
@francoismg
francoismg authored Dec 3, 2024
2 parents 523b866 + dc342c5 commit 411877a
Show file tree
Hide file tree
Showing 66 changed files with 13,823 additions and 436 deletions.
11 changes: 8 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@
"description": "",
"version": "0.0.1",
"config": {
"prototype": "test"
"prototype": "jsvis"
},
"scripts": {
"build-preview": "mkdir -p preview; cp -r prototypes/${npm_package_config_prototype}/* preview/."
"build-preview": "mkdir -p preview; cp -r prototypes/${npm_package_config_prototype}/* preview/."
},
"dependencies": {
"bootstrap": "^5.3.3",
"css-loader": "^7.1.2",
"style-loader": "^4.0.0"
}
}
}
10 changes: 0 additions & 10 deletions prototypes/jsvis/bokehWrapper.js → prototypes/jsvis/_old/bokehWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,6 @@ function createGraph(fits_file, settings) {
let scales = null;

if(settings) {
console.log("Axis");
console.log(settings['select-axis-x']);
console.log(settings['select-axis-y']);

console.log("Error bars");
console.log(settings['select-axis-x-error-bars']);
console.log(settings['select-axis-y-error-bars']);

console.log(settings['select-axis-x']);
console.log(settings['select-axis-y']);

let x_column = settings['select-axis-x'].value;
let y_column = settings['select-axis-y'].value;
Expand Down
102 changes: 12 additions & 90 deletions prototypes/jsvis/d3Wrapper.js → prototypes/jsvis/_old/d3Wrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,19 @@ let margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

function createGraph0(container, data, settings = null) {
function instantiateGraph(container, data, settings = null) {

}

function createGraphLightCurve(data, settings) {

console.log(data);
console.log(settings);
}

function createGraphSpectrum(data, settings) {

}

function createGraph0(container, data, settings = null) {

dataset = data;
settings_data = settings;
Expand Down Expand Up @@ -56,15 +65,6 @@ function createGraph0(container, data, settings = null) {

if(settings) {

console.log("Axis settings");

console.log("Axis")
console.log(settings['select-axis-x-scale']);
console.log(settings['select-axis-y-scale']);

console.log(settings['select-axis-x']);
console.log(settings['select-axis-y']);

let x_scale = settings['select-axis-x-scale'].value;
let y_scale = settings['select-axis-y-scale'].value;

Expand All @@ -74,10 +74,6 @@ function createGraph0(container, data, settings = null) {
}

try {
console.log("Error bars")
console.log(settings['select-axis-x-error-bars']);
console.log(settings['select-axis-y-error-bars']);

let error_bar_x_column = settings['select-axis-x-error-bars'].value;
let error_bar_y_column = settings['select-axis-y-error-bars'].value;
} catch(e) {
Expand Down Expand Up @@ -167,10 +163,8 @@ function createGraph0(container, data, settings = null) {
let y_data = 'RATE';

if(settings) {
console.log('settings');
x_data = settings['select-axis-x'].value;
y_data = settings['select-axis-y'].value;
console.log(x_data + ' ' + y_data);
} else {
x_data = 'TIME';
y_data = 'RATE';
Expand Down Expand Up @@ -224,15 +218,9 @@ function createAxis(data, settings, _svg, width, height, scales) {
"log": d3.scaleLog
};

console.log(settings['select-axis-x']);
console.log(settings['select-axis-y']);

let x_axis_col = settings['select-axis-x'].value;
let y_axis_col = settings['select-axis-y'].value;

console.log("Axis columns");
console.log(x_axis_col+" "+y_axis_col);

let _x = scale_functions[scales.x]()
.domain(d3.extent(data, d => d[x_axis_col]))
.range([ 0, width ]);
Expand Down Expand Up @@ -280,8 +268,6 @@ function createAxis(data, settings, _svg, width, height, scales) {

function updateChart(e) {

console.log(e);

let newX = e.transform.rescaleX(x);
let newY = e.transform.rescaleY(y);

Expand Down Expand Up @@ -323,10 +309,8 @@ function updateChart(e) {
let y_data;

if(settings_data) {
console.log('settings data');
x_data = settings_data['select-axis-x'].value;
y_data = settings_data['select-axis-y'].value;
console.log(x_data + ' ' + y_data);
} else {
x_data = 'TIME';
y_data = 'RATE';
Expand Down Expand Up @@ -375,65 +359,3 @@ function updateChart(e) {
})
*/
}

function createGraph1(container, data) {

const margin = {top: 50, right: 30, bottom: 30, left: 60},
width = 460,
height = 450;

let svg = d3.select(container)
.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 + ")");

let x = d3.scaleLinear()
.domain(d3.extent(data, d => d.time))
.range([ 0, width ]);

let xAxis = svg.append("g")
.attr("id", "x_demo")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)
.tickFormat(d3.format(".1f")))
.call(g => g.selectAll(".tick line").clone()
.attr("class", "tick-line")
.attr("y2", -height)
.attr("stroke-opacity", 0.2))

let y = d3.scaleLinear()
.domain(d3.extent(data, d => d.rate))
.range([ height, 0]);

let ylog = d3.scaleLog()
.domain([1, d3.max(data, d => d.rate)])
.range([ height, 0]);

let yAxis = svg.append("g")
.attr("id", "y_demo")
.call(d3.axisLeft(y)
.tickFormat(d3.format(".1f")))
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width)
.attr("stroke-opacity", 0.2));

yAxis.select(".tick:last-of-type text").clone()
.attr("id", "y-label")
.attr("x", 3)
.attr("y", -5)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Rate");

xAxis.select(".tick:last-of-type text").clone()
.attr("id", "y-label")
.attr("y", -11)
.attr("x", 2)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Time");

}
Loading

0 comments on commit 411877a

Please sign in to comment.