hden · December 10, 2013 02:04
diff --git a/br.csv b/br.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
  <title>Treemap</title>
  <style>

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 960px;
  }

  form {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .node {
    border: solid 1px white;
    font: 10px sans-serif;
    line-height: 12px;
    overflow: hidden;
    position: absolute;
    text-indent: 2px;
    border-style: solid;
    border-color: darkgray;
  }

  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
 </head>
 <div>size: 下半年訂位量, color: 下半年成長</div>
 <script type="text/coffeescript">

  margin =
    top: 40
    right: 10
    bottom: 10
    left: 10

  width = 960 - margin.left - margin.right
  height = 500 - margin.top - margin.bottom

  color = d3.scale.linear()
  .range ['steelblue', 'white', 'crimson']

  treemap = d3.layout.treemap()
  .size([width, height])
  .sticky(true)
  .value (d) ->
    Math.pow 2, d.q34

  div = d3.select('body').append('div')
  .style('position', 'relative')
  .style('width', "#{width + margin.left + margin.right}px")
  .style('height', "#{height + margin.top + margin.bottom}px")
  .style('left', "#{margin.left}px")
  .style('top', "#{margin.top}px")

  position = ->
    @style 'left', (d) ->
      "#{d.x}px"
    .style 'top', (d) ->
      "#{d.y}px"
    .style 'width', (d) ->
      "#{Math.max(0, d.dx - 1)}px"
    .style 'height', (d) ->
      "#{Math.max(0, d.dy - 1)}px"


  d3.csv 'br.csv', (error, data) ->
    throw error if error?
    data.forEach (d) ->
      d.q34 = +d.q34
      d.q12 = +d.q12
      q12 = Math.pow 2, d.q12
      q34 = Math.pow 2, d.q34
      d.fold = (q34 - q12) / q12
      d.log = d.q34 - d.q12

    [min, max] = d3.extent data, (d) ->
      d.log

    color.domain [min, 0, max]

    node = div.datum({name: 'root', children: data}).selectAll('.node')
    .data(treemap.nodes).enter().append('div')
      .attr('class', 'node')
      .attr 'title', (d) ->
        "下半年成長: #{Math.round(d.fold * 100) / 100} 倍"
      .call(position)
      .style 'background', (d) ->
        if d.children? then null else color(d.log)
      .text (d) ->
        d.name

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Treemap</title>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	.node {
	border: solid 1px white;
	font: 10px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 2px;
	border-style: solid;
	border-color: darkgray;
	}

	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
	<script src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<div>size: 下半年訂位量, color: 下半年成長</div>
	<script type="text/coffeescript">

	margin =
	top: 40
	right: 10
	bottom: 10
	left: 10

	width = 960 - margin.left - margin.right
	height = 500 - margin.top - margin.bottom

	color = d3.scale.linear()
	.range ['steelblue', 'white', 'crimson']

	treemap = d3.layout.treemap()
	.size([width, height])
	.sticky(true)
	.value (d) ->
	Math.pow 2, d.q34

	div = d3.select('body').append('div')
	.style('position', 'relative')
	.style('width', "#{width + margin.left + margin.right}px")
	.style('height', "#{height + margin.top + margin.bottom}px")
	.style('left', "#{margin.left}px")
	.style('top', "#{margin.top}px")

	position = ->
	@style 'left', (d) ->
	"#{d.x}px"
	.style 'top', (d) ->
	"#{d.y}px"
	.style 'width', (d) ->
	"#{Math.max(0, d.dx - 1)}px"
	.style 'height', (d) ->
	"#{Math.max(0, d.dy - 1)}px"


	d3.csv 'br.csv', (error, data) ->
	throw error if error?
	data.forEach (d) ->
	d.q34 = +d.q34
	d.q12 = +d.q12
	q12 = Math.pow 2, d.q12
	q34 = Math.pow 2, d.q34
	d.fold = (q34 - q12) / q12
	d.log = d.q34 - d.q12

	[min, max] = d3.extent data, (d) ->
	d.log

	color.domain [min, 0, max]

	node = div.datum({name: 'root', children: data}).selectAll('.node')
	.data(treemap.nodes).enter().append('div')
	.attr('class', 'node')
	.attr 'title', (d) ->
	"下半年成長: #{Math.round(d.fold * 100) / 100} 倍"
	.call(position)
	.style 'background', (d) ->
	if d.children? then null else color(d.log)
	.text (d) ->
	d.name

	</script>
No results found