Published
Edited
Dec 30, 2018
Importers
1 star
options = ({
'elementNum' : 10, // the number of elements
'container' : [
[0,1,2,3,4], // the index of elements which are covered by SubSet 1
[1,2,3,4,5],
[2,3,4,5,6],
[3,4,5,6,7],
[4,5,6,7,8],
[5,6,7,8,9]
],
'weights' : [0, 1, 2, 4, 8,16,32] // weight for every subset
})
initSubSets = {
let subSets = [];
for(let i=0; i<options.container.length; i++){
let x = 50 + subSetsSpacing * i;
subSets.push({'x': x,
'y': 60,
'width': 40,
'height': 40,
'weight': options.weights[i],
'container': options.container[i],
'color' : 'black'
});
}
return subSets;
}
initElements = {
let elements = [];
for(let i=0; i<options.elementNum; i++){
let x = 20 + elementSpacing * i;
elements.push({'x': x,
'y': 250,
'r': 20,
'color': 'black'});
}
return elements;
}
function drawLinGraph(elements, subsets, indexs){
const svg = d3.select(DOM.svg(width, height));
let links = [];
for(let i=0; i<subsets.length; i++){
for(let j=0; j<subsets[i]['container'].length; j++){
links.push([{'x': subsets[i].x + subsets[i].width/2,
'y': subsets[i].y + subsets[i].height,
'color': subsets[i].color
},
{'x': elements[subsets[i]['container'][j]].x,
'y': elements[subsets[i]['container'][j]].y - elements[subsets[i]['container'][j]].r
}
]);
}
};
const line = d3.line()
.x(d => d.x)
.y(d => d.y);
svg.selectAll('rect').data(subsets)
.enter().append('rect')
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('width', d => d.width)
.attr('height', d => d.height)
.style('fill', 'white')
.style('stroke', d => d.color);
svg.selectAll('circle').data(elements)
.enter().append('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
.style('fill', 'none')
.style('stroke', d => d.color);
svg.selectAll('path').data(links)
.enter().append('path')
.style('fill', 'none')
.style('stroke', d => d[0].color)
.style('stroke-width', '1px')
.attr('d', line);
svg.selectAll('g').data(elements)
.enter().append('text')
.attr('x', d => d.x - 10)
.attr('y', d => d.y + d.r + 15)
.text((d,i) => `s${i+1}`);
svg.selectAll('g').data(subsets)
.enter().append('text')
.attr('x', d => d.x)
.attr('y', d => d.y - 5)
.text((d,i) => `S${i+1} (${d.weight})`);
svg.append('text')
.style('font', '14px sans-serif')
.attr('x', 10)
.attr('y', 15)
.text(`The result is ${(R.sum(indexs.map(d => subsets[d]['weight']))).toFixed(2)}`);
return svg.node();
}
function updateElements(elements, subsets, basket){
// let basket = new Set();
let goodSubset = d => {
let remainNum = (R.filter(x => !(basket.has(x)), d.container)).length;
if(remainNum == 0){
return Infinity;
}else{
return d.weight/remainNum;
}
};
let evaluation = subsets.map(goodSubset);
let minIndex = evaluation.indexOf(Math.min(...evaluation));
subsets[minIndex].color = 'red';
subsets[minIndex].container.map(d => {basket.add(d), elements[d].color='red'});
return {
'basket': basket,
'minInd': minIndex
}
}
// function drawGraph(elements, subsets){
// const svg = d3.select(DOM.svg(width, height));
// let links = [];
// for(let i=0; i<subsets.length; i++){
// for(let j=0; j<subsets[i]['container'].length; j++){
// links.push({'source': subsets[i], 'target': elements[subsets[i]['container'][j]]});
// }
// };
// const link = d3.linkVertical()
// .source(d => {
// return [
// d.source.x + d.source.width/2,
// d.source.y + d.source.height
// ];
// })
// .target(d => {
// return [
// d.target.x,
// d.target.y - d.target.r
// ];
// });
// svg.selectAll('rect').data(subsets)
// .enter().append('rect')
// .attr('x', d => d.x)
// .attr('y', d => d.y)
// .attr('width', d => d.width)
// .attr('height', d => d.height)
// .style('fill', 'white')
// .style('stroke', '#56445D')
// svg.selectAll('circle').data(elements)
// .enter().append('circle')
// .attr('cx', d => d.x)
// .attr('cy', d => d.y)
// .attr('r', d => d.r)
// .style('fill', 'black')
// // .style('stroke', '#56445D')
// svg.selectAll('path').data(links)
// .enter().append('path')
// .attr('d', link)
// .style('fill', 'none')
// .style('stroke', '#56445D')
// .style('stroke-width', '1px')
// return svg.node();
// }
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.