JackyLiu97/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
function addElementSVG(parent, name, attrs={}) {
  let SVGNS = "http://www.w3.org/2000/svg";
  let element = document.createElementNS(SVGNS, name);
  for (key in attrs)
    element.setAttributeNS(null, key, attrs[key]);
  parent.appendChild(element);
  return element;
}

var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
  "width": "300",
  "height": "1000",
  "style": "background-color: silver;"
});


var title = addElementSVG(canvas, "text", {
  "x":20,
  "y":20
});

title.textContent = "my chart";

d3.json("https://raw.githack.com/hvo/datasets/master/us-refugees.json")
.then(function(refugees) {
  var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});


/*
var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});
console.log(data)
*/

//var data = new Array(10);

var maxValue = d3.max(data, d=> d[1]);
//data = [...data].map( _ => (Math.random()*100))

data.forEach((d,i) => {
  addElementSVG(canvas, "rect", {
    "x": 60,
    "y": 50+20*i,
    "width": d[1]/maxValue*200,
    "height": 19,
    "fill": "Salmon",
  });
  addElementSVG(canvas,"text", {
    "x": 20,
    "y": 65+20*i,
  }).textContent = d[0];
});

  });
</script>


<script id="jsbin-source-javascript" type="text/javascript">
function addElementSVG(parent, name, attrs={}) {
  let SVGNS = "http://www.w3.org/2000/svg";
  let element = document.createElementNS(SVGNS, name);
  for (key in attrs)
    element.setAttributeNS(null, key, attrs[key]);
  parent.appendChild(element);
  return element;
}

var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
  "width": "300",
  "height": "1000",
  "style": "background-color: silver;"
});


var title = addElementSVG(canvas, "text", {
  "x":20,
  "y":20
});

title.textContent = "my chart";

d3.json("https://raw.githack.com/hvo/datasets/master/us-refugees.json")
.then(function(refugees) {
  var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});


/*
var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});
console.log(data)
*/

//var data = new Array(10);

var maxValue = d3.max(data, d=> d[1]);
//data = [...data].map( _ => (Math.random()*100))

data.forEach((d,i) => {
  addElementSVG(canvas, "rect", {
    "x": 60,
    "y": 50+20*i,
    "width": d[1]/maxValue*200,
    "height": 19,
    "fill": "Salmon",
  });
  addElementSVG(canvas,"text", {
    "x": 20,
    "y": 65+20*i,
  }).textContent = d[0];
});

  });</script></body>
</html>

## jsbin.yimenow.js
function addElementSVG(parent, name, attrs={}) {
  let SVGNS = "http://www.w3.org/2000/svg";
  let element = document.createElementNS(SVGNS, name);
  for (key in attrs)
    element.setAttributeNS(null, key, attrs[key]);
  parent.appendChild(element);
  return element;
}

var chart = document.getElementById("chart");
var canvas = addElementSVG(chart, "svg", {
  "width": "300",
  "height": "1000",
  "style": "background-color: silver;"
});


var title = addElementSVG(canvas, "text", {
  "x":20,
  "y":20
});

title.textContent = "my chart";

d3.json("https://raw.githack.com/hvo/datasets/master/us-refugees.json")
.then(function(refugees) {
  var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});


/*
var data = refugees.map( row => {
  return [row.Year,
          Object.entries(row)
         .filter(item => (item[0] != 'Year'))
         .reduce((total,kv) => (total+ kv[1]),0)]
});
console.log(data)
*/

//var data = new Array(10);

var maxValue = d3.max(data, d=> d[1]);
//data = [...data].map( _ => (Math.random()*100))

data.forEach((d,i) => {
  addElementSVG(canvas, "rect", {
    "x": 60,
    "y": 50+20*i,
    "width": d[1]/maxValue*200,
    "height": 19,
    "fill": "Salmon",
  });
  addElementSVG(canvas,"text", {
    "x": 20,
    "y": 65+20*i,
  }).textContent = d[0];
});

  });
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
	<title>JS Bin</title>
	</head>
	<body>
	<div id="chart"></div>
	<script id="jsbin-javascript">
	function addElementSVG(parent, name, attrs={}) {
	let SVGNS = "http://www.w3.org/2000/svg";
	let element = document.createElementNS(SVGNS, name);
	for (key in attrs)
	element.setAttributeNS(null, key, attrs[key]);
	parent.appendChild(element);
	return element;
	}

	var chart = document.getElementById("chart");
	var canvas = addElementSVG(chart, "svg", {
	"width": "300",
	"height": "1000",
	"style": "background-color: silver;"
	});


	var title = addElementSVG(canvas, "text", {
	"x":20,
	"y":20
	});

	title.textContent = "my chart";

	d3.json("https://raw.githack.com/hvo/datasets/master/us-refugees.json")
	.then(function(refugees) {
	var data = refugees.map( row => {
	return [row.Year,
	Object.entries(row)
	.filter(item => (item[0] != 'Year'))
	.reduce((total,kv) => (total+ kv[1]),0)]
	});


	/*
	var data = refugees.map( row => {
	return [row.Year,
	Object.entries(row)
	.filter(item => (item[0] != 'Year'))
	.reduce((total,kv) => (total+ kv[1]),0)]
	});
	console.log(data)
	*/

	//var data = new Array(10);

	var maxValue = d3.max(data, d=> d[1]);
	//data = [...data].map( _ => (Math.random()*100))

	data.forEach((d,i) => {
	addElementSVG(canvas, "rect", {
	"x": 60,
	"y": 50+20*i,
	"width": d[1]/maxValue*200,
	"height": 19,
	"fill": "Salmon",
	});
	addElementSVG(canvas,"text", {
	"x": 20,
	"y": 65+20*i,
	}).textContent = d[0];
	});

	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">
	function addElementSVG(parent, name, attrs={}) {
	let SVGNS = "http://www.w3.org/2000/svg";
	let element = document.createElementNS(SVGNS, name);
	for (key in attrs)
	element.setAttributeNS(null, key, attrs[key]);
	parent.appendChild(element);
	return element;
	}

	var chart = document.getElementById("chart");
	var canvas = addElementSVG(chart, "svg", {
	"width": "300",
	"height": "1000",
	"style": "background-color: silver;"
	});


	var title = addElementSVG(canvas, "text", {
	"x":20,
	"y":20
	});

	title.textContent = "my chart";

	d3.json("https://raw.githack.com/hvo/datasets/master/us-refugees.json")
	.then(function(refugees) {
	var data = refugees.map( row => {
	return [row.Year,
	Object.entries(row)
	.filter(item => (item[0] != 'Year'))
	.reduce((total,kv) => (total+ kv[1]),0)]
	});


	/*
	var data = refugees.map( row => {
	return [row.Year,
	Object.entries(row)
	.filter(item => (item[0] != 'Year'))
	.reduce((total,kv) => (total+ kv[1]),0)]
	});
	console.log(data)
	*/

	//var data = new Array(10);

	var maxValue = d3.max(data, d=> d[1]);
	//data = [...data].map( _ => (Math.random()*100))

	data.forEach((d,i) => {
	addElementSVG(canvas, "rect", {
	"x": 60,
	"y": 50+20*i,
	"width": d[1]/maxValue*200,
	"height": 19,
	"fill": "Salmon",
	});
	addElementSVG(canvas,"text", {
	"x": 20,
	"y": 65+20*i,
	}).textContent = d[0];
	});

	});</script></body>
	</html>