Skip to content

P
purescript-reactix-d3
Commit 411bbf77 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[example] use infix operators

parent 9459a250
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 61 deletions
example/dist/index.html
View file @ 411bbf77
......@@ -31,6 +31,7 @@
<div id="axis"></div>
<div id="time-axis"></div>
<div id="links"></div>
<div id="reset-zoom">Reset zoom</div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready -->
<script type="text/javascript" src="/index.fd532818.js"></script>
......
example/index.html
View file @ 411bbf77
......@@ -32,6 +32,7 @@
<div id="axis"></div>
<div id="time-axis"></div>
<div id="links"></div>
<div id="reset-zoom">Reset zoom</div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready -->
<script type="text/javascript" src="index.js"></script>
......
example/index.js
View file @ 411bbf77
......@@ -3095,6 +3095,8 @@ var PS = {};
"use strict";
$PS["Graphics.D3.Selection"] = $PS["Graphics.D3.Selection"] || {};
var exports = $PS["Graphics.D3.Selection"];
var Control_Bind = $PS["Control.Bind"];
var Effect = $PS["Effect"];
var Graphics_D3_Util = $PS["Graphics.D3.Util"];
var Joinable = function (join) {
this.join = join;
......@@ -3171,23 +3173,50 @@ var PS = {};
var attr$prime = function (dict) {
return dict["attr'"];
};
var combineAttr$prime = function (dictExisting) {
return function (dictAttrValue) {
return function (m) {
return function (v) {
return Control_Bind.bind(Effect.bindEffect)(m)(attr$prime(dictExisting)(dictAttrValue)(v.value0)(v.value1));
};
};
};
};
var attr = function (dict) {
return dict.attr;
};
var combineAttr = function (dictExisting) {
return function (dictAttrValue) {
return function (m) {
return function (v) {
return Control_Bind.bind(Effect.bindEffect)(m)(attr(dictExisting)()(v.value0)(v.value1));
};
};
};
};
var appendableSelection = new Appendable(unsafeAppend);
var appendableEnter = new Appendable(unsafeAppend);
var append = function (dict) {
return dict.append;
};
var combineAppend = function (dictAppendable) {
return function (m) {
return function (g) {
return Control_Bind.bind(Effect.bindEffect)(m)(append(dictAppendable)(g));
};
};
};
exports["rootSelect"] = rootSelect;
exports["selectAll"] = selectAll;
exports["bindData"] = bindData;
exports["enter"] = enter;
exports["append"] = append;
exports["combineAppend"] = combineAppend;
exports["join"] = join;
exports["classed"] = classed;
exports["attr"] = attr;
exports["attr'"] = attr$prime;
exports["combineAttr"] = combineAttr;
exports["combineAttr'"] = combineAttr$prime;
exports["style''"] = style$prime$prime;
exports["text'"] = text$prime;
exports["appendableSelection"] = appendableSelection;
......@@ -3220,7 +3249,7 @@ var PS = {};
exports["scaleTimeScale"] = scaleTimeScale;
})(PS);
(function(exports) {
'use strict';
'use strict';
exports.onImpl = function(key, func, z) { return z.on(key, func); };
})(PS["Graphics.D3.Zoom"] = PS["Graphics.D3.Zoom"] || {});
......@@ -3232,24 +3261,24 @@ var PS = {};
var $foreign = $PS["Graphics.D3.Zoom"];
var Effect_Uncurried = $PS["Effect.Uncurried"];
var Graphics_D3_Util = $PS["Graphics.D3.Util"];
var ZoomEvent = function (transform) {
var Transformable = function (transform) {
this.transform = transform;
};
};
var zoom = Graphics_D3_Util.ffiD3([ "" ])("d3.zoom()");
var unsafeTransform = Graphics_D3_Util.ffi([ "zoomEvent" ])("zoomEvent.transform");
var unsafeTransform = Graphics_D3_Util.ffi([ "obj" ])("obj.transform");
var transform = function (dict) {
return dict.transform;
};
var renderZoom = function (dictExisting) {
return Graphics_D3_Util.ffi([ "zoom", "selection", "" ])("selection.call(zoom)");
};
var on = Effect_Uncurried.runEffectFn3($foreign.onImpl);
var $dollar_ZoomEventZoomE_0 = new ZoomEvent(unsafeTransform);
var on = Effect_Uncurried.runEffectFn3($foreign.onImpl);
var $dollar_TransformableZoomE_0 = new Transformable(unsafeTransform);
exports["transform"] = transform;
exports["zoom"] = zoom;
exports["on"] = on;
exports["renderZoom"] = renderZoom;
exports["$_ZoomEventZoomE_0"] = $dollar_ZoomEventZoomE_0;
exports["$_TransformableZoomE_0"] = $dollar_TransformableZoomE_0;
})(PS);
(function(exports) {
"use strict";
......@@ -3332,7 +3361,7 @@ var PS = {};
var data$prime = [ "first data", "second data" ];
var simpleData = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#simple-data"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(data$prime)))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingUpdate)(Data_Show.show(Data_Show.showString)))();
DOM_Simple_Console.log2("simpleData")(simpleData)();
var dataWithAppend = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#data-with-append"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(data$prime)))(Graphics_D3_Selection.enter))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableEnter)("p")))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (d) {
var dataWithAppend = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#data-with-append"))(Graphics_D3_Selection.selectAll("p")))(Graphics_D3_Selection.bindData(data$prime)))(Graphics_D3_Selection.enter))("p"))(Graphics_D3_Selection["style''"](Graphics_D3_Selection.existingSelection)("color")(function (d) {
return function (idx) {
var $10 = $$Math.remainder(idx)(2.0) === 0.0;
if ($10) {
......@@ -3350,7 +3379,7 @@ var PS = {};
};
var width = (460 - margin.left | 0) - margin.right | 0;
var height = (400 - margin.top | 0) - margin.bottom | 0;
var svg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#contour"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")((width + margin.left | 0) + margin.right | 0)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")((height + margin.top | 0) + margin.bottom | 0)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("transform")("translate(" + (Data_Show.show(Data_Show.showInt)(margin.left) + (", " + (Data_Show.show(Data_Show.showInt)(margin.top) + ")")))))();
var svg = Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.rootSelect("#contour"))("svg"))(new Data_Tuple.Tuple("width", (width + margin.left | 0) + margin.right | 0)))(new Data_Tuple.Tuple("height", (height + margin.top | 0) + margin.bottom | 0)))("g"))(new Data_Tuple.Tuple("transform", "translate(" + (Data_Show.show(Data_Show.showInt)(margin.left) + (", " + (Data_Show.show(Data_Show.showInt)(margin.top) + ")")))))();
Effect_Aff.launchAff_((function () {
var handleRow = function (d) {
var v = Control_Monad_Except.runExcept(Control_Bind.bindFlipped(Control_Monad_Except_Trans.bindExceptT(Data_Identity.monadIdentity))(Data_Traversable.traverse(Data_Traversable.traversableArray)(Control_Monad_Except_Trans.applicativeExceptT(Data_Identity.monadIdentity))(Foreign.readNumber(Data_Identity.monadIdentity)))(Foreign.readArray(Data_Identity.monadIdentity)(d)));
......@@ -3382,17 +3411,17 @@ var PS = {};
y: v2.value0.head
};
};
throw new Error("Failed pattern match at Main (line 77, column 40 - line 79, column 64): " + [ v2.constructor.name ]);
throw new Error("Failed pattern match at Main (line 78, column 40 - line 80, column 64): " + [ v2.constructor.name ]);
};
throw new Error("Failed pattern match at Main (line 75, column 15 - line 79, column 64): " + [ v1.constructor.name ]);
throw new Error("Failed pattern match at Main (line 76, column 15 - line 80, column 64): " + [ v1.constructor.name ]);
};
throw new Error("Failed pattern match at Main (line 72, column 11 - line 79, column 64): " + [ v.constructor.name ]);
throw new Error("Failed pattern match at Main (line 73, column 11 - line 80, column 64): " + [ v.constructor.name ]);
};
return Control_Bind.bind(Effect_Aff.bindAff)(Graphics_D3_Request.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv")(handleRow))(function (data$prime1) {
return Control_Bind.discard(Control_Bind.discardUnit)(Effect_Aff.bindAff)(Effect_Class.liftEffect(Effect_Aff.monadEffectAff)(DOM_Simple_Console.log2("data'")(data$prime1)))(function () {
return Effect_Class.liftEffect(Effect_Aff.monadEffectAff)(function __do() {
var x = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ 5.0, 20.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ 0.0, Data_Int.toNumber(width) ]))();
Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")(svg))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("transform")("translate(0, " + (Data_Show.show(Data_Show.showInt)(height) + ")")))();
Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")(svg))(new Data_Tuple.Tuple("transform", "translate(0, " + (Data_Show.show(Data_Show.showInt)(height) + ")")))();
var y = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ 5.0, 22.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ Data_Int.toNumber(height), 0.0 ]))();
Control_Bind.bind(Effect.bindEffect)(Control_Applicative.pure(Effect.applicativeEffect)(svg))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g"))();
var densityData = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Contour.contourDensity)(Graphics_D3_Contour["x'"](Graphics_D3_Contour.contourDensityContour)(function (d) {
......@@ -3401,7 +3430,7 @@ var PS = {};
return d.y;
})))(Graphics_D3_Contour.size(Graphics_D3_Contour.contourDensityContour)([ Data_Int.toNumber(width), Data_Int.toNumber(height) ])))(Graphics_D3_Contour.bandwidth(Graphics_D3_Contour.contourDensityContour)(20.0)))(Graphics_D3_Contour.toFunction(Graphics_D3_Contour.contourDensityContour))();
DOM_Simple_Console.log2("densityData(data')")(densityData(data$prime1))();
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Applicative.pure(Effect.applicativeEffect)(svg))(Graphics_D3_Selection.selectAll("path")))(Graphics_D3_Selection.bindData(densityData(data$prime1))))(Graphics_D3_Selection.enter))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableEnter)("path")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("d")(Graphics_D3_Contour.geoPath)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("fill")("none")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("#69b3a2")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke-linejoin")("round"))();
Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableEnter)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Applicative.pure(Effect.applicativeEffect)(svg))(Graphics_D3_Selection.selectAll("path")))(Graphics_D3_Selection.bindData(densityData(data$prime1))))(Graphics_D3_Selection.enter))("path"))(new Data_Tuple.Tuple("d", Graphics_D3_Contour.geoPath)))(new Data_Tuple.Tuple("fill", "none")))(new Data_Tuple.Tuple("stroke", "#69b3a2")))(new Data_Tuple.Tuple("stroke-linejoin", "round"))();
return Data_Unit.unit;
});
});
......@@ -3410,11 +3439,11 @@ var PS = {};
DOM_Simple_Console.log2("svg")(svg)();
var axisScale = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Scale.linearScale)(Graphics_D3_Scale.domain(Graphics_D3_Scale.scaleLinear)([ -1.0, 10.0 ])))(Graphics_D3_Scale.range(Graphics_D3_Scale.scaleLinear)([ 0.0, 400.0 ]))();
var xAxis = Graphics_D3_SVG_Axis.axisBottom(Graphics_D3_Scale.scaleLinear)(axisScale)();
var axisSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#axis"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(400)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(50)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(xAxis))();
var axisSvg = Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.rootSelect("#axis"))("svg"))(new Data_Tuple.Tuple("width", 400)))(new Data_Tuple.Tuple("height", 50)))("g"))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(xAxis))();
DOM_Simple_Console.log2("axisScale")(axisScale)();
var timeScale = Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Time.scaleTime)(Graphics_D3_Scale.range(Graphics_D3_Time.scaleTimeScale)([ 0.0, 400.0 ]))();
var timeAxis = Graphics_D3_SVG_Axis.axisBottom(Graphics_D3_Time.scaleTimeScale)(timeScale)();
var timeSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#time-axis"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(400)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(50)))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("g")))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(timeAxis))();
var timeSvg = Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAppend(Graphics_D3_Selection.appendableSelection)(Graphics_D3_Selection.rootSelect("#time-axis"))("svg"))(new Data_Tuple.Tuple("width", 400)))(new Data_Tuple.Tuple("height", 50)))("g"))(Graphics_D3_SVG_Axis.renderAxis(Graphics_D3_Selection.existingSelection)(timeAxis))();
DOM_Simple_Console.log2("timeScale")(timeScale)();
var linkNodeData = [ {
id: "D3",
......@@ -3460,25 +3489,25 @@ var PS = {};
})))(Graphics_D3_Link.y(Graphics_D3_Link.linkLinkVertical)(function (v) {
return linkYScale(v.value1);
}))();
var linkElSvg = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#links"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("width")(200.0)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("height")(200.0))();
var linkElSvg = Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.rootSelect("#links"))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("svg")))(new Data_Tuple.Tuple("width", 200.0)))(new Data_Tuple.Tuple("height", 200.0))();
var linkG = Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll(".circle")(linkElSvg))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.enter))(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableEnter)("g"))();
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("circle")(linkG))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("cx")(function (v) {
Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection["combineAttr'"](Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection["combineAttr'"](Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("circle")(linkG))(new Data_Tuple.Tuple("cx", function (v) {
return linkXScale(Data_Int.toNumber(v.position.value0));
})))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("cy")(function (v) {
})))(new Data_Tuple.Tuple("cy", function (v) {
return linkYScale(Data_Int.toNumber(v.position.value1));
})))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("r")(5)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black")))(Graphics_D3_Selection.classed(Graphics_D3_Selection.classedSelection)("circle")(true))();
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("text")(linkG))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(function (v) {
})))(new Data_Tuple.Tuple("r", 5)))(new Data_Tuple.Tuple("stroke", "black")))(Graphics_D3_Selection.classed(Graphics_D3_Selection.classedSelection)("circle")(true))();
Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection["combineAttr'"](Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection["combineAttr'"](Graphics_D3_Selection.existingSelection)()(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.append(Graphics_D3_Selection.appendableSelection)("text")(linkG))(Graphics_D3_Selection["text'"](Graphics_D3_Selection.existingSelection)(function (v) {
return v.id;
})))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("x")(function (v) {
})))(new Data_Tuple.Tuple("x", function (v) {
return linkXScale(Data_Int.toNumber(v.position.value0)) + 5.0;
})))(Graphics_D3_Selection["attr'"](Graphics_D3_Selection.existingSelection)()("y")(function (v) {
})))(new Data_Tuple.Tuple("y", function (v) {
return linkYScale(Data_Int.toNumber(v.position.value1));
})))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("font-size")("0.5em"))();
Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll("path")(linkG))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.join(Graphics_D3_Selection.joinableUpdate)("path")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("d")(linkGen)))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("fill")("none")))(Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("stroke")("black"))();
})))(new Data_Tuple.Tuple("stroke", "black")))(new Data_Tuple.Tuple("font-size", "0.5em"))();
Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Graphics_D3_Selection.combineAttr(Graphics_D3_Selection.existingSelection)()(Control_Bind.bind(Effect.bindEffect)(Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Selection.selectAll("path")(linkG))(Graphics_D3_Selection.bindData(linkNodeData)))(Graphics_D3_Selection.join(Graphics_D3_Selection.joinableUpdate)("path")))(new Data_Tuple.Tuple("d", linkGen)))(new Data_Tuple.Tuple("fill", "none")))(new Data_Tuple.Tuple("stroke", "black"))();
var linkZoom = Control_Bind.bind(Effect.bindEffect)(Graphics_D3_Zoom.zoom)(Graphics_D3_Zoom.on("zoom")(function (ze) {
return Effect_Unsafe.unsafePerformEffect(function __do() {
DOM_Simple_Console.log2("zoom")(ze)();
Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("transform")(Graphics_D3_Zoom.transform(Graphics_D3_Zoom["$_ZoomEventZoomE_0"])(ze))(linkG)();
Graphics_D3_Selection.attr(Graphics_D3_Selection.existingSelection)()("transform")(Graphics_D3_Zoom.transform(Graphics_D3_Zoom["$_TransformableZoomE_0"])(ze))(linkG)();
return Data_Unit.unit;
});
}))();
......
example/src/Main.purs
View file @ 411bbf77
......@@ -23,6 +23,7 @@ import Graphics.D3.Link as Link
import Graphics.D3.Request
import Graphics.D3.Scale as Scale
import Graphics.D3.Selection as Selection
import Graphics.D3.Selection ((>=>), (>=>-), (>=>++))
import Graphics.D3.SVG.Axis as Axis
import Graphics.D3.Time as Time
import Graphics.D3.Util
......@@ -48,11 +49,11 @@ main = do
>>= Selection.text' show
log2 "simpleData" simpleData
dataWithAppend <-Selection.rootSelect "#data-with-append"
dataWithAppend <- Selection.rootSelect "#data-with-append"
>>= Selection.selectAll "p"
>>= Selection.bindData data'
>>= Selection.enter
>>= Selection.append "p"
>=>++ "p"
>>= Selection.style'' "color" (\d idx -> if idx `remainder` 2.0 == 0.0 then "green" else "red")
>>= Selection.text' show
log2 "dataWithAppend" dataWithAppend
......@@ -62,11 +63,11 @@ main = do
width = 460 - margin.left - margin.right
height = 400 - margin.top - margin.bottom
svg <- Selection.rootSelect "#contour"
>>= Selection.append "svg"
>>= Selection.attr "width" (width + margin.left + margin.right)
>>= Selection.attr "height" (height + margin.top + margin.bottom)
>>= Selection.append "g"
>>= Selection.attr "transform" ("translate(" <> show margin.left <> ", " <> show margin.top <> ")")
>=>++ "svg"
>=> Tuple "width" (width + margin.left + margin.right)
>=> Tuple "height" (height + margin.top + margin.bottom)
>=>++ "g"
>=> Tuple "transform" ("translate(" <> show margin.left <> ", " <> show margin.top <> ")")
launchAff_ do
let handleRow d =
case (runExcept $ traverse readNumber =<< readArray d) of
......@@ -84,7 +85,7 @@ main = do
>>= Scale.domain [5.0, 20.0]
>>= Scale.range [0.0, toNumber width]
_ <- Selection.append "g" svg
>>= Selection.attr "transform" ("translate(0, " <> show height <> ")")
>=> Tuple "transform" ("translate(0, " <> show height <> ")")
-- TODO call (d3.axisBottom(x))
y <- Scale.linearScale
......@@ -106,11 +107,11 @@ main = do
>>= Selection.selectAll "path"
>>= Selection.bindData (densityData data')
>>= Selection.enter
>>= Selection.append "path"
>>= Selection.attr "d" Contour.geoPath
>>= Selection.attr "fill" "none"
>>= Selection.attr "stroke" "#69b3a2"
>>= Selection.attr "stroke-linejoin" "round"
>=>++ "path"
>=> Tuple "d" Contour.geoPath
>=> Tuple "fill" "none"
>=> Tuple "stroke" "#69b3a2"
>=> Tuple "stroke-linejoin" "round"
pure unit
log2 "svg" svg
......@@ -120,10 +121,10 @@ main = do
>>= Scale.range [0.0, 400.0]
xAxis <- Axis.axisBottom axisScale
axisSvg <- Selection.rootSelect "#axis"
>>= Selection.append "svg"
>>= Selection.attr "width" 400
>>= Selection.attr "height" 50
>>= Selection.append "g"
>=>++ "svg"
>=> Tuple "width" 400
>=> Tuple "height" 50
>=>++ "g"
>>= Axis.renderAxis xAxis
log2 "axisScale" axisScale
......@@ -131,10 +132,10 @@ main = do
>>= Scale.range [0.0, 400.0]
timeAxis <- Axis.axisBottom timeScale
timeSvg <- Selection.rootSelect "#time-axis"
>>= Selection.append "svg"
>>= Selection.attr "width" 400
>>= Selection.attr "height" 50
>>= Selection.append "g"
>=>++ "svg"
>=> Tuple "width" 400
>=> Tuple "height" 50
>=>++ "g"
>>= Axis.renderAxis timeAxis
log2 "timeScale" timeScale
......@@ -164,8 +165,8 @@ main = do
>>= Link.y (\(Tuple _ y) -> linkYScale y)
linkElSvg <- Selection.rootSelect "#links"
>>= Selection.append "svg"
>>= Selection.attr "width" 200.0
>>= Selection.attr "height" 200.0
>=> Tuple "width" 200.0
>=> Tuple "height" 200.0
-- _ <- Selection.selectAll ".circle" linkElSvg
-- >>= Selection.bindData linkNodeData
-- >>= Selection.join "circle"
......@@ -180,27 +181,31 @@ main = do
>>= Selection.append "g"
-- >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
_ <- Selection.append "circle" linkG
>>= Selection.attr' "cx" (\{ position: Tuple x _} -> linkXScale $ toNumber x)
>>= Selection.attr' "cy" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
>>= Selection.attr "r" 5
>>= Selection.attr "stroke" "black"
>=>- Tuple "cx" (\{ position: Tuple x _} -> linkXScale $ toNumber x)
>=>- Tuple "cy" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
>=> Tuple "r" 5
>=> Tuple "stroke" "black"
>>= Selection.classed "circle" true
_ <- Selection.append "text" linkG
>>= Selection.text' (\{ id } -> id)
>>= Selection.attr' "x" (\{ position: Tuple x _} -> linkXScale (toNumber x) + 5.0)
>>= Selection.attr' "y" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
>>= Selection.attr "stroke" "black"
>>= Selection.attr "font-size" "0.5em"
>=>- Tuple "x" (\{ position: Tuple x _} -> linkXScale (toNumber x) + 5.0)
>=>- Tuple "y" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
>=> Tuple "stroke" "black"
>=> Tuple "font-size" "0.5em"
_ <- Selection.selectAll "path" linkG
>>= Selection.bindData linkNodeData
>>= Selection.join "path"
>>= Selection.attr "d" linkGen
>>= Selection.attr "fill" "none"
>>= Selection.attr "stroke" "black"
>=> Tuple "d" linkGen
>=> Tuple "fill" "none"
>=> Tuple "stroke" "black"
linkZoom <- Zoom.zoom
>>= Zoom.on "zoom" (\ze -> unsafePerformEffect $ do
_ <- log2 "zoom" ze
_ <- Selection.attr "transform" (Zoom.transform ze) linkG
pure unit)
_ <- Zoom.renderZoom linkZoom linkElSvg
-- resetZoomEl <- Selection.selectAll "#reset-zoom"
-- >>= Selection.onClick (\_ -> do
-- _ <- Selection.call (Zoom.transform linkZoom) Zoom.zoomIdentity linkG
-- pure unit)
log2 "linkEl" linkElSvg
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment