yanhann10 · April 19, 2018 01:07
diff --git a/.block b/.block
 license: MIT
diff --git a/README.md b/README.md
diff --git a/data_leak.csv b/data_leak.csv
diff --git a/index.html b/index.html

 <html>
  <head>
    <div id="legend1">
 	   <div class="legend1"> <span class="key-dot email"></span>email address </div>
 	   <div class="legend1"> <span class="key-dot personal"></span>personal details </div>
 	   <div class="legend1"> <span class="key-dot credit"></span>Credit card info </div> <br>
      	   <div class="legend1"> <span class="key-dot health"></span>health record/email password </div>
      	   <div class="legend1"> <span class="key-dot bank"></span>bank account details </div>
 	</div>
    <div id="legend2"></div>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <link rel="stylesheet" type="text/css" href="style.css"/>
      <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
  </head>
  <body>
 	<div id="chart"></div>
    <script type="text/javascript" src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js

  var width = 500,
      height = 500,
      start = 0,
      end = 2.25,
      numSpirals = 4
      margin = {top:50,bottom:50,left:50,right:50};

    var theta = function(r) {
      return numSpirals * Math.PI * r;
    };

    // used to assign nodes color by group
    var color = d3.scaleOrdinal() // D3 Version 4
  .domain(1,20,300,4000,50000)
  .range(["#B8DE29","#238A8D","#55C667", '#A7226E','#440154']);;

    var r = d3.min([width, height]) / 2-20 ;

    var radius = d3.scaleLinear()
      .domain([start, end])
      .range([30, r]);

    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.left + margin.right)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var points = d3.range(start, end + 0.001, (end - start) / 1000);

    var spiral = d3.radialLine()
      .curve(d3.curveCardinal)
      .angle(theta)
      .radius(radius);

    var path = svg.append("path")
      .datum(points)
      .attr("id", "spiral")
      .attr("d", spiral)
      .style("fill", "none")
      .style("stroke", "lightgrey")
      .style("stroke-dasharray", ("6, 5"))
      .style("opacity",0.2);

    var spiralLength = path.node().getTotalLength(),
        N = 274,
        barWidth = (spiralLength / N) - 1;
    var formatNum=d3.format(".2s")
 //define data
 d3.csv('data_leak.csv', function(error, someData) {
        if (error) throw error;

        // format the data
        someData.forEach(function(d) {
          d.idx = +d.idx;
          d.num_records_stolen = +d.num_records_stolen;
          d.group=d.group;
          d.data_sensitivity=+d.data_sensitivity;
          d.method_of_leak=d.method_of_leak
        });


    var timeScale = d3.scaleLinear()
      .domain(d3.extent(someData, function(d){
        return d.idx;
      }))
      .range([0, spiralLength]);
    
    // yScale for the bar height
    var yScale = d3.scalePow().exponent(0.5)
      .domain(d3.extent(someData, d=> d.num_records_stolen))
      .range([0, (r / numSpirals)-10 ]);

    svg.selectAll("circle")
      .data(someData)
      .enter()
      .append("circle")
      .attr("cx", function(d,i){
        
        var linePer = timeScale(d.idx),
            posOnLine = path.node().getPointAtLength(linePer),
            angleOnLine = path.node().getPointAtLength(linePer - barWidth);
      
        d.linePer = linePer; // % distance are on the spiral
        d.cx = posOnLine.x; // x postion on the spiral
        d.cy = posOnLine.y; // y position on the spiral
        
        d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 90; //angle at the spiral position

        return d.cx;
      })
      .attr("cy", function(d){
        return d.cy;
      })
      .attr("r", d=>yScale(d.num_records_stolen))
      .attr("opacity", 0.85)
      .style("fill", d=>color(d.data_sensitivity))
      .style("stroke", d=>d.method_of_leak=='hacking'?"black":"none")
    .style("stroke-dasharray", ("1, 2"))
    .style("stroke-width", 1.2);
   
       // add date labels

    svg.selectAll("text")
      .data(someData)
      .enter()
      .append("text")
      .attr("dy", 10)
      .style("text-anchor", "start")
      .style("font", "10px arial")
      .append("textPath")
      // only add for the first of each month
      .filter(d=>d.first==1)
      .text(d=>d.year)
      // place text along spiral
      .attr("xlink:href", "#spiral")
      .style("fill", "grey")
      .attr("startOffset", function(d){
        return ((d.linePer / spiralLength) * 100) + "%";
      })

    
  //add select company label
   svg.selectAll(null)
      .data(someData)
      .enter()
      .append("text")
      .attr("x", function(d,i){
        
        var linePer = timeScale(d.idx),
            posOnLine = path.node().getPointAtLength(linePer),
            angleOnLine = path.node().getPointAtLength(linePer - barWidth);
      
        d.linePer = linePer; // % distance are on the spiral
        d.x = posOnLine.x; // x postion on the spiral
        d.y = posOnLine.y; // y position on the spiral
        
        d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 90; //angle at the spiral position

        return d.x-yScale(d.num_records_stolen)*0.6;
      })
      .attr("y", function(d){
        return d.y+6;
      })
      .text(d=>(d.entity==='Fb'&&d.year==2014)||(d.num_records_stolen>200000000 &&
            (d.data_sensitivity==20||d.data_sensitivity==300||d.data_sensitivity==4000||
            d.data_sensitivity==50000))?d.entity:'')
   .attr('fill','white')
     .style('font-size', function(d) { return Math.min(2 * yScale(d.num_records_stolen), (2 * yScale(d.num_records_stolen) - 40) / this.getComputedTextLength() * 20) + "px"; })
   
  //tooltip
   var tooltip = d3.select("#chart")
    .append('div')
    .attr('class', 'tooltip');

    tooltip.append('div')
    .attr('class', 'date');
    tooltip.append('div')
    .attr('class', 'value');

    svg.selectAll("circle")
    .on('mouseover', function(d) {
        tooltip
              .style('position', 'absolute')
              .style('left', `${d3.event.pageX + 10}px`)
              .style('top', `${d3.event.pageY + 20}px`)
              .style('display', 'inline-block')
              .style('opacity', '0.9')
              .html(`
                <span><b>${d.year}</b></span>
                <br> <b>${d.entity}</b> </span>
                <br><span> lost ${formatNum(d.records_lost)} records
                <span>due to ${d.method_of_leak} <br><br>
 ${d.story}
 </span>`);
          })
    .on('mouseout', function(d) {
        d3.selectAll("rect")
        .style("fill", function(d){return color(d.group);})
        .style("stroke", "none")

        tooltip.style('display', 'none');
        tooltip.style('opacity',0);
    });


 })
 
 
diff --git a/style.css b/style.css
      body {
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
        margin: 40px;
      }
      .axis path {
        fill: none;
        stroke: #999;
        stroke-dasharray: 2 3;
      }
      .axis text {
        font-size: 13px;
        stroke: #222;
      }
      text.title {
        font-size: 24px;
      }
      circle.tick {
        fill: #f3f3f3;
        stroke: #999;
        stroke-dasharray: 2 3;
      }
      path.spiral {
        fill: none;
        stroke: #ee8d18;
        stroke-width: 3px;
      }


 .tooltip {
    background: white;
    border-radius: 4px;
    width: 200px;   
    box-shadow: 0 0 1px #999999;
    color: #333;
    font-size: 12px;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 95px;
    z-index: 10;
    display: block;
    opacity: 0;
 }

 h3 {
    margin-top: 15px;
 }


 .key-dot {
    display: inline-block;
    height: 10px;
    margin-right: .5em;
    width: 10px;
 }

 .legend {
    margin-right:20px;
 }

 .email { background: #DCE319;}
 .personal { background: #55C667;}
 .credit { background: #238A8D;}
 .health { background: #A7226E;}
 .bank { background: #440154;}

 }
 //"#DCE319","#55C667","#238A8D", '#A7226E','#440154']);;

 /*HTML Horizonal Legend*/
 .country-name {
    margin: 0 !important;
 }
 .key-dot {
    display: inline-block;
    height: 10px;
    margin-right: .5em;
    width: 10px;
 }


 #legend1{
    overflow:hidden;
  
 }
 .legend1 {
    float:left;
    margin-right: 1em;
  
 }
 .key-dot {
  border-radius: 50%;
 }
diff --git a/thumbnail.png b/thumbnail.png

	<html>
	<head>
	<div id="legend1">
	<div class="legend1"> <span class="key-dot email"></span>email address </div>
	<div class="legend1"> <span class="key-dot personal"></span>personal details </div>
	<div class="legend1"> <span class="key-dot credit"></span>Credit card info </div> <br>
	<div class="legend1"> <span class="key-dot health"></span>health record/email password </div>
	<div class="legend1"> <span class="key-dot bank"></span>bank account details </div>
	</div>
	<div id="legend2"></div>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>

	var width = 500,
	height = 500,
	start = 0,
	end = 2.25,
	numSpirals = 4
	margin = {top:50,bottom:50,left:50,right:50};

	var theta = function(r) {
	return numSpirals * Math.PI * r;
	};

	// used to assign nodes color by group
	var color = d3.scaleOrdinal() // D3 Version 4
	.domain(1,20,300,4000,50000)
	.range(["#B8DE29","#238A8D","#55C667", '#A7226E','#440154']);;

	var r = d3.min([width, height]) / 2-20 ;

	var radius = d3.scaleLinear()
	.domain([start, end])
	.range([30, r]);

	var svg = d3.select("#chart").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.left + margin.right)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var points = d3.range(start, end + 0.001, (end - start) / 1000);

	var spiral = d3.radialLine()
	.curve(d3.curveCardinal)
	.angle(theta)
	.radius(radius);

	var path = svg.append("path")
	.datum(points)
	.attr("id", "spiral")
	.attr("d", spiral)
	.style("fill", "none")
	.style("stroke", "lightgrey")
	.style("stroke-dasharray", ("6, 5"))
	.style("opacity",0.2);

	var spiralLength = path.node().getTotalLength(),
	N = 274,
	barWidth = (spiralLength / N) - 1;
	var formatNum=d3.format(".2s")
	//define data
	d3.csv('data_leak.csv', function(error, someData) {
	if (error) throw error;

	// format the data
	someData.forEach(function(d) {
	d.idx = +d.idx;
	d.num_records_stolen = +d.num_records_stolen;
	d.group=d.group;
	d.data_sensitivity=+d.data_sensitivity;
	d.method_of_leak=d.method_of_leak
	});


	var timeScale = d3.scaleLinear()
	.domain(d3.extent(someData, function(d){
	return d.idx;
	}))
	.range([0, spiralLength]);

	// yScale for the bar height
	var yScale = d3.scalePow().exponent(0.5)
	.domain(d3.extent(someData, d=> d.num_records_stolen))
	.range([0, (r / numSpirals)-10 ]);

	svg.selectAll("circle")
	.data(someData)
	.enter()
	.append("circle")
	.attr("cx", function(d,i){

	var linePer = timeScale(d.idx),
	posOnLine = path.node().getPointAtLength(linePer),
	angleOnLine = path.node().getPointAtLength(linePer - barWidth);

	d.linePer = linePer; // % distance are on the spiral
	d.cx = posOnLine.x; // x postion on the spiral
	d.cy = posOnLine.y; // y position on the spiral

	d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 90; //angle at the spiral position

	return d.cx;
	})
	.attr("cy", function(d){
	return d.cy;
	})
	.attr("r", d=>yScale(d.num_records_stolen))
	.attr("opacity", 0.85)
	.style("fill", d=>color(d.data_sensitivity))
	.style("stroke", d=>d.method_of_leak=='hacking'?"black":"none")
	.style("stroke-dasharray", ("1, 2"))
	.style("stroke-width", 1.2);

	// add date labels

	svg.selectAll("text")
	.data(someData)
	.enter()
	.append("text")
	.attr("dy", 10)
	.style("text-anchor", "start")
	.style("font", "10px arial")
	.append("textPath")
	// only add for the first of each month
	.filter(d=>d.first==1)
	.text(d=>d.year)
	// place text along spiral
	.attr("xlink:href", "#spiral")
	.style("fill", "grey")
	.attr("startOffset", function(d){
	return ((d.linePer / spiralLength) * 100) + "%";
	})


	//add select company label
	svg.selectAll(null)
	.data(someData)
	.enter()
	.append("text")
	.attr("x", function(d,i){

	var linePer = timeScale(d.idx),
	posOnLine = path.node().getPointAtLength(linePer),
	angleOnLine = path.node().getPointAtLength(linePer - barWidth);

	d.linePer = linePer; // % distance are on the spiral
	d.x = posOnLine.x; // x postion on the spiral
	d.y = posOnLine.y; // y position on the spiral

	d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 90; //angle at the spiral position

	return d.x-yScale(d.num_records_stolen)*0.6;
	})
	.attr("y", function(d){
	return d.y+6;
	})
	.text(d=>(d.entity==='Fb'&&d.year==2014)\|\|(d.num_records_stolen>200000000 &&
	(d.data_sensitivity==20\|\|d.data_sensitivity==300\|\|d.data_sensitivity==4000\|\|
	d.data_sensitivity==50000))?d.entity:'')
	.attr('fill','white')
	.style('font-size', function(d) { return Math.min(2 * yScale(d.num_records_stolen), (2 * yScale(d.num_records_stolen) - 40) / this.getComputedTextLength() * 20) + "px"; })

	//tooltip
	var tooltip = d3.select("#chart")
	.append('div')
	.attr('class', 'tooltip');

	tooltip.append('div')
	.attr('class', 'date');
	tooltip.append('div')
	.attr('class', 'value');

	svg.selectAll("circle")
	.on('mouseover', function(d) {
	tooltip
	.style('position', 'absolute')
	.style('left', `${d3.event.pageX + 10}px`)
	.style('top', `${d3.event.pageY + 20}px`)
	.style('display', 'inline-block')
	.style('opacity', '0.9')
	.html(`
	<span><b>${d.year}</b></span>
	<br> <b>${d.entity}</b> </span>
	<br><span> lost ${formatNum(d.records_lost)} records
	<span>due to ${d.method_of_leak} <br><br>
	${d.story}
	</span>`);
	})
	.on('mouseout', function(d) {
	d3.selectAll("rect")
	.style("fill", function(d){return color(d.group);})
	.style("stroke", "none")

	tooltip.style('display', 'none');
	tooltip.style('opacity',0);
	});


	})
	body {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
	margin: 40px;
	}
	.axis path {
	fill: none;
	stroke: #999;
	stroke-dasharray: 2 3;
	}
	.axis text {
	font-size: 13px;
	stroke: #222;
	}
	text.title {
	font-size: 24px;
	}
	circle.tick {
	fill: #f3f3f3;
	stroke: #999;
	stroke-dasharray: 2 3;
	}
	path.spiral {
	fill: none;
	stroke: #ee8d18;
	stroke-width: 3px;
	}


	.tooltip {
	background: white;
	border-radius: 4px;
	width: 200px;
	box-shadow: 0 0 1px #999999;
	color: #333;
	font-size: 12px;
	left: 130px;
	padding: 10px;
	position: absolute;
	text-align: left;
	top: 95px;
	z-index: 10;
	display: block;
	opacity: 0;
	}

	h3 {
	margin-top: 15px;
	}


	.key-dot {
	display: inline-block;
	height: 10px;
	margin-right: .5em;
	width: 10px;
	}

	.legend {
	margin-right:20px;
	}

	.email { background: #DCE319;}
	.personal { background: #55C667;}
	.credit { background: #238A8D;}
	.health { background: #A7226E;}
	.bank { background: #440154;}

	}
	//"#DCE319","#55C667","#238A8D", '#A7226E','#440154']);;

	/HTML Horizonal Legend/
	.country-name {
	margin: 0 !important;
	}
	.key-dot {
	display: inline-block;
	height: 10px;
	margin-right: .5em;
	width: 10px;
	}


	#legend1{
	overflow:hidden;

	}
	.legend1 {
	float:left;
	margin-right: 1em;

	}
	.key-dot {
	border-radius: 50%;
	}