Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Last active June 12, 2020 16:25
Show Gist options
  • Save pg1647/24cdb8e9d9708badf51149c1b78b2631 to your computer and use it in GitHub Desktop.
Save pg1647/24cdb8e9d9708badf51149c1b78b2631 to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || Lab 3 Demo 2 - HW1 using Plotly // source https://jsbin.com/cunawaw
Raw
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>
Raw
jsbin.cunawaw.css
.bar {
fill: SteelBlue;
stroke: Black;
}
#title {
stroke: Cyan;
fill: blue;
}
Raw
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']});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment