debboutr · November 2, 2018 22:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
    .btn-group {
        font-size:0;
    }
    .chart-example {
      width:840px;
      height:500px;
      border-radius: 25px;
      border:2px solid;
      background-color:#d9ffcc;
    }
    .chart-wrap {
      padding-left: 80px;
      padding-right: 50%;
      display:inline;
    }
    .org {
      background-color:#ffb84d;
      /* border: none; */
      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;
    }
 </style>
    <h4>Products Linked to PUCs</h4>
    <div class="btn-group" role="group" aria-label="Basic example">
      <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>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
 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.scaleLinear().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")
        })

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


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

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

    return chart;
 }

    //////////////////////////////
    
 //       var chart = bubbleChart().width(840).height(500);
 //       d3.select('#chart').datum(data).call(chart);
    d3.csv('PUCs.csv', function(error, data) {
      if (error) {
          console.error('Error getting or parsing the data.');
          throw error;
      }
      // selection.datum() returns the bound datum for the first element in the selection and
      //  doesn't join the specified array of data with the selected elements
      var chart = bubbleChart().width(840).height(500);
      d3.select('#chart').datum(data).call(chart);
        });
 </script>
diff --git a/PUCs.csv b/PUCs.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.btn-group {
	font-size:0;
	}
	.chart-example {
	width:840px;
	height:500px;
	border-radius: 25px;
	border:2px solid;
	background-color:#d9ffcc;
	}
	.chart-wrap {
	padding-left: 80px;
	padding-right: 50%;
	display:inline;
	}
	.org {
	background-color:#ffb84d;
	/* border: none; */
	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;
	}
	</style>
	<h4>Products Linked to PUCs</h4>
	<div class="btn-group" role="group" aria-label="Basic example">
	<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>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>
	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.scaleLinear().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")
	})

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


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

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

	return chart;
	}

	//////////////////////////////

	// var chart = bubbleChart().width(840).height(500);
	// d3.select('#chart').datum(data).call(chart);
	d3.csv('PUCs.csv', function(error, data) {
	if (error) {
	console.error('Error getting or parsing the data.');
	throw error;
	}
	// selection.datum() returns the bound datum for the first element in the selection and
	// doesn't join the specified array of data with the selected elements
	var chart = bubbleChart().width(840).height(500);
	d3.select('#chart').datum(data).call(chart);
	});
	</script>