bhpayne/graph.json

## graph.json
{
  "nodes": [
    {
      "name": "Person1",
      "group": "#000"
    },
    {
      "name": "Person2",
      "group": "#000"
    },
    {
      "name": "Person3",
      "group": "#000"
    },
    {
      "imgname": "Person1_1",
      "group": "#000",
      "img": "MC2-Image-Data/Person1/Person1_1.jpg"
    },
    {
      "imgname": "Person2_1",
      "group": "#000",
      "img": "Person2_1.jpg"
    },
    {
      "imgname": "Person3_1",
      "group": "#000",
      "img": "Person3_1.jpg"
    },
    {
      "name": "pumpkinNotes",
      "group": "#FF0000"
    },
    {
      "name": "yellowBag",
      "group": "#FF0000"
    },
    {
      "name": "pinkCandle",
      "group": "#FF0000"
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 3,
      "value": 1
    },
    {
      "source": 1,
      "target": 4,
      "value": 1
    },
    {
      "source": 2,
      "target": 5,
      "value": 1
    },
    {
      "source": 3,
      "target": 6,
      "value": 0.4
    },
    {
      "source": 3,
      "target": 7,
      "value": 0.5
    },
    {
      "source": 3,
      "target": 8,
      "value": 0.8
    },
    {
      "source": 4,
      "target": 7,
      "value": 0.3
    },
    {
      "source": 5,
      "target": 8,
      "value": 0.23
    },
    {
      "source": 5,
      "target": 7,
      "value": 0.5
    }
  ]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    .link {
        stroke: #ccc;
    }

    .node text {
        display:none;
        pointer-events: none;
        font: 10px sans-serif;
    }
    .node:hover text {
        display: inline;
    }


</style>
<head>
    <h1>
        Mini Challenge 2
    </h1>
    <h2>
        <script src="https://d3js.org/d3.v5.js"></script>
        <script src="https://unpkg.com/d3-simple-slider"></script>

        <p style = "font-family:georgia,garamond,serif;font-size:12px;" id="value">.2</p>
        <div id="slider"></div>

        <script>
            var slider = d3
                .sliderHorizontal()
                .min(0)
                .max(1)
                .step(.025)
                .width(300)
                .value(.2)
                .displayValue(false)
                .on('onchange', (val) => {
                    d3.select('#value').text(val);
                });

            d3.select('#slider')
                .append('svg')
                .attr('width', 500)
                .attr('height', 100)
                .append('g')
                .attr('transform', 'translate(30,30)')
                .call(slider);


        </script>
    </h2>

</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

    var width = 960,
        height = 500

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var force = d3.layout.force()
        .gravity(0.05)
        .distance(75)
        .charge(-200)
        .friction(0.85)
        .size([width, height]);

    d3.json("graph.json", function(error, json) {
        if (error) throw error;

        var nodeArr = [];

        json.nodes.forEach(function (n){
            nodeArr.push(n);
        })

        /*var linkArr = [];

        json.links.forEach(function (n) {
            linkArr.push(n);
        })*/

        filter();

        force
                .nodes(nodeArr)
                .links(linkArr)
                .start();

        console.log(document.getElementById("value").innerHTML)

        console.log(json.nodes)
        console.log(nodeArr)

        console.log(json.links)
        console.log(linkArr)

        var link = svg.selectAll(".link")
            .data(linkArr)
            .enter().append("line")
            .attr("stroke-width", function(d) {
                if (d.value != 1){
                    return d.value*4
                }})
            .attr("class", "link");

        var node = svg.selectAll(".node")
            .data(nodeArr)
            .enter().append("g")
            .attr("class", "node")
            .on("mouseover", mouseover)
            .on("mouseout", mouseout)
            .call(force.drag);

        node.append("svg:circle")
            .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4; })
            .style("fill", function(d) {return d.group});

        node.append("image")
            .attr("xlink:href",  function(d) { return d.img;})
            .attr("x", function(d) { return -15;})
            .attr("y", function(d) { return -15;})
            .attr("height", 30)
            .attr("width", 30);

        node.append("text")
            .attr("dx", 3)
            .attr("dy", ".35em")
            .text(function(d) { return d.name });


        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        });

        function mouseover() {
            d3.select(this).select("image").transition()
                .attr("x", function(d) { return -30;})
                .attr("y", function(d) { return -30;})
                .attr("height", 60)
                .attr("width", 60);
            //d3.select(this).select("text").text(function(d) { return document.getElementById("value").innerHTML });
        }

        function mouseout() {
            d3.select(this).select("image").transition()
                .attr("x", function(d) { return -15;})
                .attr("y", function(d) { return -15;})
                .attr("height", 30)
                .attr("width", 30);
            filter();

        }

        function filter() {
            linkArr = []
            json.links.forEach(function (n) {
                if (n.value >= document.getElementById("value").innerHTML) {
                    linkArr.push(n);
                }
            })
            console.log(document.getElementById("value").innerHTML)
            console.log(linkArr)

            //console.log(force.nodes(nodeArr))
        }
    });
</script>
	{
	"nodes": [
	{
	"name": "Person1",
	"group": "#000"
	},
	{
	"name": "Person2",
	"group": "#000"
	},
	{
	"name": "Person3",
	"group": "#000"
	},
	{
	"imgname": "Person1_1",
	"group": "#000",
	"img": "MC2-Image-Data/Person1/Person1_1.jpg"
	},
	{
	"imgname": "Person2_1",
	"group": "#000",
	"img": "Person2_1.jpg"
	},
	{
	"imgname": "Person3_1",
	"group": "#000",
	"img": "Person3_1.jpg"
	},
	{
	"name": "pumpkinNotes",
	"group": "#FF0000"
	},
	{
	"name": "yellowBag",
	"group": "#FF0000"
	},
	{
	"name": "pinkCandle",
	"group": "#FF0000"
	}
	],
	"links": [
	{
	"source": 0,
	"target": 3,
	"value": 1
	},
	{
	"source": 1,
	"target": 4,
	"value": 1
	},
	{
	"source": 2,
	"target": 5,
	"value": 1
	},
	{
	"source": 3,
	"target": 6,
	"value": 0.4
	},
	{
	"source": 3,
	"target": 7,
	"value": 0.5
	},
	{
	"source": 3,
	"target": 8,
	"value": 0.8
	},
	{
	"source": 4,
	"target": 7,
	"value": 0.3
	},
	{
	"source": 5,
	"target": 8,
	"value": 0.23
	},
	{
	"source": 5,
	"target": 7,
	"value": 0.5
	}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.link {
	stroke: #ccc;
	}

	.node text {
	display:none;
	pointer-events: none;
	font: 10px sans-serif;
	}
	.node:hover text {
	display: inline;
	}


	</style>
	<head>
	<h1>
	Mini Challenge 2
	</h1>
	<h2>
	<script src="https://d3js.org/d3.v5.js"></script>
	<script src="https://unpkg.com/d3-simple-slider"></script>

	<p style = "font-family:georgia,garamond,serif;font-size:12px;" id="value">.2</p>
	<div id="slider"></div>

	<script>
	var slider = d3
	.sliderHorizontal()
	.min(0)
	.max(1)
	.step(.025)
	.width(300)
	.value(.2)
	.displayValue(false)
	.on('onchange', (val) => {
	d3.select('#value').text(val);
	});

	d3.select('#slider')
	.append('svg')
	.attr('width', 500)
	.attr('height', 100)
	.append('g')
	.attr('transform', 'translate(30,30)')
	.call(slider);


	</script>
	</h2>

	</head>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var force = d3.layout.force()
	.gravity(0.05)
	.distance(75)
	.charge(-200)
	.friction(0.85)
	.size([width, height]);

	d3.json("graph.json", function(error, json) {
	if (error) throw error;

	var nodeArr = [];

	json.nodes.forEach(function (n){
	nodeArr.push(n);
	})

	/*var linkArr = [];

	json.links.forEach(function (n) {
	linkArr.push(n);
	})*/

	filter();

	force
	.nodes(nodeArr)
	.links(linkArr)
	.start();

	console.log(document.getElementById("value").innerHTML)

	console.log(json.nodes)
	console.log(nodeArr)

	console.log(json.links)
	console.log(linkArr)

	var link = svg.selectAll(".link")
	.data(linkArr)
	.enter().append("line")
	.attr("stroke-width", function(d) {
	if (d.value != 1){
	return d.value*4
	}})
	.attr("class", "link");

	var node = svg.selectAll(".node")
	.data(nodeArr)
	.enter().append("g")
	.attr("class", "node")
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)
	.call(force.drag);

	node.append("svg:circle")
	.attr("r", function(d) { return Math.sqrt(d.size) / 10 \|\| 4; })
	.style("fill", function(d) {return d.group});

	node.append("image")
	.attr("xlink:href", function(d) { return d.img;})
	.attr("x", function(d) { return -15;})
	.attr("y", function(d) { return -15;})
	.attr("height", 30)
	.attr("width", 30);

	node.append("text")
	.attr("dx", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name });


	force.on("tick", function() {
	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });
	node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	});

	function mouseover() {
	d3.select(this).select("image").transition()
	.attr("x", function(d) { return -30;})
	.attr("y", function(d) { return -30;})
	.attr("height", 60)
	.attr("width", 60);
	//d3.select(this).select("text").text(function(d) { return document.getElementById("value").innerHTML });
	}

	function mouseout() {
	d3.select(this).select("image").transition()
	.attr("x", function(d) { return -15;})
	.attr("y", function(d) { return -15;})
	.attr("height", 30)
	.attr("width", 30);
	filter();

	}

	function filter() {
	linkArr = []
	json.links.forEach(function (n) {
	if (n.value >= document.getElementById("value").innerHTML) {
	linkArr.push(n);
	}
	})
	console.log(document.getElementById("value").innerHTML)
	console.log(linkArr)

	//console.log(force.nodes(nodeArr))
	}
	});
	</script>