|
|
| Riga 1: |
Riga 1: |
| | = COVID19 - Monitoraggio ed Analisi della situazione italiana= | | = COVID19 - Monitoraggio ed Analisi della situazione italiana= |
| | <absHTML> | | <absHTML> |
| − | <div class="showcase__section" id="bubble"> | + | <div id="tester" style="width:600px;height:250px;"></div> |
| − | <div class="spacer --small"></div>
| |
| − | <div id="bubbleplots">
| |
| − | <div class="bubbleplot" data-num="0">
| |
| − | <div class="plot" id="plotdiv"></div>
| |
| − | <div class="control-row">
| |
| − | Country: <select class="countrydata">
| |
| − | </select>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div> | |
| | | | |
| | <script> | | <script> |
| − | Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){
| + | var trace1 = { |
| | + | x:['2020-10-04', '2021-11-04', '2023-12-04'], |
| | + | y: [90, 40, 60], |
| | + | type: 'scatter' |
| | + | }; |
| | | | |
| − | function unpack(rows, key) {
| + | var data = [trace1]; |
| − | return rows.map(function(row) { return row[key]; });
| |
| − | }
| |
| | | | |
| − | var allCountryNames = unpack(rows, 'country'), | + | var layout = { |
| − | allYear = unpack(rows, 'year'),
| + | title: 'Scroll and Zoom', |
| − | allGdp = unpack(rows, 'gdpPercap'),
| + | showlegend: false |
| − | listofCountries = [],
| |
| − | currentCountry,
| |
| − | currentGdp = [],
| |
| − | currentYear = [];
| |
| − | | |
| − | for (var i = 0; i < allCountryNames.length; i++ ){
| |
| − | if (listofCountries.indexOf(allCountryNames[i]) === -1 ){ | |
| − | listofCountries.push(allCountryNames[i]);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function getCountryData(chosenCountry) {
| |
| − | currentGdp = [];
| |
| − | currentYear = [];
| |
| − | for (var i = 0 ; i < allCountryNames.length ; i++){
| |
| − | if ( allCountryNames[i] === chosenCountry ) {
| |
| − | currentGdp.push(allGdp[i]);
| |
| − | currentYear.push(allYear[i]);
| |
| − | }
| |
| − | }
| |
| − | };
| |
| − | | |
| − | // Default Country Data
| |
| − | setBubblePlot('Afghanistan');
| |
| − |
| |
| − | function setBubblePlot(chosenCountry) {
| |
| − | getCountryData(chosenCountry);
| |
| − | | |
| − | var trace1 = {
| |
| − | x: currentYear,
| |
| − | y: currentGdp,
| |
| − | mode: 'lines+markers',
| |
| − | marker: {
| |
| − | size: 12,
| |
| − | opacity: 0.5
| |
| − | }
| |
| − | };
| |
| − | | |
| − | var data = [trace1];
| |
| − | | |
| − | var layout = {
| |
| − | title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP'
| |
| − | };
| |
| − | | |
| − | Plotly.newPlot('plotdiv', data, layout, {showSendToCloud: true}); | |
| | }; | | }; |
| − |
| |
| − | var innerContainer = document.querySelector('[data-num="0"'),
| |
| − | plotEl = innerContainer.querySelector('.plot'),
| |
| − | countrySelector = innerContainer.querySelector('.countrydata');
| |
| − |
| |
| − | function assignOptions(textArray, selector) {
| |
| − | for (var i = 0; i < textArray.length; i++) {
| |
| − | var currentOption = document.createElement('option');
| |
| − | currentOption.text = textArray[i];
| |
| − | selector.appendChild(currentOption);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | assignOptions(listofCountries, countrySelector);
| |
| | | | |
| − | function updateCountry(){
| + | Plotly.newPlot('myDiv', data, layout, {scrollZoom: true}); |
| − | setBubblePlot(countrySelector.value);
| |
| − | }
| |
| − |
| |
| − | countrySelector.addEventListener('change', updateCountry, false);
| |
| − | }); | |
| | </script> | | </script> |
| | | | |
| | </absHTML> | | </absHTML> |
