lubegasimon/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.tsv

          
            year
            money
            number

            
              2005
              550
              35

            
              2006
              600
              40

            
              2007
              700
              45

            
              2008
              800
              60

            
              2009
              900
              70

            
              2010
              850
              65

            
              2011
              880
              67

            
              2012
              900
              70

            
              2013
              1000
              75

## dualScale.css
.bar1 {
  fill: steelblue;
}

.bar2 {
  fill: orange;
}


.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  z-index: 10;
  display: block;
  opacity: 0;
}

## dualScale.js
var margin = { top: 20, left: 50, bottom: 50, right: 50 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("class", "svg")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

d3.tsv("data.tsv", d => {
  d.money = +d.money;
  return d;
}).then(data => {
  var xScale = d3
    .scaleBand()
    .domain(data.map(d => d.year))
    .range([0, width])
    .padding(0.07);

  var leftYScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, d => d.number)])
    .range([height, 0]);

  var rightYScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, d => d.money)])
    .range([height, 0]);

  var xAxis = svg
    .append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(xScale));

  // adding axis label
  xAxis
    .append("text")
    .attr("transform", `translate(${width / 2}, ${height + margin.top + 20})`)
    .style("text-anchor", "middle")
    .text("Year");

  var leftYAxis = svg
    .append("g")
    .attr("transform", "translate(0,0)")
    .call(d3.axisLeft(leftYScale));

  // adding left axis label
  leftYAxis
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - height / 2)
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Number");

  var rightYAxis = svg
    .append("g")
    .attr("transform", `translate(${width}, 0)`)
    .call(d3.axisRight(rightYScale));

  var bars = svg
    .selectAll("bar")
    .data(data)
    .enter();

  bars
    .append("rect")
    .attr("class", "bar1")
    .attr("x", d => xScale(d.year))
    .attr("y", d => leftYScale(d.number))
    .attr("width", xScale.bandwidth() / 2)
    .attr("height", d => height - leftYScale(d.number));

  var tooltip = d3
    .select("body")
    .append("div")
    .attr("class", "tooltip");

  tooltip.append("div").attr("class", "yearTooltip");
  tooltip.append("div").attr("class", "numberTooltip");

  function barHover(d, i) {
    if (!d.year) return null;

    tooltip.select(".yearTooltip").html(`<b>${d.year}</b>`);
    tooltip.select(".numberTooltip").html(d.number);

    tooltip.style("display", "block");
    tooltip.style("opacity", 5);
  }

  var event = svg
    .selectAll("bar1")
    .on("mouseover", barHover)
    .on("mousemove", function(d) {
      if (!d.month) return null;

      tooltip
        .style("top", d3.event.pageY + 10 + "px")
        .style("left", d3.event.pageX - 25 + "px");
    })
    .on("mouseout", () => {
      if (!d.year) return null;
      tooltip.style("display", "none");
      tooltip.style("opacity", 0);
    });


  bars
    .append("rect")
    .attr("class", "bar2")
    .attr("x", d => xScale(d.year) + xScale.bandwidth() / 2)
    .attr("y", d => rightYScale(d.money))
    .attr("width", xScale.bandwidth() / 2)
    .attr("height", d => height - rightYScale(d.money));
});


## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>d3 play ground</title>
  <link rel='stylesheet' href='dualScale.css'>
  <script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
  <script src="dualScale.js"></script>
</body>
</html>
year	money	number
2005	550	35
2006	600	40
2007	700	45
2008	800	60
2009	900	70
2010	850	65
2011	880	67
2012	900	70
2013	1000	75
	.bar1 {
	fill: steelblue;
	}

	.bar2 {
	fill: orange;
	}


	.tooltip {
	background: #eee;
	box-shadow: 0 0 5px #999999;
	color: #333;
	font-size: 12px;
	left: 130px;
	padding: 10px;
	position: absolute;
	text-align: center;
	top: 95px;
	z-index: 10;
	display: block;
	opacity: 0;
	}
	var margin = { top: 20, left: 50, bottom: 50, right: 50 };
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("class", "svg")
	.attr("transform", `translate(${margin.left}, ${margin.top})`);

	d3.tsv("data.tsv", d => {
	d.money = +d.money;
	return d;
	}).then(data => {
	var xScale = d3
	.scaleBand()
	.domain(data.map(d => d.year))
	.range([0, width])
	.padding(0.07);

	var leftYScale = d3
	.scaleLinear()
	.domain([0, d3.max(data, d => d.number)])
	.range([height, 0]);

	var rightYScale = d3
	.scaleLinear()
	.domain([0, d3.max(data, d => d.money)])
	.range([height, 0]);

	var xAxis = svg
	.append("g")
	.attr("transform", `translate(0, ${height})`)
	.call(d3.axisBottom(xScale));

	// adding axis label
	xAxis
	.append("text")
	.attr("transform", `translate(${width / 2}, ${height + margin.top + 20})`)
	.style("text-anchor", "middle")
	.text("Year");

	var leftYAxis = svg
	.append("g")
	.attr("transform", "translate(0,0)")
	.call(d3.axisLeft(leftYScale));

	// adding left axis label
	leftYAxis
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x", 0 - height / 2)
	.attr("dy", "1em")
	.style("text-anchor", "middle")
	.text("Number");

	var rightYAxis = svg
	.append("g")
	.attr("transform", `translate(${width}, 0)`)
	.call(d3.axisRight(rightYScale));

	var bars = svg
	.selectAll("bar")
	.data(data)
	.enter();

	bars
	.append("rect")
	.attr("class", "bar1")
	.attr("x", d => xScale(d.year))
	.attr("y", d => leftYScale(d.number))
	.attr("width", xScale.bandwidth() / 2)
	.attr("height", d => height - leftYScale(d.number));

	var tooltip = d3
	.select("body")
	.append("div")
	.attr("class", "tooltip");

	tooltip.append("div").attr("class", "yearTooltip");
	tooltip.append("div").attr("class", "numberTooltip");

	function barHover(d, i) {
	if (!d.year) return null;

	tooltip.select(".yearTooltip").html(`<b>${d.year}</b>`);
	tooltip.select(".numberTooltip").html(d.number);

	tooltip.style("display", "block");
	tooltip.style("opacity", 5);
	}

	var event = svg
	.selectAll("bar1")
	.on("mouseover", barHover)
	.on("mousemove", function(d) {
	if (!d.month) return null;

	tooltip
	.style("top", d3.event.pageY + 10 + "px")
	.style("left", d3.event.pageX - 25 + "px");
	})
	.on("mouseout", () => {
	if (!d.year) return null;
	tooltip.style("display", "none");
	tooltip.style("opacity", 0);
	});


	bars
	.append("rect")
	.attr("class", "bar2")
	.attr("x", d => xScale(d.year) + xScale.bandwidth() / 2)
	.attr("y", d => rightYScale(d.money))
	.attr("width", xScale.bandwidth() / 2)
	.attr("height", d => height - rightYScale(d.money));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>d3 play ground</title>
	<link rel='stylesheet' href='dualScale.css'>
	<script src="https://d3js.org/d3.v5.js"></script>
	</head>
	<body>
	<script src="dualScale.js"></script>
	</body>
	</html>