pg1647/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DV1 - Lab : Task 4</title>
  <script src="https://raw.githack.com/hvo/datasets/master/us-refugees.js
               " type="text/javascript">
  </script>
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<style id="jsbin-css">
.bar {
  fill: SteelBlue;
  stroke: Black;
}

#title {
  stroke: Cyan;
  fill: blue;
}
</style>
</head>
<body>
<div id="chart"></div>
<script id="jsbin-javascript">
var count =[
  refugees[0]['Year'],
  Object.entries(refugees[0])
   .filter(item => (item[0]!='Year'))
   .reduce((total, item) => (total+item[1]), 0)
  ]; // can use .reserve()

console.log(count);

var counts = refugees.map(obj => ([
  obj['Year'],
  Object.entries(obj)
    .filter(item => (item[0]!= 'Year'))
    .reduce((total, item) => (total+item[1]), 0)

  ]));

let years = counts.map(d => d[0]),
    total = counts.map(d => d[1]),
    traces = [{
      x: total,
      y: years,
      orientation: 'h',
      type: 'bar',
      marker: {
        color: 'LightGray',
        line: {
          color: 'black',
          width: 0.5,
        },
      },
    }];
    layout = {
      title: 'Refugees',
      width: 400,
      height: 1000,
      xaxis: {
        title: 'Number of Refugees',
      },
      yaxis: {
        title: 'Year',
        type: 'category', // to treat year as category
        autorange: 'reversed', //to show the earliest year on top
        ticks: 'outside',
      },
    };

    chart = document.getElementById('chart');


Plotly.newPlot(chart, traces, layout);

chart.on('plotly_hover', event => {
  console.log(event)
  // In order to change color, we need to update all
  // item colors, and give the specific one a different color
  let index = event.points[0].pointIndex, //index of the data element
      colors = counts.map((d,i) => ((i == index)?'SteelBlue':'LightGray')),
      update = {
        'marker.color':[colors], // update per trace, thus, a list of one
      };
  Plotly.restyle(chart,update);
});

chart.on('plotly_unhover', event => {
  Plotly.restyle(chart,{'marker.color':['LightGray']});
});
</script>


<script id="jsbin-source-css" type="text/css">.bar {
  fill: SteelBlue;
  stroke: Black;
}

#title {
  stroke: Cyan;
  fill: blue;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var count =[
  refugees[0]['Year'],
  Object.entries(refugees[0])
   .filter(item => (item[0]!='Year'))
   .reduce((total, item) => (total+item[1]), 0)
  ]; // can use .reserve()

console.log(count);

var counts = refugees.map(obj => ([
  obj['Year'],
  Object.entries(obj)
    .filter(item => (item[0]!= 'Year'))
    .reduce((total, item) => (total+item[1]), 0)

  ]));

let years = counts.map(d => d[0]),
    total = counts.map(d => d[1]),
    traces = [{
      x: total,
      y: years,
      orientation: 'h',
      type: 'bar',
      marker: {
        color: 'LightGray',
        line: {
          color: 'black',
          width: 0.5,
        },
      },
    }];
    layout = {
      title: 'Refugees',
      width: 400,
      height: 1000,
      xaxis: {
        title: 'Number of Refugees',
      },
      yaxis: {
        title: 'Year',
        type: 'category', // to treat year as category
        autorange: 'reversed', //to show the earliest year on top
        ticks: 'outside',
      },
    };

    chart = document.getElementById('chart');


Plotly.newPlot(chart, traces, layout);

chart.on('plotly_hover', event => {
  console.log(event)
  // In order to change color, we need to update all
  // item colors, and give the specific one a different color
  let index = event.points[0].pointIndex, //index of the data element
      colors = counts.map((d,i) => ((i == index)?'SteelBlue':'LightGray')),
      update = {
        'marker.color':[colors], // update per trace, thus, a list of one
      };
  Plotly.restyle(chart,update);
});

chart.on('plotly_unhover', event => {
  Plotly.restyle(chart,{'marker.color':['LightGray']});
});


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

## jsbin.cunawaw.css
.bar {
  fill: SteelBlue;
  stroke: Black;
}

#title {
  stroke: Cyan;
  fill: blue;
}

## jsbin.cunawaw.js
var count =[
  refugees[0]['Year'],
  Object.entries(refugees[0])
   .filter(item => (item[0]!='Year'))
   .reduce((total, item) => (total+item[1]), 0)
  ]; // can use .reserve()

console.log(count);

var counts = refugees.map(obj => ([
  obj['Year'],
  Object.entries(obj)
    .filter(item => (item[0]!= 'Year'))
    .reduce((total, item) => (total+item[1]), 0)

  ]));

let years = counts.map(d => d[0]),
    total = counts.map(d => d[1]),
    traces = [{
      x: total,
      y: years,
      orientation: 'h',
      type: 'bar',
      marker: {
        color: 'LightGray',
        line: {
          color: 'black',
          width: 0.5,
        },
      },
    }];
    layout = {
      title: 'Refugees',
      width: 400,
      height: 1000,
      xaxis: {
        title: 'Number of Refugees',
      },
      yaxis: {
        title: 'Year',
        type: 'category', // to treat year as category
        autorange: 'reversed', //to show the earliest year on top
        ticks: 'outside',
      },
    };

    chart = document.getElementById('chart');


Plotly.newPlot(chart, traces, layout);

chart.on('plotly_hover', event => {
  console.log(event)
  // In order to change color, we need to update all
  // item colors, and give the specific one a different color
  let index = event.points[0].pointIndex, //index of the data element
      colors = counts.map((d,i) => ((i == index)?'SteelBlue':'LightGray')),
      update = {
        'marker.color':[colors], // update per trace, thus, a list of one
      };
  Plotly.restyle(chart,update);
});

chart.on('plotly_unhover', event => {
  Plotly.restyle(chart,{'marker.color':['LightGray']});
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>DV1 - Lab : Task 4</title>
	<script src="https://raw.githack.com/hvo/datasets/master/us-refugees.js
	" type="text/javascript">
	</script>
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
	<style id="jsbin-css">
	.bar {
	fill: SteelBlue;
	stroke: Black;
	}

	#title {
	stroke: Cyan;
	fill: blue;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script id="jsbin-javascript">
	var count =[
	refugees[0]['Year'],
	Object.entries(refugees[0])
	.filter(item => (item[0]!='Year'))
	.reduce((total, item) => (total+item[1]), 0)
	]; // can use .reserve()

	console.log(count);

	var counts = refugees.map(obj => ([
	obj['Year'],
	Object.entries(obj)
	.filter(item => (item[0]!= 'Year'))
	.reduce((total, item) => (total+item[1]), 0)

	]));

	let years = counts.map(d => d[0]),
	total = counts.map(d => d[1]),
	traces = [{
	x: total,
	y: years,
	orientation: 'h',
	type: 'bar',
	marker: {
	color: 'LightGray',
	line: {
	color: 'black',
	width: 0.5,
	},
	},
	}];
	layout = {
	title: 'Refugees',
	width: 400,
	height: 1000,
	xaxis: {
	title: 'Number of Refugees',
	},
	yaxis: {
	title: 'Year',
	type: 'category', // to treat year as category
	autorange: 'reversed', //to show the earliest year on top
	ticks: 'outside',
	},
	};

	chart = document.getElementById('chart');


	Plotly.newPlot(chart, traces, layout);

	chart.on('plotly_hover', event => {
	console.log(event)
	// In order to change color, we need to update all
	// item colors, and give the specific one a different color
	let index = event.points[0].pointIndex, //index of the data element
	colors = counts.map((d,i) => ((i == index)?'SteelBlue':'LightGray')),
	update = {
	'marker.color':[colors], // update per trace, thus, a list of one
	};
	Plotly.restyle(chart,update);
	});

	chart.on('plotly_unhover', event => {
	Plotly.restyle(chart,{'marker.color':['LightGray']});
	});
	</script>


	<script id="jsbin-source-css" type="text/css">.bar {
	fill: SteelBlue;
	stroke: Black;
	}

	#title {
	stroke: Cyan;
	fill: blue;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var count =[
	refugees[0]['Year'],
	Object.entries(refugees[0])
	.filter(item => (item[0]!='Year'))
	.reduce((total, item) => (total+item[1]), 0)
	]; // can use .reserve()

	console.log(count);

	var counts = refugees.map(obj => ([
	obj['Year'],
	Object.entries(obj)
	.filter(item => (item[0]!= 'Year'))
	.reduce((total, item) => (total+item[1]), 0)

	]));

	let years = counts.map(d => d[0]),
	total = counts.map(d => d[1]),
	traces = [{
	x: total,
	y: years,
	orientation: 'h',
	type: 'bar',
	marker: {
	color: 'LightGray',
	line: {
	color: 'black',
	width: 0.5,
	},
	},
	}];
	layout = {
	title: 'Refugees',
	width: 400,
	height: 1000,
	xaxis: {
	title: 'Number of Refugees',
	},
	yaxis: {
	title: 'Year',
	type: 'category', // to treat year as category
	autorange: 'reversed', //to show the earliest year on top
	ticks: 'outside',
	},
	};

	chart = document.getElementById('chart');


	Plotly.newPlot(chart, traces, layout);

	chart.on('plotly_hover', event => {
	console.log(event)
	// In order to change color, we need to update all
	// item colors, and give the specific one a different color
	let index = event.points[0].pointIndex, //index of the data element
	colors = counts.map((d,i) => ((i == index)?'SteelBlue':'LightGray')),
	update = {
	'marker.color':[colors], // update per trace, thus, a list of one
	};
	Plotly.restyle(chart,update);
	});

	chart.on('plotly_unhover', event => {
	Plotly.restyle(chart,{'marker.color':['LightGray']});
	});






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