Skip to content

Commit c4fb2b0

Browse files
GarreBrennjakemarotta
GarreBrenn
and
jakemarotta
authored
Make error bars gray if not selected (CIRDLES#20)
* Make error bars gray if not selected * Adds basic scatter plot demo * demo fixes * adds data * Properly associates error bar parts with data rows * Add show_unincluded plot option * Enable reset view on hide_unselected data to properly set extents Co-authored-by: Jake Marotta <[email protected]>
1 parent 41637c7 commit c4fb2b0

File tree

11 files changed

+547
-19
lines changed

11 files changed

+547
-19
lines changed

‎@types/plots/const.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export declare const enum Option {
2929
LAMBDA_235 = "lambda_235",
3030
LAMBDA_238 = "lambda_238",
3131
R238_235S = "R238_235S",
32+
SHOW_UNINCLUDED = "show_unincluded",
3233
POINTS = "points",
3334
POINTS_FILL = "points_fill",
3435
POINTS_OPACITY = "points_opacity",

‎demo/scatter-plot/index.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/* split.js */
2+
.gutter {
3+
background-color: #eee;
4+
background-repeat: no-repeat;
5+
background-position: 50%;
6+
}
7+
.gutter.gutter-horizontal {
8+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
9+
cursor: col-resize;
10+
}
11+
.gutter.gutter-vertical {
12+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
13+
cursor: row-resize;
14+
}
15+
.split {
16+
-webkit-box-sizing: border-box;
17+
-moz-box-sizing: border-box;
18+
box-sizing: border-box;
19+
}
20+
21+
/* DEMO */
22+
html, body, .demo-container {
23+
width: 100vw;
24+
height: 100vh;
25+
margin: 0;
26+
}
27+
label {
28+
color: slategray;
29+
margin: 0;
30+
}
31+
.h-center {
32+
display: flex;
33+
flex-flow: row;
34+
align-items: center;
35+
}
36+
.flex-0 {
37+
flex: 0;
38+
}
39+
.flex-1 {
40+
flex: 1;
41+
}
42+
.small-label {
43+
font-size: 12px;
44+
}
45+
.demo-container {
46+
display: flex;
47+
flex-flow: row;
48+
align-items: stretch;
49+
}
50+
#scatter-plot {
51+
52+
}
53+
#options-panel {
54+
position: relative;
55+
background-color: lightgray;
56+
}
57+
#options-panel > #options-panel-inner {
58+
display: inline-block;
59+
padding: 15px;
60+
height: calc(100% - 30px);
61+
width: 100%;
62+
max-width: 500px;
63+
}
64+
#options-panel > #options-panel-inner > *:not(:last-child) {
65+
margin-bottom: 10px;
66+
}
67+
#options-panel .option {
68+
display: flex;
69+
flex-flow: row;
70+
align-items: center;
71+
}
72+
#options-panel .option > label {
73+
font-size: 14px;
74+
width: 100px;
75+
}
76+
#options-panel .option > label ~ * {
77+
margin-right: 5px;
78+
}
79+
#options-panel .option input[type="checkbox"] {
80+
margin-right: 10px;
81+
margin-left: 0;
82+
flex: 0;
83+
}
84+
#options-panel .option :not(label) {
85+
flex: 1 0 auto;
86+
}
87+
#options-panel .divider {
88+
background-color: slategray;
89+
}
90+
#options-panel .divider.horizontal {
91+
height: 1px;
92+
width: 100%;
93+
margin: 15px 0 15px 10px;
94+
}
95+
#options-panel .divider.vertical {
96+
height: 100%;
97+
width: 1px;
98+
margin: 10px 15px 0px 15px;
99+
}

‎demo/scatter-plot/index.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Topsoil Test</title>
7+
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
8+
<script src="../../dist/topsoil.js"></script>
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10+
<link rel="stylesheet" href="index.css">
11+
</head>
12+
<body>
13+
<div class="demo-container">
14+
<div id="scatter-plot" class="split"></div>
15+
<div id="options-panel" class="split">
16+
<div id="options-panel-inner">
17+
18+
<div class="option">
19+
<label for="title">Title:</label>
20+
<input id="title" type="text" name="title" class="option-control" oninput="setOption(event)">
21+
</div>
22+
<div class="option">
23+
<label for="x_axis">X Axis:</label>
24+
<input id="x_axis" type="text" name="x_axis" class="option-control" oninput="setOption(event)">
25+
</div>
26+
<div class="option">
27+
<label for="y_axis">Y Axis:</label>
28+
<input id="y_axis" type="text" name="y_axis" class="option-control" oninput="setOption(event)">
29+
</div>
30+
31+
<div class="horizontal divider"></div>
32+
33+
<div class="option">
34+
<label for="isotope_system">Iso. System:</label>
35+
<select id="isotope_system" name="isotope_system" disabled oninput="setOption(event)">
36+
<option value="Uranium Lead">U-Pb</option>
37+
<option value="Uranium Lead">U-Th</option>
38+
</select>
39+
</div>
40+
<div class="option">
41+
<label for="uncertainty">Uncertainty:</label>
42+
<select id="uncertainty" name="uncertainty" oninput="setOption(event)">
43+
<option value="1">1σ</option>
44+
<option value="2">2σ</option>
45+
<option value="2.4477">95% Confidence</option>
46+
</select>
47+
</div>
48+
49+
<div class="horizontal divider"></div>
50+
51+
<div class="option">
52+
<label for="points">Points:</label>
53+
<div class="h-center">
54+
<input id="points" name="points" type="checkbox" oninput="setOption(event)">
55+
<input id="points_fill" name="points_fill" type="color" oninput="setOption(event)">
56+
</div>
57+
</div>
58+
<div class="option">
59+
<label for="ellipses">Ellipses:</label>
60+
<div class="h-center">
61+
<input id="ellipses" name="ellipses" type="checkbox" oninput="setOption(event)">
62+
<input id="ellipses_fill" name="ellipses_fill" type="color" oninput="setOption(event)">
63+
</div>
64+
</div>
65+
<div class="option">
66+
<label for="error_bars">Error Bars:</label>
67+
<div class="h-center">
68+
<input id="error_bars" name="error_bars" type="checkbox" oninput="setOption(event)">
69+
<input id="error_bars_fill" name="error_bars_fill" type="color" oninput="setOption(event)">
70+
</div>
71+
</div>
72+
73+
<div class="horizontal divider"></div>
74+
75+
<div class="option">
76+
<label for="concordia_line">Concordia:</label>
77+
<div class="d-flex flex-column align-items-stretch">
78+
<div class="h-center">
79+
<input id="concordia_line" name="concordia_line" type="checkbox" oninput="setOption(event)">
80+
<select id="concordia_type" name="concordia_type" class="flex-grow-1">
81+
<option value="wetherill">Wetherill</option>
82+
<option value="tera-wasserburg">Tera-Wasserburg</option>
83+
</select>
84+
</div>
85+
<div class="h-center mt-1">
86+
<label for="concordia_line_fill" class="small-label mr-1">Line:</label>
87+
<input id="concordia_line_fill" name="concordia_line_fill" type="color" class="flex-1" oninput="setOption(event)">
88+
<label for="concordia_envelope_fill" class="small-label ml-2 mr-1">Envelope:</label>
89+
<input id="concortia_envelope_fill" name="concortia_envelope_fill" type="color" class="flex-1" oninput="setOption(event)">
90+
</div>
91+
</div>
92+
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
<script src="index.js"></script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)