Interactive node filtering
Use the slider below to filter persons by age.
Filter: 15 - 70
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
<div class="demo-filter">
Filter: <span id="val-min">15</span> - <span id="val-max">70</span><br />
<div class="multi-range">
<input type="range" min="15" max="70" value="15" id="lower">
<input type="range" min="15" max="70" value="70" id="upper">
</div>
</div>
CSS
CSS
.demo-filter {
position:absolute;
bottom: 20px;
right: 20px;
.multi-range {
position: relative;
height: 50px;
width: 250px;
input[type=range] {
position: absolute;
box-sizing: border-box;
appearance: none;
width: 100%;
margin: 0;
padding: 0 2px;
/* Add some L/R padding to ensure box shadow of handle is shown */
overflow: hidden;
border: 0;
border-radius: 1px;
outline: none;
background: linear-gradient(grey, grey) no-repeat center;
/* Use a linear gradient to generate only the 2px height background */
background-size: 100% 2px;
pointer-events: none;
&:active,
&:focus {
outline: none;
}
&::-webkit-slider-thumb {
height: 28px;
width: 28px;
border-radius: 28px;
background-color: #2196f3;
position: relative;
margin: 5px 0;
/* Add some margin to ensure box shadow is shown */
cursor: pointer;
appearance: none;
pointer-events: all;
box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
&:nth-child(1) {
&::-webkit-slider-thumb::before {
background-color: #2196f3;
}
}
&:nth-child(2) {
background: none;
z-index:2;
&::-webkit-slider-thumb::before {
background-color: grey;
}
}
}
}
}
JavaScript
JavaScript
var minAge = 15;
var maxAge = 70;
var chart = 0;
chart = new NetChart({
container: document.getElementById("demo"),
data: { url: "/dvsl/data/net-chart/friend-net.json" },
style:{
node: {imageCropping: true},
nodeStyleFunction: nodeStyle
},
filters: {
nodeFilter: nodeFilter
}
});
function nodeStyle(node){
node.image = "/dvsl/data/net-chart/friend-net/"+node.id+".png";
node.label = node.data.name;
}
function nodeFilter(nodeData){
return nodeData.age >= minAge && nodeData.age <= maxAge;
}
//Control range slider:
var lowerSlider = document.querySelector('#lower'),
upperSlider = document.querySelector('#upper'),
minValSpan = document.querySelector('#val-min'),
maxValSpan = document.querySelector('#val-max'),
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
upperSlider.oninput = function() {
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
if (upperVal < lowerVal + 4) {
lowerSlider.value = upperVal - 4;
if (lowerVal == lowerSlider.min) {
upperSlider.value = 4;
}
}
updateFilter();
};
lowerSlider.oninput = function() {
lowerVal = parseInt(lowerSlider.value);
upperVal = parseInt(upperSlider.value);
if (lowerVal > upperVal - 4) {
upperSlider.value = lowerVal + 4;
if (upperVal == upperSlider.max) {
lowerSlider.value = parseInt(upperSlider.max) - 4;
}
}
updateFilter();
};
function updateFilter(){
minAge = lowerVal;
maxAge = upperVal;
minValSpan.innerHTML = minAge;
maxValSpan.innerHTML = maxAge;
chart.updateFilters();
}
Data
Data
Download Data
{
"nodes": [
{
"id": "m-1",
"age": 20,
"name": "Joe",
"loaded": true
},
{
"id": "m-2",
"age": 15,
"name": "Fred",
"loaded": true
},
{
"id": "m-3",
"age": 16,
"name": "Tom",
"loaded": true
},
{
"id": "m-4",
"age": 35,
"name": "Robert",
"loaded": true
},
{
"id": "m-5",
"age": 38,
"name": "Mark",
"loaded": true
},
{
"id": "m-6",
"age": 42,
"name": "Jason",
"loaded": true
},
{
"id": "m-7",
"age": 37,
"name": "Bill",
"loaded": true
},
{
"id": "m-8",
"age": 60,
"name": "Andre",
"loaded": true
},
{
"id": "m-9",
"age": 63,
"name": "Daniel",
"loaded": true
},
{
"id": "m-10",
"age": 17,
"name": "Thomas",
"loaded": true
},
{
"id": "m-11",
"age": 21,
"name": "Sergejs",
"loaded": true
},
{
"id": "m-12",
"age": 26,
"name": "Bryon",
"loaded": true
},
{
"id": "m-13",
"age": 29,
"name": "Toby",
"loaded": true
},
{
"id": "f-1",
"age": 28,
"name": "Anna",
"loaded": true
},
{
"id": "f-2",
"age": 21,
"name": "Wendy",
"loaded": true
},
{
"id": "f-3",
"age": 17,
"name": "Dina",
"loaded": true
},
{
"id": "f-4",
"age": 26,
"name": "Cate",
"loaded": true
},
{
"id": "f-5",
"age": 31,
"name": "Elisa",
"loaded": true
},
{
"id": "f-6",
"age": 34,
"name": "Suzie",
"loaded": true
},
{
"id": "f-7",
"age": 26,
"name": "Trixie",
"loaded": true
},
{
"id": "f-8",
"age": 37,
"name": "Emily",
"loaded": true
},
{
"id": "f-9",
"age": 39,
"name": "Alice",
"loaded": true
},
{
"id": "f-10",
"age": 42,
"name": "Violet",
"loaded": true
},
{
"id": "f-11",
"age": 32,
"name": "Sara",
"loaded": true
},
{
"id": "f-12",
"age": 28,
"name": "Julia",
"loaded": true
},
{
"id": "f-13",
"age": 19,
"name": "Ramona",
"loaded": true
},
{
"id": "f-14",
"age": 20,
"name": "Flavia",
"loaded": true
},
{
"id": "f-15",
"age": 23,
"name": "Liga",
"loaded": true
},
{
"id": "f-16",
"age": 27,
"name": "Jessica",
"loaded": true
},
{
"id": "f-17",
"age": 40,
"name": "Barbara",
"loaded": true
},
{
"id": "f-18",
"age": 45,
"name": "Hanna",
"loaded": true
},
{
"id": "f-19",
"age": 53,
"name": "Giselle",
"loaded": true
},
{
"id": "f-20",
"age": 27,
"name": "Mia",
"loaded": true
},
{
"id": "f-21",
"age": 19,
"name": "Rose",
"loaded": true
},
{
"id": "f-23",
"age": 28,
"name": "Judy",
"loaded": true
},
{
"id": "f-22",
"age": 32,
"name": "Nikola",
"loaded": true
},
{
"id": "f-24",
"age": 34,
"name": "Sofia",
"loaded": true
},
{
"id": "f-25",
"age": 37,
"name": "Fatima",
"loaded": true
},
{
"id": "f-26",
"age": 44,
"name": "Samantha",
"loaded": true
},
{
"id": "f-27",
"age": 23,
"name": "Chelia",
"loaded": true
},
{
"id": "f-28",
"age": 18,
"name": "Alexa",
"loaded": true
},
{
"id": "f-29",
"age": 21,
"name": "Karla",
"loaded": true
},
{
"id": "f-30",
"age": 23,
"name": "Karina",
"loaded": true
},
{
"id": "f-31",
"age": 51,
"name": "Patricia",
"loaded": true
},
{
"id": "f-32",
"age": 47,
"name": "Anna",
"loaded": true
},
{
"id": "f-33",
"age": 38,
"name": "Laura",
"loaded": true
}
],
"links": [
{
"id": "l01",
"from": "m-1",
"to": "f-1",
"type": "friend"
},
{
"id": "l02",
"from": "m-1",
"to": "f-2",
"type": "friend"
},
{
"id": "l03",
"from": "m-1",
"to": "f-3",
"type": "friend"
},
{
"id": "l04",
"from": "m-1",
"to": "f-4",
"type": "friend"
},
{
"id": "l06",
"from": "m-1",
"to": "f-6",
"type": "friend"
},
{
"id": "l07",
"from": "m-2",
"to": "f-2",
"type": "collegue"
},
{
"id": "l12",
"from": "m-3",
"to": "f-10",
"type": "spouse"
},
{
"id": "l13",
"from": "m-3",
"to": "f-5",
"type": "enemy"
},
{
"id": "l14",
"from": "m-3",
"to": "f-8",
"type": "friend"
},
{
"id": "l15",
"from": "m-3",
"to": "f-4",
"type": "friend"
},
{
"id": "l16",
"from": "m-3",
"to": "f-9",
"type": "friend"
},
{
"id": "l17",
"from": "m-4",
"to": "f-15",
"type": "spouse"
},
{
"id": "l18",
"from": "m-4",
"to": "f-14",
"type": "collegue"
},
{
"id": "l22",
"from": "m-5",
"to": "f-15",
"type": "collegue"
},
{
"id": "l23",
"from": "m-5",
"to": "f-4",
"type": "collegue"
},
{
"id": "l27",
"from": "f-11",
"to": "f-15",
"type": "collegue"
},
{
"id": "l28",
"from": "m-5",
"to": "m-6",
"type": "friend"
},
{
"id": "l29",
"from": "m-6",
"to": "m-7",
"type": "friend"
},
{
"id": "l30",
"from": "m-7",
"to": "m-8",
"type": "friend"
},
{
"id": "l31",
"from": "m-8",
"to": "m-9",
"type": "friend"
},
{
"id": "l32",
"from": "m-9",
"to": "m-10",
"type": "friend"
},
{
"id": "l33",
"from": "m-10",
"to": "m-11",
"type": "friend"
},
{
"id": "l34",
"from": "m-11",
"to": "m-12",
"type": "friend"
},
{
"id": "l35",
"from": "m-12",
"to": "m-13",
"type": "friend"
},
{
"id": "l36",
"from": "m-13",
"to": "m-5",
"type": "friend"
},
{
"id": "l101",
"from": "m-7",
"to": "f-25",
"type": "collegue"
},
{
"id": "l102",
"from": "m-7",
"to": "f-26",
"type": "collegue"
},
{
"id": "l103",
"from": "m-9",
"to": "f-26",
"type": "collegue"
},
{
"id": "l104",
"from": "m-9",
"to": "f-25",
"type": "collegue"
},
{
"id": "l105",
"from": "f-25",
"to": "f-26",
"type": "collegue"
},
{
"id": "l106",
"from": "m-7",
"to": "m-9",
"type": "collegue"
},
{
"id": "l107",
"from": "f-26",
"to": "f-28",
"type": "friend"
},
{
"id": "l108",
"from": "f-27",
"to": "f-28",
"type": "friend"
},
{
"id": "l109",
"from": "f-27",
"to": "f-29",
"type": "friend"
},
{
"id": "l110",
"from": "f-10",
"to": "f-29",
"type": "friend"
},
{
"id": "l111",
"from": "f-29",
"to": "f-33",
"type": "friend"
},
{
"id": "l112",
"from": "f-29",
"to": "f-32",
"type": "friend"
},
{
"id": "l113",
"from": "f-29",
"to": "f-31",
"type": "friend"
},
{
"id": "l114",
"from": "f-24",
"to": "f-31",
"type": "friend"
},
{
"id": "l115",
"from": "f-24",
"to": "f-32",
"type": "friend"
},
{
"id": "l116",
"from": "f-24",
"to": "f-33",
"type": "friend"
},
{
"id": "l117",
"from": "f-24",
"to": "f-23",
"type": "friend"
},
{
"id": "l118",
"from": "f-23",
"to": "f-22",
"type": "friend"
},
{
"id": "l119",
"from": "f-22",
"to": "f-21",
"type": "friend"
},
{
"id": "l120",
"from": "f-21",
"to": "f-20",
"type": "friend"
},
{
"id": "l121",
"from": "f-20",
"to": "f-19",
"type": "friend"
},
{
"id": "l122",
"from": "f-19",
"to": "f-18",
"type": "friend"
},
{
"id": "l123",
"from": "f-18",
"to": "f-17",
"type": "friend"
},
{
"id": "l124",
"from": "f-17",
"to": "f-16",
"type": "friend"
},
{
"id": "l125",
"from": "f-16",
"to": "f-30",
"type": "friend"
},
{
"id": "l126",
"from": "f-19",
"to": "f-30",
"type": "friend"
},
{
"id": "l130",
"from": "f-15",
"to": "m-10",
"type": "friend"
},
{
"id": "l131",
"from": "f-23",
"to": "m-4",
"type": "friend"
},
{
"id": "l132",
"from": "f-15",
"to": "m-7",
"type": "friend"
},
{
"id": "l133",
"from": "f-12",
"to": "m-13",
"type": "friend"
},
{
"id": "l134",
"from": "f-21",
"to": "m-12",
"type": "friend"
},
{
"id": "l135",
"from": "f-29",
"to": "m-11",
"type": "friend"
},
{
"id": "l136",
"from": "f-13",
"to": "m-11",
"type": "friend"
},
{
"id": "l137",
"from": "f-13",
"to": "m-7",
"type": "friend"
},
{
"id": "l138",
"from": "f-13",
"to": "m-12",
"type": "friend"
},
{
"id": "l139",
"from": "f-13",
"to": "m-6",
"type": "friend"
},
{
"id": "l140",
"from": "f-17",
"to": "f-9",
"type": "friend"
},
{
"id": "l141",
"from": "f-2",
"to": "m-4",
"type": "collegue"
},
{
"id": "l142",
"from": "f-5",
"to": "m-13",
"type": "friend"
},
{
"id": "l143",
"from": "f-7",
"to": "f-20",
"type": "friend"
}
]
}