htakeuchi/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    .bar1 { fill: aqua; }
    .bar2 { fill: deepskyblue; }
    .bar3 { fill: steelblue; }
    .bar:hover {fill: orange; }
    .axis--x path { display: none; }
    .line {
        fill: none;
        stroke: royalblue;
        stroke-width: 3;
    }
    .dot {
        fill: royalblue;
        stroke: royalblue;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

  <script>
  var dataset = [
    ['札幌',703, 1902],
    ['清水',1473,3341],
    ['松本',863,1935],
    ['Ｃ大阪',1494,3008],
    ['京都',965,1743],
    ['岡山',568,1271],
    ['町田',189, 626],
    ['横浜ＦＣ',464, 1064],
    ['徳島',731, 1443],
    ['愛媛',306, 630],
    ['千葉',899, 2556],
    ['山口',231, 880],
    ['水戸',262, 589],
    ['山形',429, 1497],
    ['長崎',322, 749],
    ['熊本',315, 720],
    ['群馬',228, 522],
    ['東京Ｖ',436, 1391],
    ['讃岐',287, 613],
    ['岐阜',419,932],
    ['金沢',296,612],
    ['北九州',343,855]
  ];

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960,
      height = 400;

  var xScale = d3.scaleBand()
                .rangeRound([0, width])
                .padding(0.1)
                .domain(dataset.map(function(d) {
                  return d[0];
                }));
      yScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d[2];
                }))]);

  var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

  var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // axis-x
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

  // axis-y
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(yScale));

  var bar = g.selectAll("rect")
    .data(dataset)
    .enter().append("g");

  // bar chart
  bar.append("rect")
    .attr("x", function(d) { return xScale(d[0]); })
    .attr("y", function(d) { return yScale(d[2]); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d[2]); })
    .attr("class", function(d) {
      var s = "bar ";
      if (d[1] < 400) {
        return s + "bar1";
      } else if (d[1] < 800) {
        return s + "bar2";
      } else {
        return s + "bar3";
      }
    });

  // labels on the bar chart
  bar.append("text")
    .attr("dy", "1.3em")
    .attr("x", function(d) { return xScale(d[0]) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yScale(d[2]); })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "black")
    .text(function(d) {
      return d[2];
    });

  // line chart
  var line = d3.line()
      .x(function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
      .y(function(d) { return yScale(d[1]); })
      .curve(d3.curveMonotoneX);

  bar.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(dataset)); // 11. Calls the line generator

  bar.append("circle") // Uses the enter().append() method
      .attr("class", "dot") // Assign a class for styling
      .attr("cx", function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
      .attr("cy", function(d) { return yScale(d[1]); })
      .attr("r", 5);

  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	.bar1 { fill: aqua; }
	.bar2 { fill: deepskyblue; }
	.bar3 { fill: steelblue; }
	.bar:hover {fill: orange; }
	.axis--x path { display: none; }
	.line {
	fill: none;
	stroke: royalblue;
	stroke-width: 3;
	}
	.dot {
	fill: royalblue;
	stroke: royalblue;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>

	<body>

	<script>
	var dataset = [
	['札幌',703, 1902],
	['清水',1473,3341],
	['松本',863,1935],
	['Ｃ大阪',1494,3008],
	['京都',965,1743],
	['岡山',568,1271],
	['町田',189, 626],
	['横浜ＦＣ',464, 1064],
	['徳島',731, 1443],
	['愛媛',306, 630],
	['千葉',899, 2556],
	['山口',231, 880],
	['水戸',262, 589],
	['山形',429, 1497],
	['長崎',322, 749],
	['熊本',315, 720],
	['群馬',228, 522],
	['東京Ｖ',436, 1391],
	['讃岐',287, 613],
	['岐阜',419,932],
	['金沢',296,612],
	['北九州',343,855]
	];

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960,
	height = 400;

	var xScale = d3.scaleBand()
	.rangeRound([0, width])
	.padding(0.1)
	.domain(dataset.map(function(d) {
	return d[0];
	}));
	yScale = d3.scaleLinear()
	.rangeRound([height, 0])
	.domain([0, d3.max(dataset, (function (d) {
	return d[2];
	}))]);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// axis-x
	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(xScale));

	// axis-y
	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(yScale));

	var bar = g.selectAll("rect")
	.data(dataset)
	.enter().append("g");

	// bar chart
	bar.append("rect")
	.attr("x", function(d) { return xScale(d[0]); })
	.attr("y", function(d) { return yScale(d[2]); })
	.attr("width", xScale.bandwidth())
	.attr("height", function(d) { return height - yScale(d[2]); })
	.attr("class", function(d) {
	var s = "bar ";
	if (d[1] < 400) {
	return s + "bar1";
	} else if (d[1] < 800) {
	return s + "bar2";
	} else {
	return s + "bar3";
	}
	});

	// labels on the bar chart
	bar.append("text")
	.attr("dy", "1.3em")
	.attr("x", function(d) { return xScale(d[0]) + xScale.bandwidth() / 2; })
	.attr("y", function(d) { return yScale(d[2]); })
	.attr("text-anchor", "middle")
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "black")
	.text(function(d) {
	return d[2];
	});

	// line chart
	var line = d3.line()
	.x(function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
	.y(function(d) { return yScale(d[1]); })
	.curve(d3.curveMonotoneX);

	bar.append("path")
	.attr("class", "line") // Assign a class for styling
	.attr("d", line(dataset)); // 11. Calls the line generator

	bar.append("circle") // Uses the enter().append() method
	.attr("class", "dot") // Assign a class for styling
	.attr("cx", function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
	.attr("cy", function(d) { return yScale(d[1]); })
	.attr("r", 5);

	</script>
	</body>
	</html>