d3.js wiki visualization

forked from lilyc5459's block: d3.js wiki visualization

forked from CBasis's block: d3.js wiki visualization

<!DOCTYPE html>
<style>
	body {
		font-family: 'Open Sans', sans-serif;
    font-size: 12px;
	}
  .graph {
    text-align: center;
  }
  svg {
    background-color: #333947;
  }
	.title {
    font-size: 16px;
		font-weight: bold;
    fill: #fff;
	}
  .caption {
    fill: #ccc;
  }
	.axis path,
	.axis line {
    fill: none;
    stroke: #eee;
    shape-rendering: crispEdges;
	}
  .axis text {
    fill: #fff;
  }
	.loading {
    font-size: 15px;
	}
  .plot {
    fill-opacity: 0.75;
  }

.conflict0 { fill: #4990BF; }
	.conflict1 { fill: #FF6363; }
	.conflict2 { fill: #738b8c; }
	.conflict3 { fill: #BC63FF; }
	.conflict4 { fill: #EFFF63; }
	.conflict5 { fill: #FF3D3D; }
	.conflict6 { fill: #496EBF; }
  .conflict7 { fill: #cda2a2; }
  .conflict8 { fill: #E563FF; }
  .conflict9 { fill: #63D8FF; }

.circle {
    cursor: pointer;
    opacity: 0.5;
  }
  .circle:hover {
    stroke: #000;
    stroke-width: 2px;
  }
  .title-tip,
  .body-tip {
    line-height: 1;
    padding: 12px;
    background: #000;
    color: #fff;
    line-height: 14px;
    border-radius: 2px;
    pointer-events: none;
    text-align: center;
  }

.body-tip {
    max-width: 250px;
  }

.title-tip div {
    font-size: 10px;
    color: #ccc;
  }

/* Creates a small triangle extender for the tooltip */
  .title-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: #000;
    position: absolute;
    pointer-events: none;
  }

.title-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
  }

.button {
    height: 25px;
    width: 125px;
    stroke: #ccc;
    stroke-width: 2px;
    fill: #333947;
  }

.button:hover,
  .button-text:hover {
    cursor: pointer;
  }

.button-active {
    stroke: #fff;
    fill: #fff;
  }

.button-text {
    fill: #ccc;
  }

.button-text-active {
    fill: #000;
  }
</style>

var titleTip = d3.tip()
                   .attr('class', 'title-tip')
                   .offset([-3, 0])
                   .html(function(d) {
                    return "<strong>" + d.title + "</strong><div>" + d.pageedits + " page edits</div>";
                   });

var bodyTip = d3.tip()
                  .attr('class', 'body-tip')
                  .html(function(d) { return d.description; });
   
  var svg = d3.select("#graph")
              .append("svg")
              .attr("width", w)
              .attr("height", h)
              .call(titleTip)
              .call(bodyTip);

var x = d3.scale.linear().domain([2001, 2006]).range([left, w-pad]);
  var y = d3.scale.linear().domain([0, 9]).range([above, h-pad-above]);
   
  var xAxis = d3.svg.axis().scale(x).orient("bottom")
    .ticks(6)
    .tickFormat(d3.format("d"))

var yAxis = d3.svg.axis().scale(y).orient("left")
    .ticks(10)
    .tickFormat(function (d, i) {
      return ['Technicality','Political','Ethical','Ethnic','International Words','Religion','Culture','Animal Rights','Star Wars','Other'][d];
    });

svg.append("text")
    .attr("class", "title")
    .attr("x", w/2)
    .attr("y", above/3)
    .attr("text-anchor", "middle")
    .text("Most Debated Wikipedia Articles (2010)");

svg.append("text")
    .attr("class", "caption")
    .attr("x", w/2)
    .attr("y", above/3+18)
    .attr("text-anchor", "middle")
    .text("Click each circle to read more!");
   
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0, "+(h-pad)+")")
      .call(xAxis);
   
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate("+(left-pad)+", 0)")
      .call(yAxis);
   
  svg.append("text")
      .attr("class", "loading")
      .text("Loading...")
      .attr("x", function () { return w/2; })
      .attr("y", function () { return h/2-5; });
   
  d3.json("data.json", function (data) {
    var max_r = d3.max(data.map(function (d) { return d.pageedits; }));
    var r1 = d3.scale.linear()
              .domain([0, d3.max(data, function (d) { return d.pageedits; })])
              .range([3, 100]);

var r2 = d3.scale.linear()
              .domain([0, d3.max(data, function (d) { return d.pagesofdiscussion; })])
              .range([3, 100]);

svg.selectAll("circle").remove();
      svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", function (d) { return "circle conflict"+d.conflicttype; })
        .attr("cx", function (d) { return x(d.creationdate); })
        .attr("cy", function (d) { return y(d.conflicttype); })
        .on('mouseover', titleTip.show)
        .on('mouseout', function(d) {
          titleTip.hide();
          bodyTip.hide(d);
        })
        .on('click', function (d) {
          titleTip.hide();
          bodyTip.show(d);
        })
        .transition()
        .duration(800)
        .attr("r", function (d) {
          if (flag == 0) {
            return r1(d.pageedits);
          } else {
            return r2(d.pagesofdiscussion);
          }
        });

titleTip.html(function(d) {
        if (flag == 0) {
          return "<strong>" + d.title + "</strong><div>" + d.pageedits + " page edits</div>";
        } else {
          return "<strong>" + d.title + "</strong><div>" + d.pagesofdiscussion + " pages of discussion</div>";
        }
      });
    }

var button1 = svg.append("rect")
                     .attr("class", "button button-active")
                     .attr("height", 25)
                     .attr("width", 125)
                     .attr("x", left/2)
                     .attr("y", above/2)
                     .attr("rx", 5)
                     .attr("ry", 5)
                     .on("click", function() {
                        toggleButton(0);
                        return displayCircles(0);
                      });

var buttonText1 = svg.append("text")
                     .attr("class", "button-text button-text-active")
                     .attr("x", left/2 + 63)
                     .attr("y", above/2 + 16)
                     .attr("text-anchor", "middle")
                     .text("Page Edits")
                     .on("click", function() {
                        toggleButton(0);
                        return displayCircles(0);
                      });

var button2 = svg.append("rect")
                     .attr("class", "button")
                     .attr("height", 25)
                     .attr("width", 125)
                     .attr("x", left/2+125)
                     .attr("y", above/2)
                     .attr("rx", 5)
                     .attr("ry", 5)
                     .on("click", function() {
                        toggleButton(1);
                        return displayCircles(1);
                      });

var buttonText2 = svg.append("text")
                     .attr("class", "button-text")
                     .attr("x", left/2 + 188)
                     .attr("y", above/2 + 16)
                     .attr("text-anchor", "middle")
                     .text("Pages of Discussion")
                     .on("click", function() {
                        toggleButton(1);
                        return displayCircles(1);
                      });
  });
</script>

Modified http://d3js.org/d3.v2.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v2.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js