From b78c00635cc27c311a0f587cf313a790cf11b175 Mon Sep 17 00:00:00 2001
From: Tom Schindler <tom.schindler@student.uni-halle.de>
Date: Fri, 9 Aug 2024 20:13:24 +0200
Subject: [PATCH] =?UTF-8?q?StarPlot=20begonnen,=20Change=20Position=20Para?=
=?UTF-8?q?llel,=20Buttons=20f=C3=BCr=20wechseln=20Plot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/main.js | 494 ++++++++++++++++++++++--------------
src/Main.elm | 74 ++++--
src/Model.elm | 12 +
src/ParallelCoordinates.elm | 76 ++++--
src/Scatterplot.elm | 15 +-
src/Starplot.elm | 93 +++++++
src/TreeView.elm | 22 +-
7 files changed, 538 insertions(+), 248 deletions(-)
create mode 100644 src/Starplot.elm
diff --git a/public/main.js b/public/main.js
index 5ccb39f..e86b10f 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5417,9 +5417,9 @@ var $elm$core$Task$perform = F2(
A2($elm$core$Task$map, toMessage, task)));
});
var $elm$browser$Browser$element = _Browser_element;
-var $author$project$Model$Model = F6(
- function (data, error, csvdata, scatterplotOptions, parallelPlotOption, treeOption) {
- return {csvdata: csvdata, data: data, error: error, parallelPlotOption: parallelPlotOption, scatterplotOptions: scatterplotOptions, treeOption: treeOption};
+var $author$project$Model$Model = F8(
+ function (data, error, csvdata, scatterplotOptions, parallelPlotOption, treeOption, starplotOption, plotVisible) {
+ return {csvdata: csvdata, data: data, error: error, parallelPlotOption: parallelPlotOption, plotVisible: plotVisible, scatterplotOptions: scatterplotOptions, starplotOption: starplotOption, treeOption: treeOption};
});
var $author$project$Main$DataReceived = function (a) {
return {$: 'DataReceived', a: a};
@@ -6263,7 +6263,7 @@ var $gampleman$elm_visualization$Zoom$translateExtent = F2(
var $author$project$TreeView$w = 990;
var $author$project$Main$init = function (_v0) {
return _Utils_Tuple2(
- A6(
+ A8(
$author$project$Model$Model,
_List_Nil,
$elm$core$Maybe$Nothing,
@@ -6318,7 +6318,9 @@ var $author$project$Main$init = function (_v0) {
100,
$gampleman$elm_visualization$Zoom$init(
{height: $author$project$TreeView$h, width: $author$project$TreeView$w})))
- }),
+ },
+ {modelID: '0'},
+ {parallelCoordinatesPlot: false, scatterPlot: true, starPlot: false, treeView: false}),
$author$project$Main$fetchData);
};
var $author$project$Main$ZooomMsg = function (a) {
@@ -9237,7 +9239,7 @@ var $author$project$Main$update = F2(
}),
$elm$core$Platform$Cmd$none);
}
- default:
+ case 'ZooomMsg':
var m = msg.a;
return _Utils_Tuple2(
_Utils_update(
@@ -9248,6 +9250,41 @@ var $author$project$Main$update = F2(
}
}),
$elm$core$Platform$Cmd$none);
+ case 'StarplotMsg':
+ var _v3 = msg.a;
+ return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+ case 'SetViewScatterplot':
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ plotVisible: {parallelCoordinatesPlot: false, scatterPlot: true, starPlot: false, treeView: false}
+ }),
+ $elm$core$Platform$Cmd$none);
+ case 'SetViewParallelCoordesPlot':
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ plotVisible: {parallelCoordinatesPlot: true, scatterPlot: false, starPlot: false, treeView: false}
+ }),
+ $elm$core$Platform$Cmd$none);
+ case 'SetViewTree':
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ plotVisible: {parallelCoordinatesPlot: false, scatterPlot: false, starPlot: false, treeView: true}
+ }),
+ $elm$core$Platform$Cmd$none);
+ default:
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ plotVisible: {parallelCoordinatesPlot: false, scatterPlot: false, starPlot: true, treeView: false}
+ }),
+ $elm$core$Platform$Cmd$none);
}
});
var $author$project$Main$ParallelCoordinatesMsg = function (a) {
@@ -9256,18 +9293,40 @@ var $author$project$Main$ParallelCoordinatesMsg = function (a) {
var $author$project$Main$ScatterplotMsg = function (a) {
return {$: 'ScatterplotMsg', a: a};
};
+var $author$project$Main$SetViewParallelCoordesPlot = {$: 'SetViewParallelCoordesPlot'};
+var $author$project$Main$SetViewScatterplot = {$: 'SetViewScatterplot'};
+var $author$project$Main$SetViewStarPlot = {$: 'SetViewStarPlot'};
+var $author$project$Main$SetViewTree = {$: 'SetViewTree'};
+var $author$project$Main$StarplotMsg = function (a) {
+ return {$: 'StarplotMsg', a: a};
+};
var $author$project$Main$TreeViewMsg = function (a) {
return {$: 'TreeViewMsg', a: a};
};
+var $elm$html$Html$br = _VirtualDom_node('br');
+var $elm$html$Html$button = _VirtualDom_node('button');
var $elm$html$Html$div = _VirtualDom_node('div');
var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
-var $author$project$ParallelCoordinates$ChangeOrder = F2(
- function (a, b) {
- return {$: 'ChangeOrder', a: a, b: b};
+var $elm$virtual_dom$VirtualDom$Normal = function (a) {
+ return {$: 'Normal', a: a};
+};
+var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on;
+var $elm$html$Html$Events$on = F2(
+ function (event, decoder) {
+ return A2(
+ $elm$virtual_dom$VirtualDom$on,
+ event,
+ $elm$virtual_dom$VirtualDom$Normal(decoder));
});
-var $elm$html$Html$br = _VirtualDom_node('br');
-var $elm$html$Html$button = _VirtualDom_node('button');
+var $elm$html$Html$Events$onClick = function (msg) {
+ return A2(
+ $elm$html$Html$Events$on,
+ 'click',
+ $elm$json$Json$Decode$succeed(msg));
+};
+var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text;
+var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text;
var $elm$core$Maybe$andThen = F2(
function (callback, maybeValue) {
if (maybeValue.$ === 'Just') {
@@ -9401,26 +9460,10 @@ var $author$project$ParallelCoordinates$filterSPData = function (smartphone) {
var smartphoneList = A2($elm$core$List$filterMap, $author$project$ParallelCoordinates$mapToSPData, smartphone);
return smartphoneList;
};
-var $elm$virtual_dom$VirtualDom$Normal = function (a) {
- return {$: 'Normal', a: a};
-};
-var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on;
-var $elm$html$Html$Events$on = F2(
- function (event, decoder) {
- return A2(
- $elm$virtual_dom$VirtualDom$on,
- event,
- $elm$virtual_dom$VirtualDom$Normal(decoder));
- });
-var $elm$html$Html$Events$onClick = function (msg) {
- return A2(
- $elm$html$Html$Events$on,
- 'click',
- $elm$json$Json$Decode$succeed(msg));
-};
var $elm_community$typed_svg$TypedSvg$Types$Percent = function (a) {
return {$: 'Percent', a: a};
};
+var $author$project$ParallelCoordinates$axisPaddig = 40;
var $gampleman$elm_visualization$Scale$convert = F2(
function (_v0, value) {
var scale = _v0.a;
@@ -10205,7 +10248,13 @@ var $author$project$ParallelCoordinates$createLine = function (path) {
]))
]));
};
+var $elm_community$typed_svg$TypedSvg$Types$AnchorEnd = {$: 'AnchorEnd'};
var $elm_community$typed_svg$TypedSvg$Types$AnchorMiddle = {$: 'AnchorMiddle'};
+var $elm_community$typed_svg$TypedSvg$Types$AnchorStart = {$: 'AnchorStart'};
+var $author$project$ParallelCoordinates$ChangeOrder = F2(
+ function (a, b) {
+ return {$: 'ChangeOrder', a: a, b: b};
+ });
var $elm_community$typed_svg$TypedSvg$Types$Translate = F2(
function (a, b) {
return {$: 'Translate', a: a, b: b};
@@ -10222,8 +10271,6 @@ var $elm_community$typed_svg$TypedSvg$Attributes$fontSize = function (length) {
'font-size',
$elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length));
};
-var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text;
-var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text;
var $elm_community$typed_svg$TypedSvg$TypesToStrings$anchorAlignmentToString = function (anchorAlignment) {
switch (anchorAlignment.$) {
case 'AnchorInherit':
@@ -10322,6 +10369,16 @@ var $elm_community$typed_svg$TypedSvg$Attributes$transform = function (transform
A2($elm$core$List$map, $elm_community$typed_svg$TypedSvg$TypesToStrings$transformToString, transforms)));
};
var $elm_community$typed_svg$TypedSvg$Types$px = $elm_community$typed_svg$TypedSvg$Types$Px;
+var $elm_community$typed_svg$TypedSvg$Attributes$x = function (length) {
+ return A2(
+ $elm_community$typed_svg$TypedSvg$Core$attribute,
+ 'x',
+ $elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length));
+};
+var $elm_community$typed_svg$TypedSvg$Attributes$InPx$x = function (value) {
+ return $elm_community$typed_svg$TypedSvg$Attributes$x(
+ $elm_community$typed_svg$TypedSvg$Types$px(value));
+};
var $elm_community$typed_svg$TypedSvg$Attributes$y = function (length) {
return A2(
$elm_community$typed_svg$TypedSvg$Core$attribute,
@@ -10539,6 +10596,9 @@ var $author$project$ParallelCoordinates$yAxis = function (scale) {
var $author$project$ParallelCoordinates$createYAxis = F3(
function (scaleX, scaleY, text) {
var index = scaleY.a;
+ var indexF = index;
+ var indexafter = (index === 9) ? 0 : (index + 1);
+ var indexbefore = (!index) ? 9 : (index - 1);
return A2(
$elm_community$typed_svg$TypedSvg$g,
_List_fromArray(
@@ -10548,23 +10608,53 @@ var $author$project$ParallelCoordinates$createYAxis = F3(
[
A2(
$elm_community$typed_svg$TypedSvg$Types$Translate,
- A2($gampleman$elm_visualization$Scale$convert, scaleX, index),
- 20)
- ]))
+ A2($gampleman$elm_visualization$Scale$convert, scaleX, indexF),
+ $author$project$ParallelCoordinates$axisPaddig)
+ ])),
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['axis']))
]),
_List_fromArray(
[
A2(
$elm_community$typed_svg$TypedSvg$g,
+ _List_Nil,
_List_fromArray(
[
- $elm_community$typed_svg$TypedSvg$Attributes$class(
- _List_fromArray(
- ['axis']))
+ $author$project$ParallelCoordinates$yAxis(scaleY.b)
+ ])),
+ A2(
+ $elm_community$typed_svg$TypedSvg$text_,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(-10),
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(-30),
+ $elm_community$typed_svg$TypedSvg$Attributes$textAnchor($elm_community$typed_svg$TypedSvg$Types$AnchorEnd),
+ $elm_community$typed_svg$TypedSvg$Attributes$fontSize(
+ $elm_community$typed_svg$TypedSvg$Types$Px(10)),
+ $elm$html$Html$Events$onClick(
+ A2($author$project$ParallelCoordinates$ChangeOrder, index, indexbefore))
]),
_List_fromArray(
[
- $author$project$ParallelCoordinates$yAxis(scaleY.b)
+ $elm$html$Html$text('<<< ')
+ ])),
+ A2(
+ $elm_community$typed_svg$TypedSvg$text_,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(10),
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(-30),
+ $elm_community$typed_svg$TypedSvg$Attributes$textAnchor($elm_community$typed_svg$TypedSvg$Types$AnchorStart),
+ $elm_community$typed_svg$TypedSvg$Attributes$fontSize(
+ $elm_community$typed_svg$TypedSvg$Types$Px(10)),
+ $elm$html$Html$Events$onClick(
+ A2($author$project$ParallelCoordinates$ChangeOrder, index, indexafter))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('>>>')
])),
A2(
$elm_community$typed_svg$TypedSvg$text_,
@@ -11228,7 +11318,7 @@ var $author$project$ParallelCoordinates$wideExtent = function (values) {
var $author$project$ParallelCoordinates$xScale = function (values) {
return A2(
$gampleman$elm_visualization$Scale$linear,
- _Utils_Tuple2($author$project$ParallelCoordinates$padding, $author$project$ParallelCoordinates$w - $author$project$ParallelCoordinates$padding),
+ _Utils_Tuple2($author$project$ParallelCoordinates$padding, $author$project$ParallelCoordinates$w),
$author$project$ParallelCoordinates$wideExtent(values));
};
var $author$project$ParallelCoordinates$yScale = function (values) {
@@ -11293,7 +11383,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2(
return $elm$core$Maybe$Just(
_Utils_Tuple2(
A2($gampleman$elm_visualization$Scale$convert, xScaleLocal, x),
- A2($gampleman$elm_visualization$Scale$convert, yS, y) + 20));
+ A2($gampleman$elm_visualization$Scale$convert, yS, y) + $author$project$ParallelCoordinates$axisPaddig));
}),
yScaleLocals,
yPoints,
@@ -11373,7 +11463,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2(
$elm_community$typed_svg$TypedSvg$svg,
_List_fromArray(
[
- A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$ParallelCoordinates$w + 30, $author$project$ParallelCoordinates$h + 30),
+ A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$ParallelCoordinates$w + 45, $author$project$ParallelCoordinates$h + 45),
$elm_community$typed_svg$TypedSvg$Attributes$width(
$elm_community$typed_svg$TypedSvg$Types$Percent(100)),
$elm_community$typed_svg$TypedSvg$Attributes$height(
@@ -11387,7 +11477,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2(
_List_Nil,
_List_fromArray(
[
- $elm_community$typed_svg$TypedSvg$Core$text('\r\n .axis text { display: none; }\r\n .axis:hover text { display: inline; }\r\n .axis1:hover text {display: inline; }\r\n ')
+ $elm_community$typed_svg$TypedSvg$Core$text('\r\n .axis .tick text { display: none; }\r\n .axis:hover .tick text { display: inline; }\r\n ')
])),
A2($elm_community$typed_svg$TypedSvg$g, _List_Nil, _List_Nil)
]),
@@ -11400,107 +11490,6 @@ var $author$project$ParallelCoordinates$viewParallelCoordinates = function (mode
_List_Nil,
_List_fromArray(
[
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 0, 1))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('1<->2')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 1, 2))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('2<->3')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 2, 3))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('3<->4')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 3, 4))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('4<->5')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 4, 5))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('5<->6')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 5, 6))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('6<->7')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 6, 7))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('7<->8')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 7, 8))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('8<->9')
- ])),
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Events$onClick(
- A2($author$project$ParallelCoordinates$ChangeOrder, 8, 9))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('9<->10')
- ])),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
A2($author$project$ParallelCoordinates$parallelCoordinatesPlot, model, filteredSmartphoneData)
]));
};
@@ -11696,8 +11685,9 @@ var $author$project$Scatterplot$XyData = F3(
function (xDescription, yDescription, data) {
return {data: data, xDescription: xDescription, yDescription: yDescription};
});
-var $elm$core$Maybe$map3 = F4(
- function (func, ma, mb, mc) {
+var $elm$core$List$map4 = _List_map4;
+var $elm$core$Maybe$map4 = F5(
+ function (func, ma, mb, mc, md) {
if (ma.$ === 'Nothing') {
return $elm$core$Maybe$Nothing;
} else {
@@ -11710,18 +11700,24 @@ var $elm$core$Maybe$map3 = F4(
return $elm$core$Maybe$Nothing;
} else {
var c = mc.a;
- return $elm$core$Maybe$Just(
- A3(func, a, b, c));
+ if (md.$ === 'Nothing') {
+ return $elm$core$Maybe$Nothing;
+ } else {
+ var d = md.a;
+ return $elm$core$Maybe$Just(
+ A4(func, a, b, c, d));
+ }
}
}
}
});
var $author$project$Scatterplot$mapToPoint = function (smartphoneData) {
- return A4(
- $elm$core$Maybe$map3,
- F3(
- function (att1, att2, name) {
+ return A5(
+ $elm$core$Maybe$map4,
+ F4(
+ function (att1, att2, name, index) {
return {
+ id: index,
pointName: name + (' (' + ($elm$core$String$fromFloat(att1) + (',' + ($elm$core$String$fromFloat(att2) + ')')))),
x: att1,
y: att2
@@ -11729,7 +11725,8 @@ var $author$project$Scatterplot$mapToPoint = function (smartphoneData) {
}),
smartphoneData.att1,
smartphoneData.att2,
- smartphoneData.name);
+ smartphoneData.name,
+ smartphoneData.id);
};
var $author$project$Scatterplot$filterSmartphonesXY = F3(
function (model, att1List, att2List) {
@@ -11739,15 +11736,22 @@ var $author$project$Scatterplot$filterSmartphonesXY = F3(
return $.model;
},
model.data);
- var smartphoneDataList = A4(
- $elm$core$List$map3,
- F3(
- function (a1, a2, mn) {
- return {att1: a1, att2: a2, name: mn};
+ var idList = A2(
+ $elm$core$List$map,
+ function ($) {
+ return $.id;
+ },
+ model.data);
+ var smartphoneDataList = A5(
+ $elm$core$List$map4,
+ F4(
+ function (a1, a2, mn, i) {
+ return {att1: a1, att2: a2, id: i, name: mn};
}),
att1List,
att2List,
- modelList);
+ modelList,
+ idList);
var filteredSmartphones = A2($elm$core$List$filterMap, $author$project$Scatterplot$mapToPoint, smartphoneDataList);
return A3($author$project$Scatterplot$XyData, model.scatterplotOptions.attribute1, model.scatterplotOptions.attribute2, filteredSmartphones);
});
@@ -11795,16 +11799,6 @@ var $elm_community$typed_svg$TypedSvg$Attributes$InPx$r = function (value) {
$elm_community$typed_svg$TypedSvg$Types$px(value));
};
var $author$project$Scatterplot$radius = 2.0;
-var $elm_community$typed_svg$TypedSvg$Attributes$x = function (length) {
- return A2(
- $elm_community$typed_svg$TypedSvg$Core$attribute,
- 'x',
- $elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length));
-};
-var $elm_community$typed_svg$TypedSvg$Attributes$InPx$x = function (value) {
- return $elm_community$typed_svg$TypedSvg$Attributes$x(
- $elm_community$typed_svg$TypedSvg$Types$px(value));
-};
var $author$project$Scatterplot$point = F3(
function (scaleX, scaleY, xyPoint) {
return A2(
@@ -12058,6 +12052,91 @@ var $author$project$Scatterplot$viewScatterplot = function (model) {
$author$project$Scatterplot$scatterplot(filteredSmartphoneData)
]));
};
+var $author$project$Starplot$checkID = F2(
+ function (modelID, smartphone) {
+ return _Utils_eq(
+ A2($elm$core$Maybe$withDefault, 'NaN', smartphone.id),
+ modelID);
+ });
+var $author$project$Starplot$findSmartphoneById = function (model) {
+ return $elm$core$List$head(
+ A2(
+ $elm$core$List$filter,
+ $author$project$Starplot$checkID(model.starplotOption.modelID),
+ model.data));
+};
+var $author$project$Starplot$h = 450;
+var $elm_community$typed_svg$TypedSvg$Attributes$InPx$height = function (value) {
+ return $elm_community$typed_svg$TypedSvg$Attributes$height(
+ $elm_community$typed_svg$TypedSvg$Types$px(value));
+};
+var $author$project$Starplot$midX = 450;
+var $author$project$Starplot$midY = 225;
+var $elm_community$typed_svg$TypedSvg$rect = $elm_community$typed_svg$TypedSvg$Core$node('rect');
+var $avh4$elm_color$Color$rgba = F4(
+ function (r, g, b, a) {
+ return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, a);
+ });
+var $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth = function (value) {
+ return $elm_community$typed_svg$TypedSvg$Attributes$strokeWidth(
+ $elm_community$typed_svg$TypedSvg$Types$px(value));
+};
+var $author$project$Starplot$w = 990;
+var $elm_community$typed_svg$TypedSvg$Attributes$InPx$width = function (value) {
+ return $elm_community$typed_svg$TypedSvg$Attributes$width(
+ $elm_community$typed_svg$TypedSvg$Types$px(value));
+};
+var $author$project$Starplot$starplot = function (smartphone) {
+ var a = 1;
+ return A2(
+ $elm_community$typed_svg$TypedSvg$svg,
+ _List_fromArray(
+ [
+ A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$Starplot$w, $author$project$Starplot$h),
+ $elm_community$typed_svg$TypedSvg$Attributes$width(
+ $elm_community$typed_svg$TypedSvg$Types$Percent(100)),
+ $elm_community$typed_svg$TypedSvg$Attributes$height(
+ $elm_community$typed_svg$TypedSvg$Types$Percent(100))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm_community$typed_svg$TypedSvg$rect,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$width($author$project$Starplot$midX),
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$height($author$project$Starplot$midY),
+ $elm_community$typed_svg$TypedSvg$Attributes$fill(
+ $elm_community$typed_svg$TypedSvg$Types$Paint(
+ A4($avh4$elm_color$Color$rgba, 0, 0, 0, 0))),
+ $elm_community$typed_svg$TypedSvg$Attributes$stroke(
+ $elm_community$typed_svg$TypedSvg$Types$Paint($avh4$elm_color$Color$black)),
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth(2)
+ ]),
+ _List_Nil),
+ A2(
+ $elm_community$typed_svg$TypedSvg$text_,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(100),
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(100)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Test, hier entsteht bald ein StarPlot.')
+ ]))
+ ]));
+};
+var $author$project$Starplot$viewStarplot = function (model) {
+ var starplotData = $author$project$Starplot$findSmartphoneById(model);
+ return _Utils_eq(starplotData, $elm$core$Maybe$Nothing) ? A2(
+ $elm$html$Html$div,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Error: Starplot kann nicht dargestellt werden, da zu dieser Id keine Data vorliegen.')
+ ])) : $author$project$Starplot$starplot(starplotData);
+};
var $author$project$TreeView$ZoomMsg = function (a) {
return {$: 'ZoomMsg', a: a};
};
@@ -12451,10 +12530,6 @@ var $gampleman$elm_visualization$Zoom$events = F2(
A2($gampleman$elm_visualization$Zoom$onGesture, zoom, tagger),
A2($gampleman$elm_visualization$Zoom$onTouch, zoom, tagger)))));
});
-var $elm_community$typed_svg$TypedSvg$Attributes$InPx$height = function (value) {
- return $elm_community$typed_svg$TypedSvg$Attributes$height(
- $elm_community$typed_svg$TypedSvg$Types$px(value));
-};
var $author$project$TreeView$Click = function (a) {
return {$: 'Click', a: a};
};
@@ -14700,8 +14775,7 @@ var $elm$core$Result$withDefault = F2(
});
var $author$project$TreeView$tree = function (model) {
var filteredSmartphoneData = $author$project$TreeView$filterSPData(model.data);
- var lengthFSP = $elm$core$List$length(filteredSmartphoneData);
- var limitedfilteredSmartphones = A2($elm$core$List$drop, 0, filteredSmartphoneData);
+ var limitedfilteredSmartphones = A2($elm$core$List$drop, 500, filteredSmartphoneData);
return A2(
$gampleman$elm_rosetree$Tree$sortBy,
A2(
@@ -14904,11 +14978,6 @@ var $gampleman$elm_rosetree$Tree$links = function (t) {
_List_Nil,
t));
};
-var $elm_community$typed_svg$TypedSvg$rect = $elm_community$typed_svg$TypedSvg$Core$node('rect');
-var $avh4$elm_color$Color$rgba = F4(
- function (r, g, b, a) {
- return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, a);
- });
var $gampleman$elm_rosetree$Tree$foldr = F3(
function (f, acc, t) {
return A3(
@@ -14931,10 +15000,6 @@ var $gampleman$elm_visualization$Zoom$transform = function (_v0) {
return $elm$svg$Svg$Attributes$transform(
$gampleman$elm_visualization$Zoom$Transform$toString(zoom.transform));
};
-var $elm_community$typed_svg$TypedSvg$Attributes$InPx$width = function (value) {
- return $elm_community$typed_svg$TypedSvg$Attributes$width(
- $elm_community$typed_svg$TypedSvg$Types$px(value));
-};
var $author$project$TreeView$viewTree = function (model) {
return A2(
$elm_community$typed_svg$TypedSvg$svg,
@@ -14957,7 +15022,14 @@ var $author$project$TreeView$viewTree = function (model) {
$elm_community$typed_svg$TypedSvg$Attributes$fill(
$elm_community$typed_svg$TypedSvg$Types$Paint(
A4($avh4$elm_color$Color$rgba, 0, 0, 0, 0))),
- A2($gampleman$elm_visualization$Zoom$events, model.treeOption.zoomOption, $author$project$TreeView$ZoomMsg)))),
+ A2(
+ $elm$core$List$cons,
+ $elm_community$typed_svg$TypedSvg$Attributes$stroke(
+ $elm_community$typed_svg$TypedSvg$Types$Paint($avh4$elm_color$Color$black)),
+ A2(
+ $elm$core$List$cons,
+ $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth(2),
+ A2($gampleman$elm_visualization$Zoom$events, model.treeOption.zoomOption, $author$project$TreeView$ZoomMsg)))))),
_List_Nil),
A2(
$elm_community$typed_svg$TypedSvg$g,
@@ -15026,17 +15098,63 @@ var $author$project$Main$view = function (model) {
_List_fromArray(
[
A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewScatterplot)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Scatterplot')
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewParallelCoordesPlot)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('ParallelCoordinates')
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewTree)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('TreeView')
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewStarPlot)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Starplot')
+ ])),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ model.plotVisible.scatterPlot ? A2(
$elm$html$Html$map,
$author$project$Main$ScatterplotMsg,
- $author$project$Scatterplot$viewScatterplot(model)),
- A2(
+ $author$project$Scatterplot$viewScatterplot(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil),
+ model.plotVisible.parallelCoordinatesPlot ? A2(
$elm$html$Html$map,
$author$project$Main$ParallelCoordinatesMsg,
- $author$project$ParallelCoordinates$viewParallelCoordinates(model)),
- A2(
+ $author$project$ParallelCoordinates$viewParallelCoordinates(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil),
+ model.plotVisible.treeView ? A2(
$elm$html$Html$map,
$author$project$Main$TreeViewMsg,
- $author$project$TreeView$viewTree(model))
+ $author$project$TreeView$viewTree(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil),
+ model.plotVisible.starPlot ? A2(
+ $elm$html$Html$map,
+ $author$project$Main$StarplotMsg,
+ $author$project$Starplot$viewStarplot(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil)
]));
};
var $author$project$Main$main = $elm$browser$Browser$element(
diff --git a/src/Main.elm b/src/Main.elm
index c8506f2..4ad2ea4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -2,7 +2,8 @@ module Main exposing (..)
import Browser
import Csv.Decode as Decode exposing (Decoder)
-import Html exposing (Html, div)
+import Html exposing (Html, br, button, div, text)
+import Html.Events exposing (onClick)
import Http
import List.Extra
import Model exposing (Model)
@@ -10,6 +11,7 @@ import ParallelCoordinates exposing (Msg(..))
import Result exposing (Result(..))
import Scatterplot exposing (Msg(..))
import SmartPhoneType exposing (Smartphone)
+import Starplot exposing (Msg(..))
import TreeView exposing (Msg(..))
import Zoom
@@ -22,18 +24,6 @@ main =
Browser.element { init = init, update = update, subscriptions = subscriptions, view = view }
-
--- MODEL
-{- type alias Model =
- { data : List Smartphone
- , error : Maybe String
- , csvdata : String
- , scatterplotOptions : ScatterPlotOption
- , parallelPlotOption : ParallelPlotOption
- }
--}
-
-
init : () -> ( Model, Cmd Msg )
init _ =
( Model []
@@ -70,6 +60,13 @@ init _ =
|> Zoom.scaleExtent 1 100
|> Zoom.translateExtent ( ( 0, 0 ), ( TreeView.w, TreeView.h ) )
}
+ { modelID = "0"
+ }
+ { scatterPlot = True
+ , parallelCoordinatesPlot = False
+ , treeView = False
+ , starPlot = False
+ }
, fetchData
)
@@ -84,7 +81,12 @@ type Msg
| ScatterplotMsg Scatterplot.Msg
| ParallelCoordinatesMsg ParallelCoordinates.Msg
| TreeViewMsg TreeView.Msg
+ | StarplotMsg Starplot.Msg
| ZooomMsg Zoom.OnZoom
+ | SetViewScatterplot
+ | SetViewParallelCoordesPlot
+ | SetViewTree
+ | SetViewStarPlot
update : Msg -> Model -> ( Model, Cmd Msg )
@@ -151,6 +153,23 @@ update msg model =
ZooomMsg m ->
( { model | treeOption = { zoomOption = Zoom.update m model.treeOption.zoomOption } }, Cmd.none )
+ StarplotMsg Nothing1 ->
+ ( model
+ , Cmd.none
+ )
+
+ SetViewScatterplot ->
+ ( { model | plotVisible = { scatterPlot = True, parallelCoordinatesPlot = False, treeView = False, starPlot = False } }, Cmd.none )
+
+ SetViewParallelCoordesPlot ->
+ ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = True, treeView = False, starPlot = False } }, Cmd.none )
+
+ SetViewTree ->
+ ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = False, treeView = True, starPlot = False } }, Cmd.none )
+
+ SetViewStarPlot ->
+ ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = False, treeView = False, starPlot = True } }, Cmd.none )
+
createAttList : Model -> String -> List (Maybe Float)
createAttList model att =
@@ -195,9 +214,32 @@ createAttList model att =
view : Model -> Html Msg
view model =
div []
- [ Scatterplot.viewScatterplot model |> Html.map ScatterplotMsg
- , ParallelCoordinates.viewParallelCoordinates model |> Html.map ParallelCoordinatesMsg
- , TreeView.viewTree model |> Html.map TreeViewMsg
+ [ button [ onClick SetViewScatterplot ] [ text "Scatterplot" ]
+ , button [ onClick SetViewParallelCoordesPlot ] [ text "ParallelCoordinates" ]
+ , button [ onClick SetViewTree ] [ text "TreeView" ]
+ , button [ onClick SetViewStarPlot ] [ text "Starplot" ]
+ , br [] []
+ , br [] []
+ , if model.plotVisible.scatterPlot then
+ Scatterplot.viewScatterplot model |> Html.map ScatterplotMsg
+
+ else
+ div [] []
+ , if model.plotVisible.parallelCoordinatesPlot then
+ ParallelCoordinates.viewParallelCoordinates model |> Html.map ParallelCoordinatesMsg
+
+ else
+ div [] []
+ , if model.plotVisible.treeView then
+ TreeView.viewTree model |> Html.map TreeViewMsg
+
+ else
+ div [] []
+ , if model.plotVisible.starPlot then
+ Starplot.viewStarplot model |> Html.map StarplotMsg
+
+ else
+ div [] []
]
diff --git a/src/Model.elm b/src/Model.elm
index c1f0075..02e8b1c 100644
--- a/src/Model.elm
+++ b/src/Model.elm
@@ -11,6 +11,13 @@ type alias Model =
, scatterplotOptions : ScatterPlotOption
, parallelPlotOption : ParallelPlotOption
, treeOption : TreeOption
+ , starplotOption : StarPlotOption
+ , plotVisible :
+ { scatterPlot : Bool
+ , parallelCoordinatesPlot : Bool
+ , treeView : Bool
+ , starPlot : Bool
+ }
}
@@ -31,3 +38,8 @@ type alias ParallelPlotOption =
type alias TreeOption =
{ zoomOption : Zoom
}
+
+
+type alias StarPlotOption =
+ { modelID : String
+ }
diff --git a/src/ParallelCoordinates.elm b/src/ParallelCoordinates.elm
index 5018607..f5933ba 100644
--- a/src/ParallelCoordinates.elm
+++ b/src/ParallelCoordinates.elm
@@ -5,7 +5,7 @@ module ParallelCoordinates exposing (..)
import Axis exposing (..)
import Color
import ExtendedFunctions exposing (listmap10, map10)
-import Html exposing (Html, br, button, text)
+import Html exposing (Html, text)
import Html.Events exposing (onClick)
import List
import Maybe
@@ -37,6 +37,11 @@ padding =
50
+axisPaddig : Float
+axisPaddig =
+ 40
+
+
tickCount : Int
tickCount =
3
@@ -47,7 +52,7 @@ defaultExtent =
( 0, 200000 )
-parallelCoordinatesPlot : Model -> List Smartphone -> Svg msg
+parallelCoordinatesPlot : Model -> List Smartphone -> Svg Msg
parallelCoordinatesPlot model smartphonesList =
let
getAttributeList : (Smartphone -> Maybe Float) -> List Smartphone -> List (Maybe Float)
@@ -129,7 +134,7 @@ parallelCoordinatesPlot model smartphonesList =
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
yPointsScaled =
- List.map3 (\yS y x -> Just ( Scale.convert xScaleLocal x, Scale.convert yS y + 20 )) yScaleLocals yPoints xPoints
+ List.map3 (\yS y x -> Just ( Scale.convert xScaleLocal x, Scale.convert yS y + axisPaddig )) yScaleLocals yPoints xPoints
in
yPointsScaled |> Shape.line Shape.linearCurve
@@ -137,14 +142,13 @@ parallelCoordinatesPlot model smartphonesList =
List.map createLine paths
in
svg
- [ viewBox 0 0 (w + 30) (h + 30)
+ [ viewBox 0 0 (w + 45) (h + 45)
, TypedSvg.Attributes.width <| TypedSvg.Types.Percent 100
, TypedSvg.Attributes.height <| TypedSvg.Types.Percent 100
]
([ style [] [ TypedSvg.Core.text """
- .axis text { display: none; }
- .axis:hover text { display: inline; }
- .axis1:hover text {display: inline; }
+ .axis .tick text { display: none; }
+ .axis:hover .tick text { display: inline; }
""" ]
, g [] []
]
@@ -164,14 +168,37 @@ createLine path =
]
-createYAxis : ContinuousScale Float -> ( Int, ContinuousScale Float ) -> String -> Svg msg
+createYAxis : ContinuousScale Float -> ( Int, ContinuousScale Float ) -> String -> Svg Msg
createYAxis scaleX scaleY text =
let
index =
- Tuple.first scaleY |> toFloat
+ Tuple.first scaleY
+
+ indexF =
+ index |> toFloat
+
+ indexbefore =
+ if index == 0 then
+ 9
+
+ else
+ index - 1
+
+ indexafter =
+ if index == 9 then
+ 0
+
+ else
+ index + 1
in
- g [ transform [ Translate (Scale.convert scaleX index) 20 ] ]
- [ g [ class [ "axis" ] ] [ yAxis (Tuple.second scaleY) ]
+ g [ transform [ Translate (Scale.convert scaleX indexF) axisPaddig ], class [ "axis" ] ]
+ [ g [] [ yAxis (Tuple.second scaleY) ]
+ , text_
+ [ x -10, y -30, textAnchor AnchorEnd, fontSize <| Px 10, onClick (ChangeOrder index indexbefore) ]
+ [ Html.text "<<< " ]
+ , text_
+ [ x 10, y -30, textAnchor AnchorStart, fontSize <| Px 10, onClick (ChangeOrder index indexafter) ]
+ [ Html.text ">>>" ]
, text_
[ y -10, textAnchor AnchorMiddle, fontSize <| Px 14 ]
[ Html.text text ]
@@ -185,7 +212,7 @@ yAxis scale =
xScale : List Float -> ContinuousScale Float
xScale values =
- Scale.linear ( padding, w - padding ) (wideExtent values)
+ Scale.linear ( padding, w ) (wideExtent values)
yScale : List Float -> ContinuousScale Float
@@ -297,18 +324,19 @@ viewParallelCoordinates model =
filterSPData model.data
in
Html.div []
- [ button [ onClick (ChangeOrder 0 1) ] [ text "1<->2" ]
- , button [ onClick (ChangeOrder 1 2) ] [ text "2<->3" ]
- , button [ onClick (ChangeOrder 2 3) ] [ text "3<->4" ]
- , button [ onClick (ChangeOrder 3 4) ] [ text "4<->5" ]
- , button [ onClick (ChangeOrder 4 5) ] [ text "5<->6" ]
- , button [ onClick (ChangeOrder 5 6) ] [ text "6<->7" ]
- , button [ onClick (ChangeOrder 6 7) ] [ text "7<->8" ]
- , button [ onClick (ChangeOrder 7 8) ] [ text "8<->9" ]
- , button [ onClick (ChangeOrder 8 9) ] [ text "9<->10" ]
- , br [] []
- , br [] []
- , parallelCoordinatesPlot model filteredSmartphoneData
+ [ {- button [ onClick (ChangeOrder 0 1) ] [ text "1<->2" ]
+ , button [ onClick (ChangeOrder 1 2) ] [ text "2<->3" ]
+ , button [ onClick (ChangeOrder 2 3) ] [ text "3<->4" ]
+ , button [ onClick (ChangeOrder 3 4) ] [ text "4<->5" ]
+ , button [ onClick (ChangeOrder 4 5) ] [ text "5<->6" ]
+ , button [ onClick (ChangeOrder 5 6) ] [ text "6<->7" ]
+ , button [ onClick (ChangeOrder 6 7) ] [ text "7<->8" ]
+ , button [ onClick (ChangeOrder 7 8) ] [ text "8<->9" ]
+ , button [ onClick (ChangeOrder 8 9) ] [ text "9<->10" ]
+ , br [] []
+ , br [] []
+ -}
+ parallelCoordinatesPlot model filteredSmartphoneData
]
diff --git a/src/Scatterplot.elm b/src/Scatterplot.elm
index 760b4aa..b86821e 100644
--- a/src/Scatterplot.elm
+++ b/src/Scatterplot.elm
@@ -173,7 +173,7 @@ yAxis values =
type alias Point =
- { pointName : String, x : Float, y : Float }
+ { pointName : String, id : String, x : Float, y : Float }
type alias XyData =
@@ -189,8 +189,11 @@ filterSmartphonesXY model att1List att2List =
modelList =
List.map .model model.data
+ idList =
+ List.map .id model.data
+
smartphoneDataList =
- List.map3 (\a1 a2 mn -> { att1 = a1, att2 = a2, name = mn }) att1List att2List modelList
+ List.map4 (\a1 a2 mn i -> { att1 = a1, att2 = a2, name = mn, id = i }) att1List att2List modelList idList
filteredSmartphones =
List.filterMap mapToPoint smartphoneDataList
@@ -198,11 +201,12 @@ filterSmartphonesXY model att1List att2List =
XyData model.scatterplotOptions.attribute1 model.scatterplotOptions.attribute2 filteredSmartphones
-mapToPoint : { att1 : Maybe Float, att2 : Maybe Float, name : Maybe String } -> Maybe Point
+mapToPoint : { att1 : Maybe Float, att2 : Maybe Float, name : Maybe String, id : Maybe String } -> Maybe Point
mapToPoint smartphoneData =
- Maybe.map3
- (\att1 att2 name ->
+ Maybe.map4
+ (\att1 att2 name index ->
{ pointName = name ++ " (" ++ String.fromFloat att1 ++ "," ++ String.fromFloat att2 ++ ")"
+ , id = index
, x = att1
, y = att2
}
@@ -210,6 +214,7 @@ mapToPoint smartphoneData =
smartphoneData.att1
smartphoneData.att2
smartphoneData.name
+ smartphoneData.id
viewScatterplot : Model -> Html Msg
diff --git a/src/Starplot.elm b/src/Starplot.elm
new file mode 100644
index 0000000..1a4ac53
--- /dev/null
+++ b/src/Starplot.elm
@@ -0,0 +1,93 @@
+module Starplot exposing (..)
+
+import Color
+import Html exposing (Html, div, text)
+import List
+import Model exposing (Model)
+import SmartPhoneType exposing (Smartphone)
+import TypedSvg exposing (rect, svg, text_)
+import TypedSvg.Attributes exposing (fill, stroke, viewBox)
+import TypedSvg.Attributes.InPx exposing (height, strokeWidth, width, x, y)
+import TypedSvg.Core exposing (Svg)
+import TypedSvg.Types exposing (AnchorAlignment(..), Length(..), Paint(..), Transform(..))
+
+
+w : Float
+w =
+ 990
+
+
+h : Float
+h =
+ 450
+
+
+midX : Float
+midX =
+ 450
+
+
+midY : Float
+midY =
+ 225
+
+
+padding : Float
+padding =
+ 30
+
+
+starlength : Float
+starlength =
+ 100
+
+
+type Msg
+ = Nothing1
+
+
+starplot : Maybe Smartphone -> Svg msg
+starplot smartphone =
+ let
+ a =
+ 1
+ in
+ svg
+ [ viewBox 0 0 w h
+ , TypedSvg.Attributes.width <| TypedSvg.Types.Percent 100
+ , TypedSvg.Attributes.height <| TypedSvg.Types.Percent 100
+ ]
+ [ rect
+ [ width midX
+ , height midY
+ , fill (Paint (Color.rgba 0 0 0 0))
+ , stroke (Paint Color.black)
+ , strokeWidth 2
+ ]
+ []
+ , text_ [ x 100, y 100 ] [ text "Test, hier entsteht bald ein StarPlot." ]
+ ]
+
+
+findSmartphoneById : Model -> Maybe Smartphone
+findSmartphoneById model =
+ List.head <|
+ List.filter (checkID model.starplotOption.modelID) model.data
+
+
+checkID : String -> Smartphone -> Bool
+checkID modelID smartphone =
+ Maybe.withDefault "NaN" smartphone.id == modelID
+
+
+viewStarplot : Model -> Html Msg
+viewStarplot model =
+ let
+ starplotData =
+ findSmartphoneById model
+ in
+ if starplotData == Maybe.Nothing then
+ div [] [ text "Error: Starplot kann nicht dargestellt werden, da zu dieser Id keine Data vorliegen." ]
+
+ else
+ starplot starplotData
diff --git a/src/TreeView.elm b/src/TreeView.elm
index ab563ba..7e3e1c7 100644
--- a/src/TreeView.elm
+++ b/src/TreeView.elm
@@ -2,7 +2,7 @@ module TreeView exposing (..)
import Color
import Curve
-import ExtendedFunctions exposing (map10, map21)
+import ExtendedFunctions exposing (map10)
import Hierarchy
import List.Extra
import Model exposing (Model)
@@ -12,7 +12,7 @@ import SmartPhoneType exposing (Smartphone)
import Tree exposing (Tree)
import TypedSvg exposing (g, rect, svg)
import TypedSvg.Attributes exposing (dy, fill, href, id, pointerEvents, stroke, style, textAnchor, transform, viewBox)
-import TypedSvg.Attributes.InPx exposing (fontSize, height, width, x, y)
+import TypedSvg.Attributes.InPx exposing (fontSize, height, strokeWidth, width, x, y)
import TypedSvg.Core exposing (Svg)
import TypedSvg.Events
import TypedSvg.Types exposing (AnchorAlignment(..), ClipPath(..), Paint(..), Transform(..), em)
@@ -144,6 +144,8 @@ viewTree model =
(width w
:: height h
:: fill (Paint (Color.rgba 0 0 0 0))
+ :: stroke (Paint Color.black)
+ :: strokeWidth 2
:: Zoom.events model.treeOption.zoomOption ZoomMsg
)
[]
@@ -294,7 +296,9 @@ tree model =
-- lengthFSP =
-- List.length filteredSmartphoneData
limitedfilteredSmartphones =
- List.drop 0 filteredSmartphoneData
+ List.drop 500 filteredSmartphoneData
+
+ -- drop 500 Smartphones später auswählen Attribute
in
Tree.stratifyWithPath
{ path = \item -> String.split "." item.name
@@ -421,15 +425,3 @@ mapToSPData smartphone =
smartphone.card
smartphone.os
-}
-
-
-data : List { name : String, size : Float }
-data =
- [ { name = "flare.analytics.cluster.Battery:100", size = 1000 }
- , { name = "flare.analytics.cluster.CommunityStructure", size = 1000 }
- , { name = "flare.analytics.cluster.HierarchicalCluster", size = 1000 }
- , { name = "flare.analytics.cluster.MergeEdge", size = 1000 }
- , { name = "flare.analytics.graph.BetweennessCentrality", size = 3534 }
- , { name = "flare.analytics.graph.LinkDistance", size = 5731 }
- , { name = "flare.analytics.graph.MaxFlowMinCut", size = 7840 }
- ]
--
GitLab