import { dashboard } from './dashboard.js'; d3.select("#drop-down").on("change", function () { d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); selected = this.value; initializeData(); if(selected == "Histogram" || selected == "Pie" || selected == "Table" || selected == "Bar") { dashboard('#dashboard',freqData, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData[0] )); } else if (selected == "Continuum") { dashboard('#dashboard',freqData2, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData2 )); } else if (selected == "Tukey Box") { dashboard('#dashboard',freqData3, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData3[0] )); } else if (selected == "Cartesian") { dashboard('#dashboard',freqData4, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData4[0] )); } else if (selected == "lineChart" || selected == "areaChart") { dashboard('#dashboard',freqData5, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData5[0] )); } else if (selected == "scatterPlot") { dashboard('#dashboard',freqData6, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData6[0] )); } else if (selected == "Spectrogram") { dashboard('#dashboard','./Spectrogram.ogg', selected); d3.select("div#preview").html( "First row of selected data:
" + "a sound" ); } document.getElementById('chosen').value = ""; }); var rowToHtml = function( row ){ var result = ""; for (let key in row) { result += key + ": " + row[key] + "
" } return result; } var freqData=[]; var freqData2=[]; var freqData3=[]; var freqData4=[]; var freqData5=[]; var freqData6=[]; var initializeData = function(){ freqData=[ {State:'WK-1',freq:40} ,{State:'WK-2',freq:55} ,{State:'WK-3',freq:120} ,{State:'WK-4',freq:39} ,{State:'WK-5',freq:77}]; freqData2=["Stop Police brutality","Officer Presence", "Verbal Commands","Soft Techniques","Hard Techniques","Deadly Force"]; freqData3=[ {"Title": "Revenu per Quarter of 10 Person","Q1": 20000,"Q2": 15000,"Q3": 8000,"Q4": 20000}, {"Title": "","Q1": 9879,"Q2": 9323,"Q3": 3294,"Q4": 5629}, {"Title": "","Q1": 5070,"Q2": 9395,"Q3": 17633,"Q4": 5752}, {"Title": "","Q1": 7343,"Q2": 8675,"Q3": 12121,"Q4": 7557}, {"Title": "","Q1": 9136,"Q2": 5354,"Q3": 4319,"Q4": 5125}, {"Title": "","Q1": 7943,"Q2": 6725,"Q3": 18712,"Q4": 5116}, {"Title": "","Q1": 10546,"Q2": 10899,"Q3": 17270,"Q4": 5828}, {"Title": "","Q1": 9385,"Q2": 9365,"Q3": 13676,"Q4": 6014}, {"Title": "","Q1": 8669,"Q2": 8238,"Q3": 6587,"Q4": 5995}, {"Title": "","Q1": 4000,"Q2": 7446,"Q3": 16754,"Q4": 8905}]; freqData4=[ {"X": 6,"Y": 20}, {"X": -25,"Y": 40}, {"X": -20,"Y": -12}, {"X": 35,"Y": -30}, {"X": 30,"Y": 35}, {"X": -5,"Y": -12}, {"X": 20,"Y": 48}, {"X": 17,"Y": 11}, {"X": 45,"Y": -18}, {"X": -35,"Y": 6}]; freqData5=[ {"month": "1/1/2003","price": "20"}, {"month": "2/1/2004","price": "25"}, {"month": "3/1/2005","price": "33"}, {"month": "4/1/2006","price": "30"}, {"month": "5/1/2007","price": "38"}, {"month": "6/1/2008","price": "49"}, {"month": "7/1/2009","price": "51"}, {"month": "8/1/2010","price": "52"}, {"month": "9/1/2011","price": "54"}]; freqData6=[ {"Manufacturer": "Nabisco","Calories": 70,"Sodium": 130},{"Manufacturer": "Nabisco","Calories": 40,"Sodium": 40}, {"Manufacturer": "Quaker Oats","Calories": 120,"Sodium": 15},{"Manufacturer": "Quaker Oats","Calories": 100,"Sodium": 150}, {"Manufacturer": "Kelloggs","Calories": 70,"Sodium": 260},{"Manufacturer": "Kelloggs","Calories": 60,"Sodium": 60}, {"Manufacturer": "Kelloggs","Calories": 50,"Sodium": 140},{"Manufacturer": "Kelloggs","Calories": 30,"Sodium": 240}, {"Manufacturer": "Ralston Purina","Calories": 110,"Sodium": 200},{"Manufacturer": "Ralston Purina","Calories": 10,"Sodium": 20}, {"Manufacturer": "General Mills","Calories": 110,"Sodium": 180},{"Manufacturer": "General Mills","Calories": 100,"Sodium": 80}, {"Manufacturer": "Kelloggs","Calories": 110,"Sodium": 125},{"Manufacturer": "Kelloggs","Calories": 30,"Sodium": 135}, {"Manufacturer": "General Mills","Calories": 130,"Sodium": 210}]; } initializeData(); let selected = "Continuum"; dashboard('#dashboard',freqData2, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData2 )); d3.select(".selfile") .append("input") .attr("id", "chosen") .attr("type", "file") .attr("accept", ".csv") .attr("name", selected) .on("change", function() { if (selected=="Spectrogram") { var file = d3.event.target.files[0]; if (file) { var reader = new FileReader(); reader.onloadend = function(evt) { var dataUrl = evt.target.result; console.log(dataUrl); d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); dashboard('#dashboard',dataUrl, selected); } reader.readAsDataURL(file); } } else { var file = d3.event.target.files[0]; if (file && file.name==selected+".csv") { var reader = new FileReader(); reader.onloadend = function(evt) { var dataUrl = evt.target.result; //console.log(dataUrl); if(selected == "Histogram" || selected == "Pie" || selected == "Bar") { var data = d3.dsvFormat(",").parse(dataUrl); var titlez = Object.keys(data[0]); data.forEach(function(d){ d[titlez[1]] = +d[titlez[1]]; });//freq string to number d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data[0] )); } else if (selected == "Continuum") { var lines = dataUrl.split("\n"); lines.splice(-1,1); var data = new Array(lines.length); data = lines[1].split(","); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data )); } else if (selected == "Table") { var data = d3.dsvFormat(",").parse(dataUrl); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data[1] )); } else if (selected == "Tukey Box" || selected == "Cartesian" || selected == "lineChart" || selected == "areaChart" || selected == "scatterPlot") { var data = d3.dsvFormat(",").parse(dataUrl); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data[0] )); } console.log(data); d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); dashboard('#dashboard',data, selected); } reader.readAsText(file); } else { document.getElementById('chosen').value = ""; alert("Wrong File!!!"); console.log("Wrong File!!!"); } } });

Table

Rostyslav