xxxxxxxxxx
<html>
<head>
<meta charset="utf-8" />
<script src="./plotly-1.35.2.min.js"></script>
<script src="./plotly-locale-cs.js"></script>
</head>
<body>
<div id="tester" style="width:900px;height:800px;"></div>
Pozn: intervaly jsou jen hrubý odhad na ukázku
<script>
var hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);
var electionData = [
{name:"Zelení", value: 0.0146, color:"#06b15d"},
{name:"Svobodní", value: 0.0156, color:"#009982"},
{name:"STAN", value: 0.0518, color:"#5d8c00"},
{name:"TOP 09", value: 0.0531, color:"#723769"},
{name:"KDU-ČSL", value: 0.0580, color:"#e6ac21"},
{name:"ČSSD", value: 0.0727, color:"#F07D00"},
{name:"KSČM", value: 0.0776, color:"#8c0000"},
{name:"SPD", value: 0.1064, color:"#ea2329"},
{name:"Piráti", value: 0.1079, color:"#000000"},
{name:"ODS", value: 0.1132, color:"#004494"},
{name:"ANO", value: 0.2964, color:"#261060"}
];
var electionDate = '2017-10-21';
var dates = ['2017-12-17', '2018-01-24', '2018-02-15', '2018-03-15'];
var parties = [
{name:"Zelení", data:[0.015, 'nan', 0.1, 0.1], color:"#06b15d"},
{name:"Svobodní", data:[null, 0.015, 0.01, 0.01], color:"#009982"},
{name:"TOP 09", data:[0.045, 0.04, 0.035, 0.045], color:"#723769"},
{name:"STAN", data:[0.04, 0.03, 0.03, 0.045], color:"#5d8c00"},
{name:"KDU-ČSL", data:[0.065, 0.05, 0.035, 0.045], color:"#e6ac21"},
{name:"SPD", data:[0.065, 0.075, 0.065, 0.065], color:"#ea2329"},
{name:"KSČM", data:[0.075, 0.08, 0.1, 0.11], color:"#8c0000"},
{name:"ČSSD", data:[0.1, 0.125, 0.12, 0.11], color:"#F07D00"},
{name:"Piráti", data:[0.115, 0.125, 0.13, 0.125], color:"#000000"},
{name:"ODS", data:[0.115, 0.12, 0.105, 0.125], color:"#004494"},
{name:"ANO", data:[0.355, 0.305, 0.335, 0.305], color:"#261060"}
];
var currentEstimates = [
{name:"Zelení", data:[0.1], color:"#06b15d"},
{name:"Svobodní", data:[0.01], color:"#009982"},
{name:"TOP 09", data:[0.045], color:"#723769"},
{name:"STAN", data:[0.045], color:"#5d8c00"},
{name:"KDU-ČSL", data:[0.045], color:"#e6ac21"},
{name:"SPD", data:[0.065], color:"#ea2329"},
{name:"KSČM", data:[0.11], color:"#8c0000"},
{name:"ČSSD", data:[0.11], color:"#F07D00"},
{name:"Piráti", data:[0.125], color:"#000000"},
{name:"ODS", data:[0.125], color:"#004494"},
{name:"ANO", data:[0.305], color:"#261060"}
]
var elections = electionData.map( obj => {
var d = {
type: 'scatter',
mode: 'markers',
x: [electionDate],
y: [obj.value * 100],
name: "Volby: " + obj.name,
legendgroup: obj.name,
showlegend: false,
marker: {
size: 20,
color: "rgba(" + hex2rgba(obj.color, 1).join(',') + ")",
// border: {
// color: //"rgba(" + hex2rgba(obj.color).join(',') + ")",
// arearatio: 1
// }
}
}
return d
})
var data = parties.map(obj => {
var d = {
mode: 'markers+lines',
type: 'scatter',
// connectgaps: false,
line: {
color: "rgba(" + hex2rgba(obj.color).join(',') + ")",
shape: "spline"
},
textposition: 'top right',
textfont : {
family:'Arial',
size: 30,
color: "rgba(" + hex2rgba(obj.color).join(',') + ")"
}
};
d['legendgroup'] = obj.name;
d['name'] = obj.name;
d['x'] = dates;
d['y'] = obj.data.map( v => v * 100);
d['text'] = ['a','b','c','d'];
return d;
});
var currents = currentEstimates.map(obj => {
var d = {
mode: 'text',
type: 'scatter',
// connectgaps: false,
// line: {
// color: "rgba(" + hex2rgba(obj.color).join(',') + ")",
// shape: "spline"
// },
textposition: 'middle right',
textfont : {
family:'Arial',
size: 16,
// weight: 600,
color: "rgba(" + hex2rgba(obj.color).join(',') + ")"
}
};
d['legendgroup'] = obj.name;
d['name'] = obj.name;
d['x'] = [dates[dates.length -1]];
d['y'] = [obj.data[0] * 100];
d['text'] = " " + Math.round(obj.data[0] * 100) + "%";
return d;
});
var upper = parties.map(obj => {
var d = {
mode: 'lines',
type: 'scatter',
line: {
color: "rgba(" + hex2rgba(obj.color).join(',') + ")",
shape: "spline",
width: 0.01
},
showlegend: false,
hoverinfo: 'skip',
fill: 'tonexty'
};
d['legendgroup'] = obj.name;
d['name'] = obj.name;
d['x'] = dates;
d['y'] = obj.data.map( v => v * 1.15 * 100);
d['fillcolor'] = "rgba(" + hex2rgba(obj.color, 0.15).join(',') + ")";
return d;
});
var lower = parties.map(obj => {
var d = {
mode: 'lines',
type: 'scatter',
line: {
color: "rgba(" + hex2rgba(obj.color).join(',') + ")",
shape: "spline",
width: 0.01
},
showlegend: false,
hoverinfo: 'skip'
};
d['legendgroup'] = obj.name;
d['name'] = obj.name;
d['x'] = dates;
d['y'] = obj.data.map( v => v * 0.85 * 100);
return d;
});
var limit = [{
x: [electionDate, data[0]['x'][data[0]['x'].length - 1]],
y: [5, 5],
name: '5% hranice',
mode: 'lines',
// showlegend: false,
hoverinfo: 'skip',
fill: 'tozeroy',
line: {
color: "red",
dash: 'dot',
width: 3
}
}]
var bounds = [];
for (var i = 0; i < upper.length; i++) {
bounds.push(lower[i]);
bounds.push(upper[i]);
}
data = bounds.concat(data);
data = elections.concat(data);
data = limit.concat(data);
data = currents.concat(data);
var layout = {
xaxis: {
type: 'date',
title: 'Datum průzkumu'
},
yaxis: {
title: 'Volební model',
ticksuffix: '%',
showticksuffix: 'all' // or 'first' or 'all' (the default)
},
title:'Volební modely CVVM',
showlegend: true,
legend: {
traceorder: 'reversed'
},
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0.0,
y: 1.05,
xanchor: 'left',
yanchor: 'top',
text: 'Cool chart',
showarrow: true
}
]
};
// for (var i = 0; i < parties.length; i++) {
// var result = {
// xref: 'paper',
// x: 0.95,
// y: parties[i]['data'][3] * 100,
// xanchor: 'left',
// yanchor: 'middle',
// text: Math.round(parties[i]['data'][3] * 100) + "%",
// showarrow: false,
// legendgroup: parties[i]['name'], // does not work
// font: {
// color: parties[i]['color']
// }
// }
// layout.annotations.push(result)
// }
var config = {
displaylogo: false,
staticPlot: false,
locale: 'cs'
}
TESTER = document.getElementById('tester');
Plotly.plot('tester', data, layout, config);
</script>
</body>
</html>