import { dashboard } from './dashboard.js'; function chosenChart(selected) { 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" ); } else if (selected == "radarChart") { dashboard('#dashboard',freqData7, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData7[0] )); } else if (selected == "Sankey") { dashboard('#dashboard',freqData8, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData8[0] )); } else if (selected == "Map") { dashboard('#dashboard','https://unpkg.com/world-atlas@1.1.4/world/50m.tsv', selected); d3.select("div#preview").html( "First row of selected data:
" + "World Map" ); } else if (selected == "parallelCoor") { dashboard('#dashboard','https://v1.vizhub.com/Joker-tr/datasets/parallelCoor.csv', selected); d3.select("div#preview").html( "First row of selected data:
" + "parallel Coordinates"); } else if (selected == "Sankey") { dashboard('#dashboard',freqData8, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData8[0] )); } else if (selected == "Lens") { dashboard('#dashboard',freqData9, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData9[0] )); } else if (selected == "treeMap") { dashboard('#dashboard',freqData10, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData10[1] )); } else if (selected == "hyperbolicTree") { dashboard('#dashboard',freqData11, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( freqData11[4] )); } else if (selected == "entityRelation") { dashboard('#dashboard',freqData12, selected); d3.select("div#preview").html( "First row of selected data:
" + " Entity User"); } else if (selected == "Tree") { dashboard('#dashboard',freqData13, selected); d3.select("div#preview").html( "First row of selected data:
" + "Json Tree Data"); } else if (selected == "Cycle") { dashboard('#dashboard',freqData14, selected); d3.select("div#preview").html( "First row of selected data:
" + "Json Cycle Data"); } else if (selected == "petriNet") { dashboard('#dashboard',freqData15, selected); d3.select("div#preview").html( "First row of selected data:
" + "Json petriNet Data"); } else if (selected == "timeLine") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "CSV timeLine Data"); } else if (selected == "flowChart") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "flowChart Data"); } else if (selected == "dataFlow") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "dataFlow Data"); } else if (selected == "systemDynamics") { console.log("systemDynamics"); dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "systemDynamics Data"); } else if (selected == "Venn") { dashboard('#dashboard',freqData16, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml(freqData16[0])); } else if (selected == "Clustering") { dashboard('#dashboard',freqData17, selected); d3.select("div#preview").html( "First row of selected data:
" + "Clustering Data"); } else if (selected == "semanticNetwork") { dashboard('#dashboard','semanticNetwork.json', selected); d3.select("div#preview").html( "First row of selected data:
" + "semantic Network Data"); } else if (selected == "Mindmap") { dashboard('#dashboard',freqData18, selected); d3.select("div#preview").html( "First row of selected data:
" + "Mindmap Json Data"); } else if (selected == "layerChart") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "Layer Chart"); } else if (selected == "softSystem") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "soft System Data"); } else if (selected == "squareOfOppositions") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "square Of Oppositions Data"); } else if (selected == "mintoPyramid") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "minto Pyramid Data"); } else if (selected == "synergyMap") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "synergy Map Data"); } else if (selected == "concentricCircles") { dashboard('#dashboard',freqData19, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml(freqData19[0])); } else if (selected == "causeEffectChains") { dashboard('#dashboard',"", selected); d3.select("div#preview").html( "First row of selected data:
" + "cause Effect Chains Data"); } else if (selected == "forceField") { dashboard('#dashboard',freqData20, selected); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml(freqData20[0])); } document.getElementById('chosen').value = ""; } d3.select("#drop-down").on("change", function () { d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); initializeData(); selected = this.value; chosenChart(selected); }); var rowToHtml = function( row ){ var result = ""; for (let key in row) { result += key + ": " + row[key] + "
"; } return result; } 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() { console.log(selected); if (selected == "flowChart" || selected == "dataFlow" || selected == "systemDynamics" || selected == "layerChart" || selected == "softSystem" || selected == "squareOfOppositions" || selected == "mintoPyramid" || selected == "synergyMap" || selected == "causeEffectChains")//NO FILE NEEDED { document.getElementById('chosen').value = ""; alert("No file needed for this chart!"); console.log("No file needed for this chart!"); } else if (selected == "entityRelation" || selected == "Tree" || selected == "Cycle" || selected == "petriNet"|| selected == "Venn" || selected == "Mindmap" || selected == "concentricCircles")//JSON { var file = d3.event.target.files[0]; if (file) { var reader = new FileReader(); reader.onloadend = function(evt) { var dataUrl = evt.target.result; d3.json(dataUrl).then(function(data){ console.log(data); d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); dashboard('#dashboard',data, selected); if (selected == "entityRelation") d3.select("div#preview").html( "First row of selected data:
" + "Entity One"); else if (selected == "Tree") d3.select("div#preview").html( "First row of selected data:
" + "Json Tree Data"); else if (selected == "Cycle") d3.select("div#preview").html( "First row of selected data:
" + "Json Cycle Data"); else if (selected == "Venn") d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data[0] )); }); } reader.readAsDataURL(file); } } else if (selected=="Spectrogram" || selected == "Map" || selected == "parallelCoor" || selected == "timeLine" || selected == "semanticNetwork")//just file tsv mp3 and etc { 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); if (selected == "parallelCoor") { d3.select("div#preview").html( "First row of selected data:
" + "parallel Coordinates"); } } reader.readAsDataURL(file); } } else //csv { 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" || selected == "treeMap") { 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" || selected == "radarChart" || selected == "Sankey" || selected == "Lens" || selected == "hyperbolicTree" || selected == "Clustering") { var data = d3.dsvFormat(",").parse(dataUrl); d3.select("div#preview").html( "First row of selected data:
" + rowToHtml( data[0] )); } else if (selected == "Map") { var data = dataUrl; d3.select("div#preview").html( "First row of selected data:
" + "World Map"); } 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!!!"); } } }); var states; d3.csv('periodicTable.csv').then(function(states){ //console.table(states); states.forEach(function(d){ d.x = +d.x; });// string to number states.forEach(function(d){ d.y = +d.y; });// string to number var svg = d3.select("#periodic"), width = +svg.attr("width"), height = +svg.attr("height"); var gridWidth = d3.max(states, function(d) { return d.x; }) + 1, gridHeight = d3.max(states, function(d) { return d.y; }) + 1, cellSize = 56; var state = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .selectAll(".state") .data(states) .enter().append("g") .attr("class", function(d) { return "state"}) .attr("transform", function(d) { return "translate(" + (d.x - gridWidth / 2) * cellSize + "," + (d.y - gridHeight / 2) * cellSize + ")"; }) .style("fill", function(d) { return d.color; }) .on("mouseover", function(d) { d3.select(event.currentTarget) .style("fill", "white"); div.transition() .duration(200) .style("opacity", .9); div .html(d.fullname) .style("left", (d3.event.pageX + 8) + "px") .style("top", (d3.event.pageY - 35) + "px"); }) .on("mouseout", function(d) { d3.select(event.currentTarget) .style("fill", function(d) { return d.color; }); div.transition() .duration(100) .style("opacity", 0); }) .on("mousedown", function(d) { d3.select(event.currentTarget) .style("fill", "red"); }) .on("mouseup", function(d) { d3.select(event.currentTarget) .style("fill", "white"); }) .on('click', function(d) { d3.selectAll("#dashboard").remove(); d3.select('body').append('div').attr('id', 'dashboard'); initializeData(); selected = d.fullname; chosenChart(d.fullname); console.log(d.fullname); }); // Define the div for the tooltip var div = d3.select("body").append("div") .attr("class", "tooltipu") .style("opacity", 0); state.append("circle") .attr("cx", 1) .attr("cy", 1) .attr("r", 25); state.append("text") .attr("dy", ".55em") .text(function(d) { return d.name; }) .style("opacity", 1) .style("fill","black"); });

Table

Jerfaas