This is a PoC exercise showing that you can use D3/CSS to layout and style arrays of data to look like columns of data, similar to a spreadsheet. This would be useful if you had potentially long(vertical) lists of data that the user can modify.
You can add and delete values to each column of data.
Try it on bl.ocks.org
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>D3 Table-like Layout</title> | |
| <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script> | |
| <style type='text/css'> | |
| body { | |
| padding: 25px; | |
| } | |
| #viz { | |
| position: relative; | |
| } | |
| .header { | |
| background-color: lightgrey; | |
| width: 300px; | |
| height: 30px; | |
| position: relative; | |
| border-bottom: 2px solid black; | |
| } | |
| .header-cell { | |
| position: absolute; | |
| } | |
| .column { | |
| position: absolute; | |
| } | |
| .cell { | |
| width: 90px; | |
| height: 30px; | |
| padding: 0 5px; | |
| text-align: center; | |
| line-height: 30px; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| cursor: pointer; | |
| position: absolute; | |
| } | |
| .remove { | |
| pointer-events: none; | |
| background-color: lightgrey; | |
| color: red; | |
| border: 1px solid red; | |
| font-size: 0.8em; | |
| position: absolute; | |
| top: 8px; | |
| left: 89px; | |
| height: 11px; | |
| line-height: 1em; | |
| } | |
| .clear { | |
| clear: both; | |
| } | |
| .footer { | |
| width: 300px; | |
| height: 30px; | |
| position: relative; | |
| border-top: 1px solid black; | |
| } | |
| .footer-cell { | |
| width: 100px; | |
| position: absolute; | |
| } | |
| input[type="text"] { | |
| width: 90px; | |
| } | |
| </style> | |
| <script type='text/javascript'> | |
| window.onload = function () { | |
| var dataset = [ | |
| ['Adam Ant', 'Betty Boop', 'Colin Powell','Dudley Doright', 'Emril Legassie', 'Frank Zappa'], | |
| ['Guianna', 'Hanoi', 'Iran','Japan', 'Kalamazoo', 'London'], | |
| ['Royal Moroccan Air Force', 'Nigerian Air Force', 'Royal Air Force of Oman','Pakistan Air Force', 'Qatar Emiri Air Force', 'Royal Moroccan Air Force'] | |
| ]; | |
| draw = function () { | |
| var cols = d3.select("#viz").selectAll("div.column") | |
| .data(dataset); | |
| cols.enter().append("div") | |
| .attr("class","column") | |
| .style("left", function (d,i) { | |
| return i*100 + "px"; | |
| }); | |
| var cells = cols.selectAll("div.cell") | |
| .data(function (d) { | |
| return d; | |
| }); | |
| cells.enter().append("div").attr("class", "cell") | |
| .on("mouseover", function () { | |
| d3.select(this) | |
| .style("background-color", "lightgrey") | |
| .append('span').attr('class', 'remove').text('X'); | |
| }) | |
| .on("mouseout", function () { | |
| d3.select(this) | |
| .style("background-color", "white") | |
| .select(".remove").remove(); | |
| }) | |
| .on("click", function (d, r, c) { | |
| dataset[c].splice(r, 1); | |
| draw(); | |
| }); | |
| cells | |
| .attr("title", function (d) { | |
| return d; | |
| }) | |
| .text(function (d) { | |
| return d; | |
| }) | |
| .style("top", function (d,i) { | |
| return i*30 + "px"; | |
| }); | |
| cells.exit().remove(); | |
| d3.select('.footer').style('top', function () { | |
| var columnMatrix = d3.selectAll('div.column').selectAll('div.cell'); | |
| var index = 0; | |
| for (var i=1; i < columnMatrix.length; i++) { | |
| if (columnMatrix[i].length > columnMatrix[index].length) { | |
| index = i; | |
| } | |
| } | |
| return columnMatrix[index].length*30+'px'; | |
| }); | |
| }; | |
| addVal = function (e) { | |
| if (e.keyCode === 13 && e.target.value != '') { | |
| switch(e.target.id) { | |
| case 'ppl': | |
| dataset[0].push(e.target.value); | |
| break; | |
| case 'loc': | |
| dataset[1].push(e.target.value); | |
| break; | |
| case 'org': | |
| dataset[2].push(e.target.value); | |
| } | |
| e.target.value = ''; | |
| draw(); | |
| } | |
| } | |
| draw(); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="header-cell" style="left:27px; top:6px">People</div> | |
| <div class="header-cell" style="left:119px; top:6px">Locations</div> | |
| <div class="header-cell" style="left:204px; top:6px">Organizations</div> | |
| </div> | |
| <div id="viz"></div> | |
| <div class="clear"></div> | |
| <div class="footer"> | |
| <div class="footer-cell" style="left:2px; top:2px"><input id="ppl" type="text" onkeyup="addVal(event)"/></div> | |
| <div class="footer-cell" style="left:102px; top:2px"><input id="loc" type="text" onkeyup="addVal(event)"/></div> | |
| <div class="footer-cell" style="left:202px; top:2px"><input id="org" type="text" onkeyup="addVal(event)"/></div> | |
| </div> | |
| </body> | |
| </html> |