Commit 66eea01c authored by Elango Bharathi's avatar Elango Bharathi Committed by Elango Dhandapani
Browse files

using options.count or data.length to determine the total elements per layout

parent c0e152ad
Pipeline #46682 passed with stage
in 2 minutes and 11 seconds
......@@ -178,10 +178,11 @@ function sanddance_grid (attrs, options) {
var data = options.data
var width = options.width
var height = options.height
var area = width * height / data.length
var count = options.count || data.length
var area = width * height / count
var element_width = Math.sqrt(area)
var elements_per_row = Math.ceil(width / element_width)
var num_rows = Math.ceil(data.length / elements_per_row)
var num_rows = Math.ceil(count / elements_per_row)
var element_height = element_width * num_rows
var filter = options.filter
data = filter ? data.filter(function (d, i) { return filter(d, i) }) : data
......@@ -204,7 +205,7 @@ function sanddance_hexpack (attrs, options) {
var filter = options.filter
data = filter ? data.filter(function (d, i) { return filter(d, i) }) : data
var indices = sort(data, options.sort, options.sort_ascending)
var count = data.length
var count = options.count || data.length
var pos = [[0, 0]],
l = 1, // level
n = 0, // number of items filled so far
......
<!DOCTYPE html>
<html>
<head>
<title>sanddance tests</title>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/d3/build/d3.js"></script>
<script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
<script src="../dist/g1.js"></script>
<script src="tape.js"></script>
<style>
</style>
</head>
<body>
<h1 id="title">Sanddance showreel</h1>
<svg id="bar_1" class="circles"></svg>
<svg id="bar_2" class="circles"></svg>
<svg id="bar_3" class="circles"></svg>
<script>
tape.onFinish(function () { window.renderComplete = true })
</script>
<script>
function doc(title) {
$('#title').text(title)
}
var colorCategory = d3.scaleSequential(d3.interpolateBlues)
var width = 150,
height = 500,
count = 300
tape('init', function(t) {
var demo_chain = function (data) {
return g1.sanddance.chain(
g1.sanddance({}, {
x: 20, y: 20, duration: 200
}).on('init', function () {
doc('Collapse to center')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
filter: function(d) { return d.age > 50 },
delay: 500,
duration: 2000,
count: count,
}).on('init', function () {
doc('Display as a grid only for filtered elements')
}),
g1.sanddance({
fill: {
metric: 'age',
scheme: 'RdYlGn'
}
}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
filter: function(d) { return d.age > 50 },
sort: 'age',
duration: 1000,
count: count,
}).on('init', function () {
doc('Sort by age - only for filtered elements')
}),
g1.sanddance({
fill: {
metric: 'age',
scheme: 'RdYlGn'
}
}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
delay: 500,
duration: 500,
count: count,
}).on('init', function () {
doc('Grid for all elements - Fill by age')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'age',
delay: 500,
duration: 500,
count: count,
}).on('init', function () {
doc('Sort by age')
}),
g1.sanddance({
fill: function (d) { return colorCategory(d.weight / 100) },
}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
delay: 500,
count: count,
}).on('init', function () {
doc('Color by weight')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'weight',
delay: 500,
count: count,
}).on('init', function () {
doc('Sort by weight, constant duration')
}),
g1.sanddance({
fill: {
metric: 'age',
scheme: 'RdYlGn'
}
}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'age',
delay: 500,
speed: 800,
count: count,
}).on('init', function () {
doc('Sort by age, move at constant speed')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'age',
delay: 500,
count: count,
}).on('init', function () {
doc('Sort is stable - repeating the same sort does nothing')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'age',
ascending: false,
delay: 500,
speed: 800,
count: count,
}).on('init', function () {
doc('Sort by age descending, move at constant speed')
}),
g1.sanddance({}, {
layout: 'grid',
data: data,
width: width - 20,
height: height - 20,
sort: 'age',
ascending: false,
delay: 500,
count: count,
}).on('init', function () {
doc('Sort is stable (descending)- repeating the same sort does nothing')
}),
g1.sanddance({}, {
layout: 'hexpack',
data: data,
width: width,
height: height,
speed: 500,
x: width / 2,
y: height / 2,
count: count,
}).on('init', function () {
doc('Pack into hex grid')
}),
// g1.sanddance({}, {
// layout: 'spiral',
// data: data,
// spiral_size: 2,
// spiral_angle: 25,
// x: width / 2,
// y: height / 2
// }).on('init', function () {
// doc('In spiral layout')
// }),
)
}
var data = []
for (var i = 0; i <= 599; i++) {
data.push({
age: Math.floor(Math.random() * 100) + 1,
weight: Math.floor(Math.random() * 100) + 1,
department: i <= 99 ? 'A' : i <= 299 ? 'B' : 'C'
})
}
var data_1 = data.filter(function(d) { return d.department === 'A' })
var data_2 = data.filter(function(d) { return d.department === 'B' })
var data_3 = data.filter(function(d) { return d.department === 'C' })
doc('Sanddance component')
d3.selectAll('svg').attr('width', width).attr('height', height)
var bar_1 = d3.select('#bar_1').selectAll('circle').data(data_1).enter()
.append('circle')
.attr('fill', 'green')
.attr('stroke', 'white')
.attr('r', function (d) { return Math.random() * 5 + 5 })
.call(demo_chain(data_1))
var bar_2 = d3.select('#bar_2').selectAll('circle').data(data_2).enter()
.append('circle')
.attr('fill', 'green')
.attr('stroke', 'white')
.attr('r', function (d) { return Math.random() * 5 + 5 })
.call(demo_chain(data_2))
var bar_3 = d3.select('#bar_3').selectAll('circle').data(data_3).enter()
.append('circle')
.attr('fill', 'green')
.attr('stroke', 'white')
.attr('r', function (d) { return Math.random() * 5 + 5 })
.call(demo_chain(data_3))
t.end()
})
</script>
</body>
</html>
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