Блог

         data = [
        {
        "First Name": "James",
        "Last Name": "Matman",
        "Job Title": "Chief Sandwich Eater",
        "Favorite Color": "Lettuce Green",
        "Wars or Trek?": "Trek",
        "Date of Birth": "January 13, 1979",
        "Dream Vacation City": "Gotham City",
        "GPA": "3.1",
        "Arbitrary Data": "RBX-12"
        },
        {
        "First Name": "The",
        "Last Name": "Tick",
        "Job Title": "Crimefighter Sorta",
        "Favorite Color": "Blue",
        "Wars or Trek?": "Wars",
        "Date of Birth": "July 19, 1968",
        "Dream Vacation City": "Athens",
        "GPA": "N/A",
        "Arbitrary Data": "Edlund, Ben (July 1996)."
        },
        {
        "First Name": "Jokey",
        "Last Name": "Smurf",
        "Job Title": "Giving Exploding Presents",
        "Favorite Color": "Smurflow",
        "Wars or Trek?": "Smurf",
        "Date of Birth": "Smurfuary Smurfteenth, 1945",
        "Dream Vacation City": "New Smurf City",
        "GPA": "4.Smurf",
        "Arbitrary Data": "One"
        },
        {
        "First Name": "Cindy",
        "Last Name": "Beyler",
        "Job Title": "Sales Representative",
        "Favorite Color": "Red",
        "Wars or Trek?": "Wars",
        "Date of Birth": "July 5, 1956",
        "Dream Vacation City": "Paris",
        "GPA": "3.4",
        "Arbitrary Data": "3451"
        },
        {
        "First Name": "Captain",
        "Last Name": "Cool",
        "Job Title": "Tree Crusher",
        "Favorite Color": "Blue",
        "Wars or Trek?": "Wars",
        "Date of Birth": "December 13, 1982",
        "Dream Vacation City": "Las Vegas",
        "GPA": "1.9",
        "Arbitrary Data": "Under the couch"
        }
        ]
        
        
        
        var sortAscending = true;
        var table = d3.select('#page-wrap').append('table');
        var titles = d3.keys(data[0]);
        var headers = table.append('thead').append('tr')
        .selectAll('th')
        .data(titles).enter()
        .append('th')
        .text(function (d) {
        return d;
        })
        .on('click', function (d) {
        headers.attr('class', 'header');
        
        if (sortAscending) {
        rows.sort(function (a, b) { return b[d] < a[d]; }); sortAscending=false; this.className='aes' ; } else {
            rows.sort(function (a, b) { return b[d]> a[d]; });
            sortAscending = true;
            this.className = 'des';
            }
        
            });
        
            var rows = table.append('tbody').selectAll('tr')
            .data(data).enter()
            .append('tr');
            rows.selectAll('td')
            .data(function (d) {
            return titles.map(function (k) {
            return { 'value': d[k], 'name': k };
            });
            }).enter()
            .append('td')
            .attr('data-th', function (d) {
            return d.name;
            })
            .text(function (d) {
            return d.value;
            });  

 * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.4 Georgia, Serif;
        }

        #page-wrap {
            margin: 50px;
        }

        p {
            margin: 20px 0;
        }

        /* 
    Generic Styling, for Desktops/Laptops 
    */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Zebra striping */
        tr:nth-of-type(odd) {
            background: #eee;
        }

        th {
            background: #333;
            color: white;
            font-weight: bold;
            cursor: s-resize;
            background-repeat: no-repeat;
            background-position: 3% center;
        }

        td,
        th {
            padding: 6px;
            border: 1px solid #ccc;
            text-align: left;
        }

        th.des:after {
            content: "21E9";
        }

        th.aes:after {
            content: "21E7";
        }

        /* 
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
        @media only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px) {

            /* Force table to not be like tables anymore */
            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
            }

            /* Hide table headers (but not display: none;, for accessibility) */
            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            tr {
                border: 1px solid #ccc;
            }

            td {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }

            td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
        Label the data
        */
            td:before {
                content: attr(data-th) ": ";
                font-weight: bold;
                width: 6.5em;
                display: inline-block;
            }
        }

        /* Smartphones (portrait and landscape) ----------- */
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
            body {
                padding: 0;
                margin: 0;
                width: 320px;
            }
        }

        /* iPads (portrait and landscape) ----------- */
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
            body {
                width: 495px;
            }
        }  

     <div id="page-wrap"></div>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>