JakeTTU/graph.json Secret

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

## index.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
    /*	style definitions	*/
    button {
        position: absolute;
    }

    .node {
        stroke: white;
        stroke-width: 2px;
    }

    .link {
        stroke: gray;
    }

    #filter {
        top: 18em;
        left: 1em;
    }

</style>
<button type="button" class="filter-btn" id="filter">Filter Links</button>
<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">0</p>
        <div id="slider"></div>

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

            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="https://d3js.org/d3.v4.min.js"></script>
<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script>

    //	data stores
    var graph, store;

    //	svg selection and sizing
    var width = 960,
        height = 500

    //	svg selection and sizing
    var svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);
    radius = 7.5;

    //	d3 color scales
    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var link = svg.append("g").selectAll(".link"),
        node = svg.append("g").selectAll(".node");

    //	force simulation initialization
    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink()
            .id(function(d) { return d.id; }))
        .force("charge", d3.forceManyBody()
            .strength(function(d) { return -75;}))
        .force("center", d3.forceCenter(width / 2, height / 2));

    $(".filter-btn").on("click", function() {
        linkFilter = document.getElementById("value").innerHTML
        filter();
        update();
    });

    //	data read and store
    d3.json("graph.json", function(err, g) {
        if (err) throw err;

        var nodeByID = {};

        g.nodes.forEach(function(n) {
            nodeByID[n.id] = n;
        });

        graph = g;
        store = $.extend(true, {}, g);

        update();
    });

    //	general update pattern for updating the graph
    function update() {
        //	UPDATE
        node = node.data(graph.nodes, function(d) { return d.id;});
        //	EXIT
        node.exit().remove();
        //	ENTER
        var newNode = node.enter().append("circle")
            .attr("class", "node")
            .attr("r", radius)
            .attr("fill", function(d) {return (d.group);})
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)
            )

        newNode.append("title")
            .text(function(d) { return "group: " + d.group + "\n" + "id: " + d.id; })

        newNode.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);

        //	ENTER + UPDATE
        node = node.merge(newNode);

        //	UPDATE
        link = link.data(graph.links1, function(d) { return d.id;});
        //	EXIT
        link.exit().remove();
        //	ENTER
        newLink = link.enter().append("line")
            .attr("class", "link")
            .attr("stroke-width", function(d) {
                if (d.value !== 1){
                    return d.value*4
                }});


        newLink.append("title")
            .text(function(d) { return "source: " + d.source + "\n" + "target: " + d.target; });
        //	ENTER + UPDATE
        link = link.merge(newLink);

        //	update simulation nodes, links, and alpha
        simulation
            .nodes(graph.nodes)
            .on("tick", ticked);

        simulation.force("link")
            .links(graph.links1);

        simulation.alpha(1).alphaTarget(0).restart();
    }

    //	drag event handlers
    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

    //	tick event handler without a bounded box
    function ticked() {
        node
            // .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
            // .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });

        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; });
    }

    function filter() {
        store.links1.forEach(function(l) {
            if ((linkFilter < l.value) && l.filtered) {
                l.filtered = false;
                graph.links1.push($.extend(true, {}, l));
            } else if ((linkFilter >= l.value) && !l.filtered) {
                l.filtered = true;
                graph.links1.forEach(function(d, i) {
                    if (l.id === d.id) {
                        graph.links1.splice(i, 1);
                    }
                });
            }
        });
    }

</script>
</body>
	{
	"nodes": [
	{
	"id": "Person1",
	"group": "#000"
	},
	{
	"id": "Person2",
	"group": "#000"
	},
	{
	"id": "Person3",
	"group": "#000"
	},
	{
	"id": "Person1_1",
	"group": "#AAA",
	"img": "MC2-Image-Data/Person1/Person1_1.jpg"
	},
	{
	"id": "Person2_1",
	"group": "#AAA",
	"img": "Person2_1.jpg"
	},
	{
	"id": "Person3_1",
	"group": "#AAA",
	"img": "Person3_1.jpg"
	},
	{
	"id": "pumpkinNotes",
	"group": "#FF0000"
	},
	{
	"id": "yellowBag",
	"group": "#FF0000"
	},
	{
	"id": "pinkCandle",
	"group": "#FF0000"
	}
	],
	"links1": [
	{
	"source": "Person1",
	"target": "Person1_1",
	"id" : "0",
	"value": 1
	},
	{
	"source": "Person2",
	"target": "Person2_1",
	"id" : "1",
	"value": 1
	},
	{
	"source": "Person3",
	"target": "Person3_1",
	"id" : "2",
	"value": 1
	},
	{
	"source": "Person1_1",
	"target": "pumpkinNotes",
	"id" : "3",
	"value": 0.4
	},
	{
	"source": "Person1_1",
	"target": "yellowBag",
	"id" : "4",
	"value": 0.5
	},
	{
	"source": "Person1_1",
	"target": "pinkCandle",
	"id" : "5",
	"value": 0.8
	},
	{
	"source": "Person2_1",
	"target": "yellowBag",
	"id" : "6",
	"value": 0.3
	},
	{
	"source": "Person3_1",
	"target": "pinkCandle",
	"id" : "7",
	"value": 0.23
	},
	{
	"source": "Person3_1",
	"target": "yellowBag",
	"id" : "8",
	"value": 0.5
	}
	]
	}
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<style>
	/* style definitions */
	button {
	position: absolute;
	}

	.node {
	stroke: white;
	stroke-width: 2px;
	}

	.link {
	stroke: gray;
	}

	#filter {
	top: 18em;
	left: 1em;
	}

	</style>
	<button type="button" class="filter-btn" id="filter">Filter Links</button>
	<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">0</p>
	<div id="slider"></div>

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

	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="https://d3js.org/d3.v4.min.js"></script>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script>

	// data stores
	var graph, store;

	// svg selection and sizing
	var width = 960,
	height = 500

	// svg selection and sizing
	var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height);
	radius = 7.5;

	// d3 color scales
	var color = d3.scaleOrdinal(d3.schemeCategory10);

	var link = svg.append("g").selectAll(".link"),
	node = svg.append("g").selectAll(".node");

	// force simulation initialization
	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink()
	.id(function(d) { return d.id; }))
	.force("charge", d3.forceManyBody()
	.strength(function(d) { return -75;}))
	.force("center", d3.forceCenter(width / 2, height / 2));

	$(".filter-btn").on("click", function() {
	linkFilter = document.getElementById("value").innerHTML
	filter();
	update();
	});

	// data read and store
	d3.json("graph.json", function(err, g) {
	if (err) throw err;

	var nodeByID = {};

	g.nodes.forEach(function(n) {
	nodeByID[n.id] = n;
	});

	graph = g;
	store = $.extend(true, {}, g);

	update();
	});

	// general update pattern for updating the graph
	function update() {
	// UPDATE
	node = node.data(graph.nodes, function(d) { return d.id;});
	// EXIT
	node.exit().remove();
	// ENTER
	var newNode = node.enter().append("circle")
	.attr("class", "node")
	.attr("r", radius)
	.attr("fill", function(d) {return (d.group);})
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended)
	)

	newNode.append("title")
	.text(function(d) { return "group: " + d.group + "\n" + "id: " + d.id; })

	newNode.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);

	// ENTER + UPDATE
	node = node.merge(newNode);

	// UPDATE
	link = link.data(graph.links1, function(d) { return d.id;});
	// EXIT
	link.exit().remove();
	// ENTER
	newLink = link.enter().append("line")
	.attr("class", "link")
	.attr("stroke-width", function(d) {
	if (d.value !== 1){
	return d.value*4
	}});


	newLink.append("title")
	.text(function(d) { return "source: " + d.source + "\n" + "target: " + d.target; });
	// ENTER + UPDATE
	link = link.merge(newLink);

	// update simulation nodes, links, and alpha
	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links1);

	simulation.alpha(1).alphaTarget(0).restart();
	}

	// drag event handlers
	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(d) {
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

	function dragended(d) {
	if (!d3.event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	}

	// tick event handler without a bounded box
	function ticked() {
	node
	// .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
	// .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });

	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; });
	}

	function filter() {
	store.links1.forEach(function(l) {
	if ((linkFilter < l.value) && l.filtered) {
	l.filtered = false;
	graph.links1.push($.extend(true, {}, l));
	} else if ((linkFilter >= l.value) && !l.filtered) {
	l.filtered = true;
	graph.links1.forEach(function(d, i) {
	if (l.id === d.id) {
	graph.links1.splice(i, 1);
	}
	});
	}
	});
	}

	</script>
	</body>