Skip to content

Instantly share code, notes, and snippets.

@ndobie

ndobie/.block

Last active March 5, 2016 14:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ndobie/336055eed95f62350ec3 to your computer and use it in GitHub Desktop.
Save ndobie/336055eed95f62350ec3 to your computer and use it in GitHub Desktop.
Download ZIP
Building a table with D3
Raw
.block
license: mit
border: no
height: 1580
scrolling: no
Raw
README.md

Automated Table Building (That's mobile compatible)

This is intended to provide a basic backbone for someone trying to create tables from CSV files.
There are many options for doing this, such as specifying the column names in the CSV of have them fixed and specified in the HTML. Styles can be applied and the table can morph into nearly anything.
The most benefit will be derived by people who need to build many identical or similar tables from a VBA script or similar scripting database pull. That's where I came up with this, and implemented it on BBER's website.
As always, feel free to contact me with any questions or suggestions you have, help is always appreciated.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example Table using D3 - Nathan Dobie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta charset="utf-8" />
<style type="text/css">
@import url('//fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic');
body {
font-family: 'Lato', Arial, Helvetica, sans-serif;
font-size: 16px;
}
.source, .prepaired, .update {
font-size: 0.625em;
color: grey;
line-height: 80%;
}
th {
text-align: right;
font-weight: bold;
}
table {
text-align: right;
padding-right: 2px;
margin-right: 3px;
width: 100%;
}
td:nth-child(6) {
margin-right: 8px;
}
td:nth-child(1) {
width: 200px;
}
/*tr:hover {
background-color: lightgrey;
}*/
</style>
</head>
<body>
<div id="table_wrap" style="width=100%; margin-right:5px;">
<h3>Per Capita Personal Income by State</h3>
<table style="width:100%,min-width:400px" margin-right="3px" id="med_inc"></table>
<span class="source"><br /><img src="http://bber.unm.edu/visualizations/gdp/bea_logo_16x67.png" alt="BEA Logo" />&nbsp;U.S. Bureau of Economic Analysis "SA1 Personal Income Summary"</span>
<br /><span class="prepaired">Table prepared by: Nathan Dobie for Bureau of Business and Economic Research, University of New Mexico</span>
<br /><span class="update">Last Revised: 03/05/2016</span>
</div>
<script type="text/javascript">
d3.csv("value.csv", function (data) {
function tabulate(data, columns) {
var table = d3.select("#med_inc")
, columnNames = ["", "", "", "", "", ""]
, thead = table.append("thead")
, tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columnNames)
.enter()
.append("th")
.text(function (columnNames) { return columnNames; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function (row) {
return columns.map(function (column) {
return { column: column, value: row[column] };
});
})
.enter()
.append("td")
.attr("style", "font-family: 'Lato'")
.html(function (d) {
if ($.isNumeric(d.value)) {//jQuery function checks if number is numeric, if it is formats it with thousands seporator
return formatMoney(d.value)
} else {
return d.value;
};
});
return table;
};
tabulate(data, ["c1", "c2", "c3", "c4", "c5", "c6"])//The names of the columns in the CSV file
function formatMoney(n) {
return n.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
};
});
</script>
</body>
</html>
Raw
value.csv
c1 c2 c3 c4 c5 c6
<b>2000</b> <b>2010</b> <b>2014</b> <b>Change 10-14</b> <b>% Change</b>
United States 30602 40277 46049 5772 14.3
Alabama 24649 34073 37512 3439 10.1
Alaska 31481 47773 54012 6239 13.1
Arizona 26553 34185 37895 3710 10.9
Arkansas 22803 31991 37782 5791 18.1
California 33391 42411 49985 7574 17.9
Colorado 34234 41877 48869 6992 16.7
Connecticut 42209 57347 64864 7517 13.1
Delaware 32109 41783 46378 4595 11.0
District of Columbia 43223 63741 69838 6097 9.6
Florida 29597 38718 42737 4019 10.4
Georgia 28693 34487 38980 4493 13.0
Hawaii 28931 41594 46034 4440 10.7
Idaho 25258 32050 36734 4684 14.6
Illinois 32946 42154 47643 5489 13.0
Indiana 28122 34390 39578 5188 15.1
Iowa 27561 38687 44937 6250 16.2
Kansas 28744 39235 44891 5656 14.4
Kentucky 24954 32977 37396 4419 13.4
Louisiana 23570 37227 42030 4803 12.9
Maine 27109 37102 40745 3643 9.8
Maryland 35345 49683 54176 4493 9.0
Massachusetts 38438 51643 58737 7094 13.7
Michigan 30023 35199 40740 5541 15.7
Minnesota 32332 42567 48998 6431 15.1
Mississippi 21582 30783 34431 3648 11.9
Missouri 28015 36638 41639 5001 13.6
Montana 23594 34737 39903 5166 14.9
Nebraska 28978 40023 47557 7534 18.8
Nevada 31230 36918 40742 3824 10.4
New Hampshire 34293 45308 52773 7465 16.5
New Jersey 39165 51202 57620 6418 12.5
New Mexico 23438 33019 37091 4072 12.3
New York 35328 49283 55611 6328 12.8
North Carolina 27876 35569 39171 3602 10.1
North Dakota 25870 42964 55802 12838 29.9
Ohio 28631 36377 42236 5859 16.1
Oklahoma 24801 35949 43637 7688 21.4
Oregon 28878 35791 41220 5429 15.2
Pennsylvania 30493 41918 47679 5761 13.7
Rhode Island 30214 42737 48359 5622 13.2
South Carolina 25143 32853 36677 3824 11.6
South Dakota 27267 40204 45279 5075 12.6
Tennessee 27503 35601 40457 4856 13.6
Texas 28365 38282 45669 7387 19.3
Utah 24781 32614 37664 5050 15.5
Vermont 28556 40066 46428 6362 15.9
Virginia 32465 45412 50345 4933 10.9
Washington 32882 42821 49610 6789 15.9
West Virginia 22110 32104 36132 4028 12.5
Wisconsin 29382 38815 44186 5371 13.8
Wyoming 28959 44846 54584 9738 21.7
&nbsp;
New England 36904 49994 56798 6804 13.6
Mideast 34789 47781 53749 5968 12.5
Great Lakes 30145 37745 43274 5529 14.6
Plains 29138 39488 45665 6177 15.6
Southeast 27393 36504 40792 4288 11.7
Southwest 27389 37057 43699 6642 17.9
Rocky Mountain 29368 37627 43787 6160 16.4
Far West 32767 41751 48775 7024 16.8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment