Skip to content

Commit

Permalink
Add 'orientationOrder' param
Browse files Browse the repository at this point in the history 
Pass in a custom function to override the behaviour in orientateCircles
as discussed here: #56
  • Loading branch information
@benfred
benfred committed Dec 16, 2015
1 parent 6578155 commit a83d506
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 17 deletions.
51 changes: 51 additions & 0 deletions examples/orientation_order.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Orientation Order</title>
<style>
body {
font-size : 16px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
</head>

<body>

<h4> default ordering </h4>
<div id="default"></div>
<h4> ordering setids lexically </h4>
<div id="lexical"></div>
<h4> custom ordering </h4>
<div id="custom"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="../venn.js"></script>
<script>
var sets = [
{sets:["A"], size: 10},
{sets:["B"], size: 11},
{sets:["C"], size: 10},
{sets: ["A", "B"], size: 4},
{sets: ["A", "C"], size: 4},
{sets: ["B", "C"], size: 4},
{sets: ["A", "B", "C"], size:2}
];

var chart = venn.VennDiagram()
.width(640)
.height(640);


d3.select("#default").datum(sets).call(chart);

chart.orientationOrder(function (a, b) { return a.setid.localeCompare(b.setid); })
d3.select("#lexical").datum(sets).call(chart);

var customOrdering = {"A" : 1, "C": 2, "B" : 3}
chart.orientationOrder(function (a, b) { return customOrdering[a.setid] - customOrdering[b.setid]})
d3.select("#custom").datum(sets).call(chart);
</script>
</html>
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "venn.js",
"version": "0.2.6",
"version": "0.2.7",
"author": "Ben Frederickson <[email protected]> (http:/www.benfrederickson.com)",
"url": "https://github.com/benfred/venn.js/issues",
"devDependencies": {
Expand Down Expand Up @@ -35,7 +35,7 @@
},
"scripts": {
"pretest": "mkdir -p build && node -e 'process.stdout.write(\"var version = \\\"\" + require(\"./package.json\").version + \"\\\"; export * from \\\"../index\\\"; export {version};\");' > build/bundle.js && rollup -f umd -u venn -n venn -o build/venn.js -- build/bundle.js",
"test": "jshint src/* && faucet `find tests -name '*test.js'`",
"test": "jshint src/*.js && faucet `find tests -name '*test.js'`",
"prepublish": "npm run test && uglifyjs build/venn.js -c -m -o build/venn.min.js && rm -f build/venn.zip && zip -j build/venn.zip -- LICENSE README.md build/venn.js build/venn.min.js"
}
}
11 changes: 10 additions & 1 deletion src/diagram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,17 @@ export function VennDiagram() {
wrap = true,
styled = true,
fontSize = null,
orientationOrder = null,
colours = d3.scale.category10(),
layoutFunction = venn;

function chart(selection) {
var data = selection.datum();
var solution = layoutFunction(data);
if (normalize) {
solution = normalizeSolution(solution, orientation);
solution = normalizeSolution(solution,
orientation,
orientationOrder);
}
var circles = scaleSolution(solution, width, height, padding);
var textCentres = computeTextCentres(circles, data);
Expand Down Expand Up @@ -218,6 +221,12 @@ export function VennDiagram() {
return chart;
};

chart.orientationOrder = function(_) {
if (!arguments.length) return orientationOrder;
orientationOrder = _;
return chart;
};

return chart;
}
// sometimes text doesn't fit inside the circle, if thats the case lets wrap
Expand Down
17 changes: 11 additions & 6 deletions src/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,9 +447,12 @@ export function lossFunction(sets, overlaps) {
}

// orientates a bunch of circles to point in orientation
function orientateCircles(circles, orientation) {
// sort circles by size
circles.sort(function (a, b) { return b.radius - a.radius; });
function orientateCircles(circles, orientation, orientationOrder) {
if (orientationOrder === null) {
circles.sort(function (a, b) { return b.radius - a.radius; });
} else {
circles.sort(orientationOrder);
}

var i;
// shift circles so largest circle is at (0, 0)
Expand Down Expand Up @@ -557,8 +560,10 @@ function getBoundingBox(circles) {
return {xRange: minMax('x'), yRange: minMax('y')};
}

export function normalizeSolution(solution, orientation) {
orientation = orientation || Math.PI/2;
export function normalizeSolution(solution, orientation, orientationOrder) {
if (orientation === null){
orientation = Math.PI/2;
}

// work with a list instead of a dictionary, and take a copy so we
// don't mutate input
Expand All @@ -578,7 +583,7 @@ export function normalizeSolution(solution, orientation) {

// orientate all disjoint sets, get sizes
for (i = 0; i < clusters.length; ++i) {
orientateCircles(clusters[i], orientation);
orientateCircles(clusters[i], orientation, orientationOrder);
var bounds = getBoundingBox(clusters[i]);
clusters[i].size = (bounds.xRange.max - bounds.xRange.min) * (bounds.yRange.max - bounds.yRange.min);
clusters[i].bounds = bounds;
Expand Down
30 changes: 22 additions & 8 deletions venn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -978,9 +978,12 @@
}

// orientates a bunch of circles to point in orientation
function orientateCircles(circles, orientation) {
// sort circles by size
circles.sort(function (a, b) { return b.radius - a.radius; });
function orientateCircles(circles, orientation, orientationOrder) {
if (orientationOrder === null) {
circles.sort(function (a, b) { return b.radius - a.radius; });
} else {
circles.sort(orientationOrder);
}

var i;
// shift circles so largest circle is at (0, 0)
Expand Down Expand Up @@ -1088,8 +1091,10 @@
return {xRange: minMax('x'), yRange: minMax('y')};
}

function normalizeSolution(solution, orientation) {
orientation = orientation || Math.PI/2;
function normalizeSolution(solution, orientation, orientationOrder) {
if (orientation === null){
orientation = Math.PI/2;
}

// work with a list instead of a dictionary, and take a copy so we
// don't mutate input
Expand All @@ -1109,7 +1114,7 @@

// orientate all disjoint sets, get sizes
for (i = 0; i < clusters.length; ++i) {
orientateCircles(clusters[i], orientation);
orientateCircles(clusters[i], orientation, orientationOrder);
var bounds = getBoundingBox(clusters[i]);
clusters[i].size = (bounds.xRange.max - bounds.xRange.min) * (bounds.yRange.max - bounds.yRange.min);
clusters[i].bounds = bounds;
Expand Down Expand Up @@ -1221,14 +1226,17 @@
wrap = true,
styled = true,
fontSize = null,
orientationOrder = null,
colours = d3.scale.category10(),
layoutFunction = venn;

function chart(selection) {
var data = selection.datum();
var solution = layoutFunction(data);
if (normalize) {
solution = normalizeSolution(solution, orientation);
solution = normalizeSolution(solution,
orientation,
orientationOrder);
}
var circles = scaleSolution(solution, width, height, padding);
var textCentres = computeTextCentres(circles, data);
Expand Down Expand Up @@ -1427,6 +1435,12 @@
return chart;
};

chart.orientationOrder = function(_) {
if (!arguments.length) return orientationOrder;
orientationOrder = _;
return chart;
};

return chart;
}
// sometimes text doesn't fit inside the circle, if thats the case lets wrap
Expand Down Expand Up @@ -1728,7 +1742,7 @@
}
}

var version = "0.2.6";
var version = "0.2.7";

exports.version = version;
exports.fmin = fmin;
Expand Down

0 comments on commit a83d506

Please sign in to comment.