kil9/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head><title>민영화 방식과 경제력 집중 관련 제반 변수들 간의 관계도</title></head>
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 1024px;
  height: 1000px;
  position: relative;
}
circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px; }
path.link {
  fill: none;
  stroke: #777;
  stroke-width: 1.5px; }
path.link.l1, circle.l1 {
  stroke: #558; }
marker#l1, circle.l1 {
  fill: #55d; }
circle.l1 {
  stroke-width: 2.0px; }
path.link.l2, circle.l2 {
  stroke: #889; }
marker#l2, circle.l2 {
  fill: #66a; }
circle.l2 {
  stroke-width: 1.2px; }
path.link.l3, circle.l3 {
  stroke: #e44; }
marker#l3, circle.l3 {
  fill: #d44; }
circle.l3 {
  stroke-width: 1.2px; }
path.link.l4, circle.l4 {
  stroke: #ddf; }
marker#l4, circle.l4 {
  fill: #cce; }
circle.l4 {
  stroke-width: 1.2px; }
path.link.retry {
  stroke: #555; }
marker#retry {
  fill: #777; }
path.link.retry {
  stroke-dasharray: 0,2 1; }
a, text {
  text-decoration: none; }
div#privatization {
  border: 1px solid black;
  padding: 10px;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8; }

</style>


<div id="privatization">
  <b>민영화 방식과 경제력 집중 관련 제반 변수들 간의 관계도</b> (원본: 삼성경제연구소 편, "민영화와 한국경제", 1996. p. 297)<br>
  visualization: @kimkkiruk <br><br>
  <font color="blue">→ 긍정적 관계</font><br>
  <font color="red">→ 부정적 관계</font>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var links = [{source: "공기업 민영화", target: "소비자 후생증대", type: "l1"},
  {source: "소비자 후생증대", target: "국가경쟁력 제고", type: "l1"},
  {source: "공기업 민영화", target: "노조 반발", type: "l1"},
  {source: "공기업 민영화", target: "증시수요 창출", type: "l1"},
  {source: "증시수요 창출", target: "재산권민주주의 확대", type: "l1"},
  {source: "재산권민주주의 확대", target: "국가경쟁력 제고", type: "l1"},
  {source: "직접금융 확대", target: "지하자금 유입", type: "l1"},
  {source: "증시수요 창출", target: "지하자금 유입", type: "l1"},
  {source: "지하자금 유입", target: "국가경쟁력 제고", type: "l1"},
  {source: "공기업 민영화", target: "정부재원 증가", type: "l1"},
  {source: "정부재원 증가", target: "SOC 확충", type: "l1"},
  {source: "SOC 확충", target: "국가경쟁력 제고", type: "l1"},
  {source: "여타기업 자산증가", target: "신산업 창출", type: "l1"},
  {source: "여타기업 투자 확대", target: "여타기업 자산증가", type: "l1"},
  {source: "여타기업 투자 확대", target: "국가경쟁력 제고", type: "l1"},
  {source: "여타기업 순익증가", target: "여타기업 투자 확대", type: "l1"},
  {source: "여타기업 순익증가", target: "일반경제력집중", type: "l3"},
  {source: "일반경제력집중", target: "여타기업 순익증가", type: "l3"},
  {source: "수출증대", target: "여타기업 순익증가", type: "l1"},
  {source: "기업자구노력", target: "산업구조조정", type: "l1"},
  {source: "산업구조조정", target: "신산업 창출", type: "l1"},
  {source: "정부재원 증가", target: "신산업 창출", type: "l1"},
  {source: "신산업 창출", target: "국가경쟁력 제고", type: "l1"},
  {source: "공기업 민영화", target: "대기업 여유감소", type: "l1"},
  {source: "대기업 순이익 증가", target: "대기업 여유감소", type: "l3"},
  {source: "기업자구노력", target: "직접금융 확대", type: "l1"},
  {source: "대기업 여유감소", target: "직접금융 확대", type: "l1"},
  {source: "대기업 여유감소", target: "기업자구노력", type: "l1"},
  {source: "공기업 민영화", target: "대기업 자산증가", type: "l1"},
  {source: "국민주", target: "공기업 민영화", type: "l1"},
  {source: "국민주", target: "대기업 자산증가", type: "l3"},
  {source: "안정주주제", target: "공기업 민영화", type: "l1"},
  {source: "안정주주제", target: "대기업 자산증가", type: "l3"},
  {source: "대기업 자산증가", target: "대기업 투자확대", type: "l1"},
  {source: "대기업 자산증가", target: "대기업 매출증가", type: "l1"},
  {source: "대기업 매출증가", target: "대기업 순이익 증가", type: "l1"},
  {source: "수출증대", target: "대기업 순이익 증가", type: "l1"},
  {source: "수출증대", target: "국가경쟁력 제고", type: "l1"},
  {source: "대기업 순이익 증가", target: "대기업 투자확대", type: "l1"},
  {source: "대기업 투자확대", target: "국가경쟁력 제고", type: "l1"},
  {source: "대기업 자산증가", target: "일반경제력집중", type: "l1"},
  {source: "분할민영화", target: "공기업 민영화", type: "l1"},
  {source: "분할민영화", target: "일반경제력집중", type: "l3"},
  {source: "정부규제강화", target: "공기업 민영화", type: "l3"},
  {source: "정부규제강화", target: "경쟁촉진", type: "l3"},
  {source: "일반경제력집중", target: "정부규제강화", type: "l1"},
  {source: "경쟁촉진", target: "시장집중", type: "l1"},
  {source: "공기업 민영화", target: "시장집중", type: "l3"},
  {source: "시장집중", target: "일반경제력집중", type: "l1"},
  {source: "경제효율화", target: "국가경쟁력 제고", type: "l1"},
  {source: "대기업 효율화", target: "경제효율화", type: "l1"},
  {source: "기업자구노력", target: "대기업 효율화", type: "l1"},
  {source: "시장왜곡 개선", target: "경제효율화", type: "l1"},
  {source: "일반경제력집중", target: "시장왜곡 개선", type: "l3"},

  {source: "종업원지주제", target: "공기업 민영화", type: "l3"},
  {source: "종업원지주제", target: "노조 반발", type: "l3"},
  {source: "노조 반발", target: "사회적 비용 증가", type: "l1"},
  {source: "사회적 비용 증가", target: "국가경쟁력 제고", type: "l3"},

  {source: "공기업 민영화", target: "경영 전문화", type: "l1"},
  {source: "경영 전문화", target: "국가경쟁력 제고", type: "l1"},


  {source: "국제적 압력", target: "공기업 민영화", type: "l1"},
  {source: "정부의 정책 의지", target: "공기업 민영화", type: "l1"},
  {source: "외국인 참여확대", target: "공기업 민영화", type: "l1"},
  {source: "기득권 경쟁", target: "공기업 민영화", type: "l3"},
  {source: "정부의 정책 의지", target: "기득권 경쟁", type: "l3"},

] // default topology for eye candy
var nodes = {
  '공기업 민영화': { 'type': 'begin', 'boltType': 'l1' },
  '정부규제강화': { 'type': 'begin', 'boltType': 'l1' },
  '국가경쟁력 제고': { 'type': 'begin', 'boltType': 'l1' },
  '일반경제력집중': { 'type': 'begin', 'boltType': 'l1' },
  '기업자구노력': { 'type': 'begin', 'boltType': 'l1' },
}

// auto-assign names
for (node in nodes) { nodes[node]['name'] = node }

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
})
var w = 960,
    h = 800

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([w, h])
    .linkDistance(80)
    .charge(-5000)
    .gravity(1.8)
    .on("tick", tick)
    .start();

var svg = d3.select("div#privatization").append("svg")
    .attr("width", w)
    .attr("height", h);

// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
    .data(["l1", "l2", "l3", "l4", "retry"])
  .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 9)
    .attr("markerHeight", 9)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("r", 12)
    .call(force.drag)
    .attr("class", function(d) { return d['boltType']; });

var text = svg.append("svg:g").selectAll("g")
    .data(force.nodes())
  .enter().append("svg:g");

// A copy of the text with a thick white stroke for legibility.
var fontSize = 10
text.append("svg:text")
    .attr("x", 12)
    .attr("y", ".45em")
    .attr("class", "shadow")
    .style('font-size', fontSize)
    .text(function(d) { return d.name; });

text.append("svg:text")
    .attr("x", 12)
    .attr("y", ".45em")
    .style('font-size', fontSize)
    .text(function(d) { return d.name; });

// elliptical arc path
function tick(e) {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });
  circle.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"; });
  text.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"; });
}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head><title>민영화 방식과 경제력 집중 관련 제반 변수들 간의 관계도</title></head>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 1024px;
	height: 1000px;
	position: relative;
	}
	circle {
	fill: #ccc;
	stroke: #333;
	stroke-width: 1.5px; }
	path.link {
	fill: none;
	stroke: #777;
	stroke-width: 1.5px; }
	path.link.l1, circle.l1 {
	stroke: #558; }
	marker#l1, circle.l1 {
	fill: #55d; }
	circle.l1 {
	stroke-width: 2.0px; }
	path.link.l2, circle.l2 {
	stroke: #889; }
	marker#l2, circle.l2 {
	fill: #66a; }
	circle.l2 {
	stroke-width: 1.2px; }
	path.link.l3, circle.l3 {
	stroke: #e44; }
	marker#l3, circle.l3 {
	fill: #d44; }
	circle.l3 {
	stroke-width: 1.2px; }
	path.link.l4, circle.l4 {
	stroke: #ddf; }
	marker#l4, circle.l4 {
	fill: #cce; }
	circle.l4 {
	stroke-width: 1.2px; }
	path.link.retry {
	stroke: #555; }
	marker#retry {
	fill: #777; }
	path.link.retry {
	stroke-dasharray: 0,2 1; }
	a, text {
	text-decoration: none; }
	div#privatization {
	border: 1px solid black;
	padding: 10px;
	}

	text.shadow {
	stroke: #fff;
	stroke-width: 3px;
	stroke-opacity: .8; }

	</style>


	<div id="privatization">
	<b>민영화 방식과 경제력 집중 관련 제반 변수들 간의 관계도</b> (원본: 삼성경제연구소 편, "민영화와 한국경제", 1996. p. 297)<br>
	visualization: @kimkkiruk <br><br>
	<font color="blue">→ 긍정적 관계</font><br>
	<font color="red">→ 부정적 관계</font>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var links = [{source: "공기업 민영화", target: "소비자 후생증대", type: "l1"},
	{source: "소비자 후생증대", target: "국가경쟁력 제고", type: "l1"},
	{source: "공기업 민영화", target: "노조 반발", type: "l1"},
	{source: "공기업 민영화", target: "증시수요 창출", type: "l1"},
	{source: "증시수요 창출", target: "재산권민주주의 확대", type: "l1"},
	{source: "재산권민주주의 확대", target: "국가경쟁력 제고", type: "l1"},
	{source: "직접금융 확대", target: "지하자금 유입", type: "l1"},
	{source: "증시수요 창출", target: "지하자금 유입", type: "l1"},
	{source: "지하자금 유입", target: "국가경쟁력 제고", type: "l1"},
	{source: "공기업 민영화", target: "정부재원 증가", type: "l1"},
	{source: "정부재원 증가", target: "SOC 확충", type: "l1"},
	{source: "SOC 확충", target: "국가경쟁력 제고", type: "l1"},
	{source: "여타기업 자산증가", target: "신산업 창출", type: "l1"},
	{source: "여타기업 투자 확대", target: "여타기업 자산증가", type: "l1"},
	{source: "여타기업 투자 확대", target: "국가경쟁력 제고", type: "l1"},
	{source: "여타기업 순익증가", target: "여타기업 투자 확대", type: "l1"},
	{source: "여타기업 순익증가", target: "일반경제력집중", type: "l3"},
	{source: "일반경제력집중", target: "여타기업 순익증가", type: "l3"},
	{source: "수출증대", target: "여타기업 순익증가", type: "l1"},
	{source: "기업자구노력", target: "산업구조조정", type: "l1"},
	{source: "산업구조조정", target: "신산업 창출", type: "l1"},
	{source: "정부재원 증가", target: "신산업 창출", type: "l1"},
	{source: "신산업 창출", target: "국가경쟁력 제고", type: "l1"},
	{source: "공기업 민영화", target: "대기업 여유감소", type: "l1"},
	{source: "대기업 순이익 증가", target: "대기업 여유감소", type: "l3"},
	{source: "기업자구노력", target: "직접금융 확대", type: "l1"},
	{source: "대기업 여유감소", target: "직접금융 확대", type: "l1"},
	{source: "대기업 여유감소", target: "기업자구노력", type: "l1"},
	{source: "공기업 민영화", target: "대기업 자산증가", type: "l1"},
	{source: "국민주", target: "공기업 민영화", type: "l1"},
	{source: "국민주", target: "대기업 자산증가", type: "l3"},
	{source: "안정주주제", target: "공기업 민영화", type: "l1"},
	{source: "안정주주제", target: "대기업 자산증가", type: "l3"},
	{source: "대기업 자산증가", target: "대기업 투자확대", type: "l1"},
	{source: "대기업 자산증가", target: "대기업 매출증가", type: "l1"},
	{source: "대기업 매출증가", target: "대기업 순이익 증가", type: "l1"},
	{source: "수출증대", target: "대기업 순이익 증가", type: "l1"},
	{source: "수출증대", target: "국가경쟁력 제고", type: "l1"},
	{source: "대기업 순이익 증가", target: "대기업 투자확대", type: "l1"},
	{source: "대기업 투자확대", target: "국가경쟁력 제고", type: "l1"},
	{source: "대기업 자산증가", target: "일반경제력집중", type: "l1"},
	{source: "분할민영화", target: "공기업 민영화", type: "l1"},
	{source: "분할민영화", target: "일반경제력집중", type: "l3"},
	{source: "정부규제강화", target: "공기업 민영화", type: "l3"},
	{source: "정부규제강화", target: "경쟁촉진", type: "l3"},
	{source: "일반경제력집중", target: "정부규제강화", type: "l1"},
	{source: "경쟁촉진", target: "시장집중", type: "l1"},
	{source: "공기업 민영화", target: "시장집중", type: "l3"},
	{source: "시장집중", target: "일반경제력집중", type: "l1"},
	{source: "경제효율화", target: "국가경쟁력 제고", type: "l1"},
	{source: "대기업 효율화", target: "경제효율화", type: "l1"},
	{source: "기업자구노력", target: "대기업 효율화", type: "l1"},
	{source: "시장왜곡 개선", target: "경제효율화", type: "l1"},
	{source: "일반경제력집중", target: "시장왜곡 개선", type: "l3"},

	{source: "종업원지주제", target: "공기업 민영화", type: "l3"},
	{source: "종업원지주제", target: "노조 반발", type: "l3"},
	{source: "노조 반발", target: "사회적 비용 증가", type: "l1"},
	{source: "사회적 비용 증가", target: "국가경쟁력 제고", type: "l3"},

	{source: "공기업 민영화", target: "경영 전문화", type: "l1"},
	{source: "경영 전문화", target: "국가경쟁력 제고", type: "l1"},


	{source: "국제적 압력", target: "공기업 민영화", type: "l1"},
	{source: "정부의 정책 의지", target: "공기업 민영화", type: "l1"},
	{source: "외국인 참여확대", target: "공기업 민영화", type: "l1"},
	{source: "기득권 경쟁", target: "공기업 민영화", type: "l3"},
	{source: "정부의 정책 의지", target: "기득권 경쟁", type: "l3"},

	] // default topology for eye candy
	var nodes = {
	'공기업 민영화': { 'type': 'begin', 'boltType': 'l1' },
	'정부규제강화': { 'type': 'begin', 'boltType': 'l1' },
	'국가경쟁력 제고': { 'type': 'begin', 'boltType': 'l1' },
	'일반경제력집중': { 'type': 'begin', 'boltType': 'l1' },
	'기업자구노력': { 'type': 'begin', 'boltType': 'l1' },
	}

	// auto-assign names
	for (node in nodes) { nodes[node]['name'] = node }

	// Compute the distinct nodes from the links.
	links.forEach(function(link) {
	link.source = nodes[link.source] \|\| (nodes[link.source] = {name: link.source});
	link.target = nodes[link.target] \|\| (nodes[link.target] = {name: link.target});
	})
	var w = 960,
	h = 800

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([w, h])
	.linkDistance(80)
	.charge(-5000)
	.gravity(1.8)
	.on("tick", tick)
	.start();

	var svg = d3.select("div#privatization").append("svg")
	.attr("width", w)
	.attr("height", h);

	// Per-type markers, as they don't inherit styles.
	svg.append("svg:defs").selectAll("marker")
	.data(["l1", "l2", "l3", "l4", "retry"])
	.enter().append("svg:marker")
	.attr("id", String)
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 15)
	.attr("refY", -1.5)
	.attr("markerWidth", 9)
	.attr("markerHeight", 9)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	var path = svg.append("svg:g").selectAll("path")
	.data(force.links())
	.enter().append("svg:path")
	.attr("class", function(d) { return "link " + d.type; })
	.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

	var circle = svg.append("svg:g").selectAll("circle")
	.data(force.nodes())
	.enter().append("svg:circle")
	.attr("r", 12)
	.call(force.drag)
	.attr("class", function(d) { return d['boltType']; });

	var text = svg.append("svg:g").selectAll("g")
	.data(force.nodes())
	.enter().append("svg:g");

	// A copy of the text with a thick white stroke for legibility.
	var fontSize = 10
	text.append("svg:text")
	.attr("x", 12)
	.attr("y", ".45em")
	.attr("class", "shadow")
	.style('font-size', fontSize)
	.text(function(d) { return d.name; });

	text.append("svg:text")
	.attr("x", 12)
	.attr("y", ".45em")
	.style('font-size', fontSize)
	.text(function(d) { return d.name; });

	// elliptical arc path
	function tick(e) {
	path.attr("d", function(d) {
	var dx = d.target.x - d.source.x,
	dy = d.target.y - d.source.y,
	dr = Math.sqrt(dx * dx + dy * dy);
	return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
	});
	circle.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")"; });
	text.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")"; });
	}
	</script>