sytpp · January 25, 2018 16:24
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!-- // from https://bl.ocks.org/cjhin/7023f2df4f9165b6e4ed8e07ab7b968a -->

 <!DOCTYPE html>
    <meta charset="utf-8">

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="d3.v4.min.js"></script>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
    </head>

    <body>
        

        <fieldset class="field_set">
            <form name="myform" onSubmit="return handleClickSearch()">
                <input name="Submit"  type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search">
                <input type="text" id="mySearchTerm" size="55" style="font-size: 14px;" placeholder="search in added information e.g. skill 02 or NLP">
                <input name="Submit"  type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search">
                
            </form>
        </fieldset>

        <div class="container">
            <svg id="chart"></svg>
            <div class="ontheright">
                <svg id="legend"><svg>
                <div id="infodiv"></div>
            </div>
        </div>

       <script src="script.js"></script>

 
    </body>
 </html>

diff --git a/script.js b/script.js
 var cHeight = 800;
 var cWidth = 700;

 // Prepare our physical space
 var canvas = d3
    .select("#chart")
    .attr("width", cWidth)
    .attr("height", cHeight)
    .attr("transform", "translate(" + 10 + "," + 0 + ")");

 var g = canvas
    .append("g")
    .attr("transform", "translate(" + 120 + "," + 0 + ")");

 // Define 'div' for tooltips
 var infodiv = d3.select("#infodiv").attr("opacity", 0);
 var color = d3.scaleOrdinal(d3.schemeCategory10);

 function loadAndPrepareData(filter) {
    d3.csv("data.csv", function(error, csvData) {
        if (error) throw error;

        var massagedData = [];
        if (filter) {
            massagedData = csvData.map(function(d) {
                var highlight =
                    d.skills.toLowerCase().search(filter) != -1 ||
                    d.what_i_do.toLowerCase().search(filter) != -1 ||
                    d.within.toLowerCase().search(filter) != -1 
                        ? true
                        : false;
                return { d: d, highlight: highlight };
            });
        } else {
            massagedData = csvData.map(function(d) {
                return { d: d, highlight: false };
            });
        }

        var colorData = Array.from(
            new Set(
                csvData.map(function(d) {
                    return d.job_family;
                })
            )
        ).sort(function(a, b) {
            return a.localeCompare(b);
        });

        //console.log(csvData)
        //console.log(massagedData)
        drawViz(massagedData);

        //console.log(colorData)
        drawLegend(colorData);
    });
 }

 function drawLegend(colorData) {
    d3
        .select("#legend")
        .selectAll("g")
        .html("");

    var legendDotSize = 30;
    var legendWrapper = d3
        .select("#legend")
        .append("g")
        .attr("class", "legend");

    // The text of the legend
    var legendText = legendWrapper.selectAll("text").data(colorData);

    legendText
        .enter()
        .append("text")
        .attr("y", function(d, i) {
            return i * legendDotSize + 12;
        })
        .attr("x", 20)
        .merge(legendText)
        .text(function(d) {
            return d;
        });

    // The dots of the legend
    var legendDot = legendWrapper.selectAll("rect").data(colorData);

    legendDot
        .enter()
        .append("rect")
        .attr("y", function(d, i) {
            return i * legendDotSize;
        })
        .attr("rx", legendDotSize * 0.5)
        .attr("ry", legendDotSize * 0.5)
        .attr("width", legendDotSize * 0.5)
        .attr("height", legendDotSize * 0.5)
        .merge(legendDot)
        .style("fill", function(d) {
            return color(d);
        });
 }

 function drawViz(data) {
    d3
        .select("#chart")
        .selectAll("g")
        .html("");

    var stratify = d3
        .stratify()
        .id(function(d) {
            return d.d.id;
        })
        .parentId(function(d) {
            return d.d.line_manager;
        });

    var tree;
    tree = d3.cluster().size([cHeight, cWidth]); // height, width
    var root = stratify(data).sort(function(a, b) {
        return (
            a.data.d.job_family.localeCompare(b.data.d.job_family) ||
            b.height - a.height
        );
    });

    tree(root);
    //console.log(root);

    var link = g.selectAll(".link").data(root.descendants().slice(1));

    link
        .enter()
        .append("path")
        .attr("class", "link")
        .merge(link)
        .attr("d", function(d) {
            return (
                "M" +
                d.y +
                "," +
                d.x +
                "C" +
                (d.parent.y + 100) +
                "," +
                d.x +
                " " +
                (d.parent.y + 100) +
                "," +
                d.parent.x +
                " " +
                d.parent.y +
                "," +
                d.parent.x
            );
        });

    var node = g.selectAll(".node").data(root.descendants());

    node.group = node
        .enter()
        .append("g")
        .attr("class", function(d) {
            return "node" + (d.children ? " node--internal" : " node--leaf");
        });

    node.group.merge(node).attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")";
    });

    node.group
        .append("circle")
        .attr("r", function(d) {
            return d.data.highlight ? 15 : 10;
        })
        .attr("fill", function(d) {
            return color(d.data.d.job_family);
        })
        .attr("stroke", "white")
        .attr("opacity", function(d) {
            return d.data.highlight ? 1 : 0.7;
        });

    // MOUSEOVER EVENTS - Tooltip stuff after this etc
    var people = d3.selectAll("circle");
    people.on("mouseover", function(d) {
        d3
            .select(this)
            .transition()
            .duration(200)
            .attr("r", function(d) {
                return d.data.highlight ? 20 : 15;
            });

        infodiv.html(
            "<big><b>" +
                d.data.d.id +
                "</b></big><br>" +
                d.data.d.job_title +
                "<br>" +
                d.data.d.job_family +
                "<br>" +
                "Reporting to: " +
                d.data.d.line_manager +
                "<br>" +
                "<br>-----<br><br>" +
                "ADDED INFORMATION<br>" +
                "<br><big><b>" +
                d.data.d.within +
                "</b></big><br><br>" +
                "<b>What I do</b><br>" +
                d.data.d.what_i_do +
                "<br>" +
                "<br>" +
                "<b>Skills</b><br>" +
                d.data.d.skills +
                "<br>" +
                "<br>" +
                "<b>Contact</b><br>" +
                d.data.d.email +
                "<br>" +
                d.data.d.location +
                "<br>"
        );
    });
    people.on("mouseout", function() {
        d3
            .select(this)
            .transition()
            .duration(200)
            .attr("r", function(d) {
                return d.data.highlight ? 15 : 10;
            });
    });

    node.group
        .append("text")
        .text(function(d) {
            return d.data.d.id;
        })
        .merge(node.select("text"))
        .attr("dy", function(d) {
            return d.children ? -15 : 10;
        })
        .attr("x", function(d) {
            return d.children ? -1 * (this.getBBox().width + -15) : 25;
        })
        .attr("font-weight", function(d) {
            return d.data.highlight ? "bold" : "normal";
        });
 }

 // Search
 function handleClickSearch(event) {
    currentSearchTerm = document
        .getElementById("mySearchTerm")
        .value.toLowerCase();
    //console.log(currentSearchTerm)
    loadAndPrepareData(currentSearchTerm);
    return false;
 }

 loadAndPrepareData();
diff --git a/style.css b/style.css
 body {
  font-family: sans-serif;
 }

 text {
  font: 12px sans-serif;
 }

 fieldset.field_set {
  border: 0px;
 }

 .node text {
  font: 12px sans-serif;
 }

 .node--internal text {
  /*text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;*/
 }

 .link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
 }

 .container {
  display: flex;
  flex-direction: row;
  width: 100%;
 }

 #chart {
  width: 70%;
  padding-right: 50px;
 }

 .ontheright{
  display: flex;
  flex-direction: column;
  width: 20%;
  /*height: 100%;*/
 }

 #infodiv {
  height:60%;
  padding-left: : 10px;
  padding-top: 20px;
  font: 12px sans-serif;
 }

 #legend { 
  height: 40%;
  overflow: visible; 
  padding-left: : 10px;
  padding-bottom: 20px;
 }

diff --git a/thumbnail.png b/thumbnail.png
	<!-- // from https://bl.ocks.org/cjhin/7023f2df4f9165b6e4ed8e07ab7b968a -->

	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<link rel="stylesheet" href="style.css">
	<script src="d3.v4.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
	</head>

	<body>


	<fieldset class="field_set">
	<form name="myform" onSubmit="return handleClickSearch()">
	<input name="Submit" type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search">
	<input type="text" id="mySearchTerm" size="55" style="font-size: 14px;" placeholder="search in added information e.g. skill 02 or NLP">
	<input name="Submit" type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search">

	</form>
	</fieldset>

	<div class="container">
	<svg id="chart"></svg>
	<div class="ontheright">
	<svg id="legend"><svg>
	<div id="infodiv"></div>
	</div>
	</div>

	<script src="script.js"></script>


	</body>
	</html>
	var cHeight = 800;
	var cWidth = 700;

	// Prepare our physical space
	var canvas = d3
	.select("#chart")
	.attr("width", cWidth)
	.attr("height", cHeight)
	.attr("transform", "translate(" + 10 + "," + 0 + ")");

	var g = canvas
	.append("g")
	.attr("transform", "translate(" + 120 + "," + 0 + ")");

	// Define 'div' for tooltips
	var infodiv = d3.select("#infodiv").attr("opacity", 0);
	var color = d3.scaleOrdinal(d3.schemeCategory10);

	function loadAndPrepareData(filter) {
	d3.csv("data.csv", function(error, csvData) {
	if (error) throw error;

	var massagedData = [];
	if (filter) {
	massagedData = csvData.map(function(d) {
	var highlight =
	d.skills.toLowerCase().search(filter) != -1 \|\|
	d.what_i_do.toLowerCase().search(filter) != -1 \|\|
	d.within.toLowerCase().search(filter) != -1
	? true
	: false;
	return { d: d, highlight: highlight };
	});
	} else {
	massagedData = csvData.map(function(d) {
	return { d: d, highlight: false };
	});
	}

	var colorData = Array.from(
	new Set(
	csvData.map(function(d) {
	return d.job_family;
	})
	)
	).sort(function(a, b) {
	return a.localeCompare(b);
	});

	//console.log(csvData)
	//console.log(massagedData)
	drawViz(massagedData);

	//console.log(colorData)
	drawLegend(colorData);
	});
	}

	function drawLegend(colorData) {
	d3
	.select("#legend")
	.selectAll("g")
	.html("");

	var legendDotSize = 30;
	var legendWrapper = d3
	.select("#legend")
	.append("g")
	.attr("class", "legend");

	// The text of the legend
	var legendText = legendWrapper.selectAll("text").data(colorData);

	legendText
	.enter()
	.append("text")
	.attr("y", function(d, i) {
	return i * legendDotSize + 12;
	})
	.attr("x", 20)
	.merge(legendText)
	.text(function(d) {
	return d;
	});

	// The dots of the legend
	var legendDot = legendWrapper.selectAll("rect").data(colorData);

	legendDot
	.enter()
	.append("rect")
	.attr("y", function(d, i) {
	return i * legendDotSize;
	})
	.attr("rx", legendDotSize * 0.5)
	.attr("ry", legendDotSize * 0.5)
	.attr("width", legendDotSize * 0.5)
	.attr("height", legendDotSize * 0.5)
	.merge(legendDot)
	.style("fill", function(d) {
	return color(d);
	});
	}

	function drawViz(data) {
	d3
	.select("#chart")
	.selectAll("g")
	.html("");

	var stratify = d3
	.stratify()
	.id(function(d) {
	return d.d.id;
	})
	.parentId(function(d) {
	return d.d.line_manager;
	});

	var tree;
	tree = d3.cluster().size([cHeight, cWidth]); // height, width
	var root = stratify(data).sort(function(a, b) {
	return (
	a.data.d.job_family.localeCompare(b.data.d.job_family) \|\|
	b.height - a.height
	);
	});

	tree(root);
	//console.log(root);

	var link = g.selectAll(".link").data(root.descendants().slice(1));

	link
	.enter()
	.append("path")
	.attr("class", "link")
	.merge(link)
	.attr("d", function(d) {
	return (
	"M" +
	d.y +
	"," +
	d.x +
	"C" +
	(d.parent.y + 100) +
	"," +
	d.x +
	" " +
	(d.parent.y + 100) +
	"," +
	d.parent.x +
	" " +
	d.parent.y +
	"," +
	d.parent.x
	);
	});

	var node = g.selectAll(".node").data(root.descendants());

	node.group = node
	.enter()
	.append("g")
	.attr("class", function(d) {
	return "node" + (d.children ? " node--internal" : " node--leaf");
	});

	node.group.merge(node).attr("transform", function(d) {
	return "translate(" + d.y + "," + d.x + ")";
	});

	node.group
	.append("circle")
	.attr("r", function(d) {
	return d.data.highlight ? 15 : 10;
	})
	.attr("fill", function(d) {
	return color(d.data.d.job_family);
	})
	.attr("stroke", "white")
	.attr("opacity", function(d) {
	return d.data.highlight ? 1 : 0.7;
	});

	// MOUSEOVER EVENTS - Tooltip stuff after this etc
	var people = d3.selectAll("circle");
	people.on("mouseover", function(d) {
	d3
	.select(this)
	.transition()
	.duration(200)
	.attr("r", function(d) {
	return d.data.highlight ? 20 : 15;
	});

	infodiv.html(
	"<big><b>" +
	d.data.d.id +
	"</b></big><br>" +
	d.data.d.job_title +
	"<br>" +
	d.data.d.job_family +
	"<br>" +
	"Reporting to: " +
	d.data.d.line_manager +
	"<br>" +
	"<br>-----<br><br>" +
	"ADDED INFORMATION<br>" +
	"<br><big><b>" +
	d.data.d.within +
	"</b></big><br><br>" +
	"<b>What I do</b><br>" +
	d.data.d.what_i_do +
	"<br>" +
	"<br>" +
	"<b>Skills</b><br>" +
	d.data.d.skills +
	"<br>" +
	"<br>" +
	"<b>Contact</b><br>" +
	d.data.d.email +
	"<br>" +
	d.data.d.location +
	"<br>"
	);
	});
	people.on("mouseout", function() {
	d3
	.select(this)
	.transition()
	.duration(200)
	.attr("r", function(d) {
	return d.data.highlight ? 15 : 10;
	});
	});

	node.group
	.append("text")
	.text(function(d) {
	return d.data.d.id;
	})
	.merge(node.select("text"))
	.attr("dy", function(d) {
	return d.children ? -15 : 10;
	})
	.attr("x", function(d) {
	return d.children ? -1 * (this.getBBox().width + -15) : 25;
	})
	.attr("font-weight", function(d) {
	return d.data.highlight ? "bold" : "normal";
	});
	}

	// Search
	function handleClickSearch(event) {
	currentSearchTerm = document
	.getElementById("mySearchTerm")
	.value.toLowerCase();
	//console.log(currentSearchTerm)
	loadAndPrepareData(currentSearchTerm);
	return false;
	}

	loadAndPrepareData();
	body {
	font-family: sans-serif;
	}

	text {
	font: 12px sans-serif;
	}

	fieldset.field_set {
	border: 0px;
	}

	.node text {
	font: 12px sans-serif;
	}

	.node--internal text {
	/text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;/
	}

	.link {
	fill: none;
	stroke: #555;
	stroke-opacity: 0.4;
	stroke-width: 1.5px;
	}

	.container {
	display: flex;
	flex-direction: row;
	width: 100%;
	}

	#chart {
	width: 70%;
	padding-right: 50px;
	}

	.ontheright{
	display: flex;
	flex-direction: column;
	width: 20%;
	/height: 100%;/
	}

	#infodiv {
	height:60%;
	padding-left: : 10px;
	padding-top: 20px;
	font: 12px sans-serif;
	}

	#legend {
	height: 40%;
	overflow: visible;
	padding-left: : 10px;
	padding-bottom: 20px;
	}