1Cr18Ni9/.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.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { border: 1px solid #ccc; }
  </style>
</head>

<body>
  <style>
    svg{
      border: 1px solid #ccc;
    }
  </style>
<div id='container'></div>

<script id='codeExcute'>

var data = [
    {x: 0, y: 100},
    {x: 10, y: 110},
    {x: 20, y: 140},
    {x: 30, y: 130},
    {x: 40, y: 80},
    {x: 50, y: 75},
    {x: 60, y: 120},
    {x: 70, y: 130},
    {x: 80, y: 100},
];

var margin = {top: 60, bottom: 50, left: 40, right: 30}, axisPadding = 0;
var width = 400, height = 300;
var svgWidth = width + margin.left + margin.right,
    svgHeight = height + margin.top + margin.bottom;

var xMax = Math.round(d3.max(data, function(d,i){ return d.x; }) * 1.05);
var yMax = Math.round(d3.max(data, function(d,i){ return d.y; }) * 1.05);

var xScale = d3.scale.linear()
    .domain([0, xMax])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, yMax])
    .range([0, height]);

// create a svg canvas
var svg = d3.select('#container')
    .append('svg')
    .attr({
        width: svgWidth,
        height: svgHeight,
    });


// define gradient pattern
var defs = svg.append('defs')
defs
    .append('linearGradient')
    .attr('id', 'gPattern')
    .html(
    '<stop offset="0%" stop-color="#333" />' +
    '<stop offset="100%" stop-color="#f00" />'
    )
defs
    .append('linearGradient')
    .attr('id', 'gradient')
    .attr({
        "xlink:href": "#gPattern",
        x1: "0%",
        y1: "100%",
        x2: "0%",
        y2: "0%",
    })


// create line graph
var graph = svg.append('g')
    .attr('transform', 'translate(' + [margin.left, height + margin.top] + ')');
var line = d3.svg.area()
    .x(function(d,i){ return xScale(d.x)})
    .y(function(d,i){ return -yScale(d.y)})
    .y0(0);
graph.append('path')
    .attr({
        d: line(data),
        fill: 'url(#gradient)',
        stroke: 'blue',
        'stroke-width': 2
    });

// creat left axis
var leftAxisGroup = svg.append('g')
    .attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')')

var leftAxis = d3.svg.axis()
    .orient('left')
    .tickPadding(5)
    .tickSize(-width - axisPadding, 0)
    .scale(yScale.copy().domain([yMax, 0]));
leftAxisGroup.call(leftAxis)
styleAxis(leftAxisGroup)

// creat y-axis arrow
leftAxisGroup.append('g')
    .attr('class', 'yArrow')
    .attr('transform', 'rotate(-90)')
    .append('path')
    .attr('d', Arrow())
    .attr({
        fill: 'none',
        'stroke-width': 1,
        stroke: 'black',
});


// creat bottom axis
var bottomAxisGroup = svg.append('g')
    .attr('transform', 'translate(' + [margin.left, margin.top + height + axisPadding] + ')');
var bottomAxis = d3.svg.axis()
    .orient('bottom')
    .tickPadding(5)
    .tickSize(-height - axisPadding, 0)
    .scale(xScale);
bottomAxisGroup.call(bottomAxis);
styleAxis(bottomAxisGroup)

// creat x-axis arrow
bottomAxisGroup.append('g')
    .attr('class', 'xArrow')
    .attr('transform', 'translate(' + [width, 0] + ')')
    .append('path')
    .attr('d', Arrow())
    .attr({
        fill: 'none',
        'stroke-width': 1,
        stroke: 'black',
});

svg.append('text')
    .text('Sale Performance')
    .attr({
        x: svgWidth / 2,
        y: margin.top / 2,
        'text-anchor': 'middle',
        'font-size': '20px',
        'font-family': 'sans-serif',
    })


function styleAxis(axis){
    // style path
    axis.select('.domain').attr({
        fill: 'none',
        stroke: '#888',
        'stroke-width': 1
    });
    // style tick
    axis.selectAll('.tick line').attr({
        stroke: '#000',
        'stroke-width': 1,
    })
}

// generate a arrow symbol
function Arrow() {
    var r = width * 0.05, rad = 15 * Math.PI / 180;
    var x1 = 0, y1 = r * Math.sin(rad),
        x2 = r * Math.cos(rad), y2 = 0,
        x3 = 0, y3 = -y1;
    return 'M' + [x1, y1, x2, y2, x3, y3] + 'Z';
}

</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { border: 1px solid #ccc; }
	</style>
	</head>

	<body>
	<style>
	svg{
	border: 1px solid #ccc;
	}
	</style>
	<div id='container'></div>

	<script id='codeExcute'>

	var data = [
	{x: 0, y: 100},
	{x: 10, y: 110},
	{x: 20, y: 140},
	{x: 30, y: 130},
	{x: 40, y: 80},
	{x: 50, y: 75},
	{x: 60, y: 120},
	{x: 70, y: 130},
	{x: 80, y: 100},
	];

	var margin = {top: 60, bottom: 50, left: 40, right: 30}, axisPadding = 0;
	var width = 400, height = 300;
	var svgWidth = width + margin.left + margin.right,
	svgHeight = height + margin.top + margin.bottom;

	var xMax = Math.round(d3.max(data, function(d,i){ return d.x; }) * 1.05);
	var yMax = Math.round(d3.max(data, function(d,i){ return d.y; }) * 1.05);

	var xScale = d3.scale.linear()
	.domain([0, xMax])
	.range([0, width]);

	var yScale = d3.scale.linear()
	.domain([0, yMax])
	.range([0, height]);

	// create a svg canvas
	var svg = d3.select('#container')
	.append('svg')
	.attr({
	width: svgWidth,
	height: svgHeight,
	});


	// define gradient pattern
	var defs = svg.append('defs')
	defs
	.append('linearGradient')
	.attr('id', 'gPattern')
	.html(
	'<stop offset="0%" stop-color="#333" />' +
	'<stop offset="100%" stop-color="#f00" />'
	)
	defs
	.append('linearGradient')
	.attr('id', 'gradient')
	.attr({
	"xlink:href": "#gPattern",
	x1: "0%",
	y1: "100%",
	x2: "0%",
	y2: "0%",
	})


	// create line graph
	var graph = svg.append('g')
	.attr('transform', 'translate(' + [margin.left, height + margin.top] + ')');
	var line = d3.svg.area()
	.x(function(d,i){ return xScale(d.x)})
	.y(function(d,i){ return -yScale(d.y)})
	.y0(0);
	graph.append('path')
	.attr({
	d: line(data),
	fill: 'url(#gradient)',
	stroke: 'blue',
	'stroke-width': 2
	});

	// creat left axis
	var leftAxisGroup = svg.append('g')
	.attr('transform', 'translate(' + [margin.left - axisPadding, margin.top] + ')')

	var leftAxis = d3.svg.axis()
	.orient('left')
	.tickPadding(5)
	.tickSize(-width - axisPadding, 0)
	.scale(yScale.copy().domain([yMax, 0]));
	leftAxisGroup.call(leftAxis)
	styleAxis(leftAxisGroup)

	// creat y-axis arrow
	leftAxisGroup.append('g')
	.attr('class', 'yArrow')
	.attr('transform', 'rotate(-90)')
	.append('path')
	.attr('d', Arrow())
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black',
	});


	// creat bottom axis
	var bottomAxisGroup = svg.append('g')
	.attr('transform', 'translate(' + [margin.left, margin.top + height + axisPadding] + ')');
	var bottomAxis = d3.svg.axis()
	.orient('bottom')
	.tickPadding(5)
	.tickSize(-height - axisPadding, 0)
	.scale(xScale);
	bottomAxisGroup.call(bottomAxis);
	styleAxis(bottomAxisGroup)

	// creat x-axis arrow
	bottomAxisGroup.append('g')
	.attr('class', 'xArrow')
	.attr('transform', 'translate(' + [width, 0] + ')')
	.append('path')
	.attr('d', Arrow())
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black',
	});

	svg.append('text')
	.text('Sale Performance')
	.attr({
	x: svgWidth / 2,
	y: margin.top / 2,
	'text-anchor': 'middle',
	'font-size': '20px',
	'font-family': 'sans-serif',
	})


	function styleAxis(axis){
	// style path
	axis.select('.domain').attr({
	fill: 'none',
	stroke: '#888',
	'stroke-width': 1
	});
	// style tick
	axis.selectAll('.tick line').attr({
	stroke: '#000',
	'stroke-width': 1,
	})
	}

	// generate a arrow symbol
	function Arrow() {
	var r = width * 0.05, rad = 15 * Math.PI / 180;
	var x1 = 0, y1 = r * Math.sin(rad),
	x2 = r * Math.cos(rad), y2 = 0,
	x3 = 0, y3 = -y1;
	return 'M' + [x1, y1, x2, y2, x3, y3] + 'Z';
	}

	</script>
	</body>