debboutr · November 20, 2018 20:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
    body {
        top:30px;
        margin:30px;
        padding:30px;
    }
    .btn-group {
        font-size:0;
    }
    .chart-example {
      width:840px;
      height:500px;
      border-radius: 25px;
      border:2px solid;
      background-color:#d9ffcc;
      display: inline-block;
    }
    .chart-wrap {
    }
    .org {
      background-color:#ffb84d;

      border-radius: 5px;
      border-color: black;
    }
    .org:hover {
      background-color:#ffcc80;
    }
    .b1 {
      border-radius: 5px 0px 0px 0px;
      border-width: 2px 2px 0px 2px;
      margin-left:100px;
    }
    .b2 {

      border-radius: 0px 5px 0px 0px;
      border-width: 2px 2px 0px 0px;
    }
    .org:focus {
      outline: none;
    }
    .legend-wrap {
        position:relative;
        padding:100px;
    }
 </style>
 <div class="container-fluid">
    <div class="chart-wrap row">
        <div class="col-lg-9">
            <div>
              <button class="org b1" id="split">PUC Level Split</button><button class="org b2" id="combine">Combine</button>
            </div>
            <div class="chart-example" id="chart">
                <svg>
                </svg>
            </div>
        </div>
        <div class="legend-wrap col-lg-3 text-center">
            <h3>General Categories</h3>
            <div class="legend">

            </div>
        </div>
    </div>
 </div>



 <script src="https://d3js.org/d3.v4.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
 var legendColors = [];
 function bubbleChart() {
    var width = 840,
        height = 500,
        maxRadius = 6,
        columnForColors = "gen_cat",
        columnForRadius = "num_prods";

    function chart(selection) {
        var data = selection.datum();
        var div = selection,
            svg = div.selectAll('svg');
        svg.attr('width', width).attr('height', height);

        var ldat = [
                        {"title":"Level 1","x":80},
                        {"title":"Level 2","x":347},
                        {"title":"Level 3","x":640}
                    ]

        var labels = svg.selectAll('text')
                .data(ldat)
                .enter()
            .append('text')
                .attr('y',30)
                .attr('x', function(d){ return d.x })
                .style('fill','grey')
                .style('font-size','20px')
                .style("visibility", "hidden")
                .text(function(d){ return d.title })

        var tooltip = selection
            .append("div")
            .style("position", "absolute")
            .style("visibility", "hidden")
            .style("color", "white")
            .style("padding", "8px")
            .style("background-color", "#626D71")
            .style("border-radius", "6px")
            .style("text-align", "center")
            .style("font-family", "monospace")
            .style("width", "400px")
            .text("");

        var scaleRadius = d3.scaleSqrt().domain([d3.min(data, function(d) {
            return +d[columnForRadius];
        }), d3.max(data, function(d) {
            return +d[columnForRadius];
        })]).range([2,10]);
        var colorCircles = d3.scaleOrdinal(d3.schemeCategory10)




        var forceXSeparate = d3.forceX(function (d){
            if(d.PUC_type === '1'){
                return 180
            } else if (d.PUC_type === '2'){
                return 420
            } else {
                return 660
            }
        }).strength(0.08)

        var forceXCombine = d3.forceX(width / 2).strength(0.05)

        var forceCollide = d3.forceCollide(function(d){
            return scaleRadius(d[columnForRadius]) + 5;
        })

        var simulation = d3.forceSimulation(data)
            // .force("charge", d3.forceManyBody().strength([-50]))
            .force('charge', d3.forceManyBody().strength(-8))
            .force("x", forceXCombine)
            .force("y", d3.forceY(height / 2).strength(0.05))
            .force("collide", forceCollide)
            .on("tick", ticked);

        function ticked(e) {
            node.attr("cx", function(d) {
                    return d.x;
                })
                .attr("cy", function(d) {
                    return d.y;
                });
        }
        d3.select("#split").on('click', function(){
            simulation
                .force("x", forceXSeparate)
                .alphaTarget(0.5)
                .restart()
            labels
                .style("visibility", "visible")
        })

        d3.select("#combine").on('click', function(){
            simulation
                .force("x", forceXCombine)
                .alphaTarget(0.5)
                .restart()
            labels
                .style("visibility", "hidden")
        })
 /////////////////////////////////////
        let result = data.map(a => a.gen_cat);
        function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        }
        var unique = result.filter( onlyUnique );
        var colors = unique.map(a => colorCircles(a));

        for (i=0; i<unique.length; i++) {
            legendColors.push({title:unique[i], color:colors[i]})
        }
        // unique.forEach((u,i) => legendColors[u] = colors[i])
        // function createFriendNode( name ){
        //     // Create the friend node.
        //     return(
        //         $( "<li>" + name + "</li>" )
        //     );
        // }



        // console.log(colors);
 /////////////////////////////////////
        var node = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr('r', function(d) {
                // alert(d)
                return scaleRadius(d[columnForRadius]) + 4
            })
            .style("fill", function(d) {
                return colorCircles(d[columnForColors])
            })
            .attr('class','bubble')
            .attr('stroke','#004d4d')
            .attr('stroke-width',0)
            .on("mouseover", function(d) {
                d3.select(this)
                  .transition()
                  .duration(347)
                  .attr('stroke-width',1)
                var matrix = this.getScreenCTM()
                    .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
                tooltip.html("PUC Level: " + d.PUC_type + "<br><b>" + d.gen_cat + "-</b><br><b>-" + d.prod_fam + "-</b><br><b>-" + d.prod_type + "</b><br>" + "Product Count: " + d[columnForRadius])
                    .style("left", (window.pageXOffset + matrix.e + 15) + "px")
                    .style("top", (window.pageYOffset + matrix.f - 30) + "px");
                return tooltip.style("visibility", "visible");
            })
            .on("mouseout", function() {
                d3.select(this)
                  .transition()
                  .duration(347)
                  .attr('stroke-width',0)
                return tooltip.style("visibility", "hidden");
            });
    }


    chart.width = function(value) {
        if (!arguments.length) {
            return width;
        }
        width = value;
        return chart;
    };

    chart.height = function(value) {
        if (!arguments.length) {
            return height;
        }
        height = value;
        return chart;
    };

    return chart;
 }

 d3.csv('pucs.csv', function(error, data) {
  if (error) {
      console.error('Error getting or parsing the data.');
      throw error;
  }

  var chart = bubbleChart().width(840).height(500);
  d3.select('#chart').datum(data).call(chart);
  console.log(legendColors);
  $.each(legendColors, function(index, val) {
      console.log(val);
    $("div.legend").append('<div class="img-rounded text-center" style="color:#fff;background-color:' + val.color + ';"><b>' + val.title + '</b></div>');
    });
    });

 </script>
diff --git a/pucs.csv b/pucs.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	top:30px;
	margin:30px;
	padding:30px;
	}
	.btn-group {
	font-size:0;
	}
	.chart-example {
	width:840px;
	height:500px;
	border-radius: 25px;
	border:2px solid;
	background-color:#d9ffcc;
	display: inline-block;
	}
	.chart-wrap {
	}
	.org {
	background-color:#ffb84d;

	border-radius: 5px;
	border-color: black;
	}
	.org:hover {
	background-color:#ffcc80;
	}
	.b1 {
	border-radius: 5px 0px 0px 0px;
	border-width: 2px 2px 0px 2px;
	margin-left:100px;
	}
	.b2 {

	border-radius: 0px 5px 0px 0px;
	border-width: 2px 2px 0px 0px;
	}
	.org:focus {
	outline: none;
	}
	.legend-wrap {
	position:relative;
	padding:100px;
	}
	</style>
	<div class="container-fluid">
	<div class="chart-wrap row">
	<div class="col-lg-9">
	<div>
	<button class="org b1" id="split">PUC Level Split</button><button class="org b2" id="combine">Combine</button>
	</div>
	<div class="chart-example" id="chart">
	<svg>
	</svg>
	</div>
	</div>
	<div class="legend-wrap col-lg-3 text-center">
	<h3>General Categories</h3>
	<div class="legend">

	</div>
	</div>
	</div>
	</div>



	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	var legendColors = [];
	function bubbleChart() {
	var width = 840,
	height = 500,
	maxRadius = 6,
	columnForColors = "gen_cat",
	columnForRadius = "num_prods";

	function chart(selection) {
	var data = selection.datum();
	var div = selection,
	svg = div.selectAll('svg');
	svg.attr('width', width).attr('height', height);

	var ldat = [
	{"title":"Level 1","x":80},
	{"title":"Level 2","x":347},
	{"title":"Level 3","x":640}
	]

	var labels = svg.selectAll('text')
	.data(ldat)
	.enter()
	.append('text')
	.attr('y',30)
	.attr('x', function(d){ return d.x })
	.style('fill','grey')
	.style('font-size','20px')
	.style("visibility", "hidden")
	.text(function(d){ return d.title })

	var tooltip = selection
	.append("div")
	.style("position", "absolute")
	.style("visibility", "hidden")
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "#626D71")
	.style("border-radius", "6px")
	.style("text-align", "center")
	.style("font-family", "monospace")
	.style("width", "400px")
	.text("");

	var scaleRadius = d3.scaleSqrt().domain([d3.min(data, function(d) {
	return +d[columnForRadius];
	}), d3.max(data, function(d) {
	return +d[columnForRadius];
	})]).range([2,10]);
	var colorCircles = d3.scaleOrdinal(d3.schemeCategory10)




	var forceXSeparate = d3.forceX(function (d){
	if(d.PUC_type === '1'){
	return 180
	} else if (d.PUC_type === '2'){
	return 420
	} else {
	return 660
	}
	}).strength(0.08)

	var forceXCombine = d3.forceX(width / 2).strength(0.05)

	var forceCollide = d3.forceCollide(function(d){
	return scaleRadius(d[columnForRadius]) + 5;
	})

	var simulation = d3.forceSimulation(data)
	// .force("charge", d3.forceManyBody().strength([-50]))
	.force('charge', d3.forceManyBody().strength(-8))
	.force("x", forceXCombine)
	.force("y", d3.forceY(height / 2).strength(0.05))
	.force("collide", forceCollide)
	.on("tick", ticked);

	function ticked(e) {
	node.attr("cx", function(d) {
	return d.x;
	})
	.attr("cy", function(d) {
	return d.y;
	});
	}
	d3.select("#split").on('click', function(){
	simulation
	.force("x", forceXSeparate)
	.alphaTarget(0.5)
	.restart()
	labels
	.style("visibility", "visible")
	})

	d3.select("#combine").on('click', function(){
	simulation
	.force("x", forceXCombine)
	.alphaTarget(0.5)
	.restart()
	labels
	.style("visibility", "hidden")
	})
	/////////////////////////////////////
	let result = data.map(a => a.gen_cat);
	function onlyUnique(value, index, self) {
	return self.indexOf(value) === index;
	}
	var unique = result.filter( onlyUnique );
	var colors = unique.map(a => colorCircles(a));

	for (i=0; i<unique.length; i++) {
	legendColors.push({title:unique[i], color:colors[i]})
	}
	// unique.forEach((u,i) => legendColors[u] = colors[i])
	// function createFriendNode( name ){
	// // Create the friend node.
	// return(
	// $( "<li>" + name + "</li>" )
	// );
	// }



	// console.log(colors);
	/////////////////////////////////////
	var node = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr('r', function(d) {
	// alert(d)
	return scaleRadius(d[columnForRadius]) + 4
	})
	.style("fill", function(d) {
	return colorCircles(d[columnForColors])
	})
	.attr('class','bubble')
	.attr('stroke','#004d4d')
	.attr('stroke-width',0)
	.on("mouseover", function(d) {
	d3.select(this)
	.transition()
	.duration(347)
	.attr('stroke-width',1)
	var matrix = this.getScreenCTM()
	.translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
	tooltip.html("PUC Level: " + d.PUC_type + "<br><b>" + d.gen_cat + "-</b><br><b>-" + d.prod_fam + "-</b><br><b>-" + d.prod_type + "</b><br>" + "Product Count: " + d[columnForRadius])
	.style("left", (window.pageXOffset + matrix.e + 15) + "px")
	.style("top", (window.pageYOffset + matrix.f - 30) + "px");
	return tooltip.style("visibility", "visible");
	})
	.on("mouseout", function() {
	d3.select(this)
	.transition()
	.duration(347)
	.attr('stroke-width',0)
	return tooltip.style("visibility", "hidden");
	});
	}


	chart.width = function(value) {
	if (!arguments.length) {
	return width;
	}
	width = value;
	return chart;
	};

	chart.height = function(value) {
	if (!arguments.length) {
	return height;
	}
	height = value;
	return chart;
	};

	return chart;
	}

	d3.csv('pucs.csv', function(error, data) {
	if (error) {
	console.error('Error getting or parsing the data.');
	throw error;
	}

	var chart = bubbleChart().width(840).height(500);
	d3.select('#chart').datum(data).call(chart);
	console.log(legendColors);
	$.each(legendColors, function(index, val) {
	console.log(val);
	$("div.legend").append('<div class="img-rounded text-center" style="color:#fff;background-color:' + val.color + ';"><b>' + val.title + '</b></div>');
	});
	});

	</script>