itzikbenh/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:10;position:fixed;top:0;right:0;bottom:0;left:0; }

    body {
  width: 100%;
}
svg {
  width: 600px;
  height: 400px;
  outline: 2px dashed red;
  overflow: visible;
}

div.tooltip {
  position: absolute;
  max-width: 200px;
  height: auto;
  padding: 5px;
  background-color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  font-family: sans-serif;
  font-size:12px;
}

    #chart {
  width: 100vw;
  height: 100vh;
}
  </style>
</head>

<body>
  <svg id="chart" width="600" height="400"
    viewBox="0 0 600 400"
    preserveAspectRatio="xMidYMid meet">
  </svg>

  <script>
let height = 400,
    width = 600,
    margin = {top: 20, right: 20, bottom: 70, left: 40};

const svg = d3.select('svg')
.append("g")
.attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

const bottomLabels = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"];

const data = [
  {year: '2010', amount: 137390000},
  {year: '2011', amount: 259481640},
  {year: '2012', amount: 855045568},
  {year: '2013', amount: 2330654149},
  {year: '2014', amount: 1407867119},
  {year: '2015', amount: 3713347324},
  {year: '2016', amount: 3596586480},
  {year: '2017', amount: 6989203462},
  {year: '2018', amount: 2449381741},
];

data.forEach(d => {
  d.year = d3.timeParse("%Y")(d.year);
  d.year = new Date(d.year)
});

const xExtent = d3.extent(data, d => d.year);

const xScale = d3.scaleBand()
  .domain(bottomLabels)
  .paddingInner(.2)
  .range([0, width - margin.left - margin.right]);

const yExtent = d3.extent(data, d => d.amount);
let yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.amount)])
    .range([height - margin.top - margin.bottom, 0]);

const formatValue = d3.format(".1s");

const yAxis = d3.axisLeft()
    .tickFormat(d => formatValue(d).replace(/G/,"B"))
    .scale(yScale);

const xAxis = d3.axisBottom()
    .scale(xScale);

let tooltip = d3.select('body')
    .append('div')
    .attr("class", "tooltip")
    .style('opacity', 0);

const myChart = svg.selectAll('rect').data(data)
    .enter().append('rect')
        .attr('fill', 'rgba(125, 224, 230, .5)')
        .attr('width', d => xScale.bandwidth())
        .attr('height', 0)
        .attr('x', (d, i) => xScale(d.year.getFullYear()))
        .attr('y', height - margin.top - margin.bottom)

        .on('mouseover', function (d) {
            tooltip.transition().duration(200)
                .style('opacity', .9);

            tooltip.html('$' + Number(d.amount).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
                .style('left', (d3.event.pageX - 35) + 'px')
                .style('top', (d3.event.pageY - 30) + 'px');

            tempColor = this.style.fill;
            d3.select(this)
                .transition()
                .style('fill', 'yellow')
        })
        .on('mouseout', function (d) {
            tooltip.transition().duration(200)
                .style('opacity', 0);

            d3.select(this)
                .transition()
                .style('fill', tempColor)
        });

svg.append('g')
    .attr('transform', 'translate(' + [0, 0] + ')')
    .call(yAxis)
 .append('g')
   //.attr('transform', 'translate(' + [0, height - margin.bottom] + ')')
    .attr('transform', "translate(0," + 310 + ")")
   .call(xAxis);

myChart.transition()
    .attr('height', (d, i) => (height - margin.top - margin.bottom) - yScale(d.amount))
    .attr('y', (d, i) => yScale(d.amount))
    .delay((d, i) => i * 20)
    .duration(500);


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:10;position:fixed;top:0;right:0;bottom:0;left:0; }

	body {
	width: 100%;
	}
	svg {
	width: 600px;
	height: 400px;
	outline: 2px dashed red;
	overflow: visible;
	}

	div.tooltip {
	position: absolute;
	max-width: 200px;
	height: auto;
	padding: 5px;
	background-color: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	font-family: sans-serif;
	font-size:12px;
	}

	#chart {
	width: 100vw;
	height: 100vh;
	}
	</style>
	</head>

	<body>
	<svg id="chart" width="600" height="400"
	viewBox="0 0 600 400"
	preserveAspectRatio="xMidYMid meet">
	</svg>

	<script>
	let height = 400,
	width = 600,
	margin = {top: 20, right: 20, bottom: 70, left: 40};

	const svg = d3.select('svg')
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	const bottomLabels = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"];

	const data = [
	{year: '2010', amount: 137390000},
	{year: '2011', amount: 259481640},
	{year: '2012', amount: 855045568},
	{year: '2013', amount: 2330654149},
	{year: '2014', amount: 1407867119},
	{year: '2015', amount: 3713347324},
	{year: '2016', amount: 3596586480},
	{year: '2017', amount: 6989203462},
	{year: '2018', amount: 2449381741},
	];

	data.forEach(d => {
	d.year = d3.timeParse("%Y")(d.year);
	d.year = new Date(d.year)
	});

	const xExtent = d3.extent(data, d => d.year);

	const xScale = d3.scaleBand()
	.domain(bottomLabels)
	.paddingInner(.2)
	.range([0, width - margin.left - margin.right]);

	const yExtent = d3.extent(data, d => d.amount);
	let yScale = d3.scaleLinear()
	.domain([0, d3.max(data, d => d.amount)])
	.range([height - margin.top - margin.bottom, 0]);

	const formatValue = d3.format(".1s");

	const yAxis = d3.axisLeft()
	.tickFormat(d => formatValue(d).replace(/G/,"B"))
	.scale(yScale);

	const xAxis = d3.axisBottom()
	.scale(xScale);

	let tooltip = d3.select('body')
	.append('div')
	.attr("class", "tooltip")
	.style('opacity', 0);

	const myChart = svg.selectAll('rect').data(data)
	.enter().append('rect')
	.attr('fill', 'rgba(125, 224, 230, .5)')
	.attr('width', d => xScale.bandwidth())
	.attr('height', 0)
	.attr('x', (d, i) => xScale(d.year.getFullYear()))
	.attr('y', height - margin.top - margin.bottom)

	.on('mouseover', function (d) {
	tooltip.transition().duration(200)
	.style('opacity', .9);

	tooltip.html('$' + Number(d.amount).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
	.style('left', (d3.event.pageX - 35) + 'px')
	.style('top', (d3.event.pageY - 30) + 'px');

	tempColor = this.style.fill;
	d3.select(this)
	.transition()
	.style('fill', 'yellow')
	})
	.on('mouseout', function (d) {
	tooltip.transition().duration(200)
	.style('opacity', 0);

	d3.select(this)
	.transition()
	.style('fill', tempColor)
	});

	svg.append('g')
	.attr('transform', 'translate(' + [0, 0] + ')')
	.call(yAxis)
	.append('g')
	//.attr('transform', 'translate(' + [0, height - margin.bottom] + ')')
	.attr('transform', "translate(0," + 310 + ")")
	.call(xAxis);

	myChart.transition()
	.attr('height', (d, i) => (height - margin.top - margin.bottom) - yScale(d.amount))
	.attr('y', (d, i) => yScale(d.amount))
	.delay((d, i) => i * 20)
	.duration(500);



	</script>
	</body>