Social development practitioner. Trying to understand our world.
Columbia Glacier Alaska | Wayback Imagery 2014 - 2020World Bank API - Meet Vega LiteGoogle GanttToggling a Button's Text and Color for Multiple ValuesBootstrap BoilerplateESRI / ArcGIS Layers PreviewCalculate Working Days, Excluding Weekends & HolidaysDynamic Reporting from Dropdown InputsReporting Data Values using JavaScriptQuick Coordinate EstimationD3 Point on Globe with Input SlidersMermaid.jsInteractive Stacked Bar Chart in D3(v4)Point-Along-Path InterpolationData-Driven SVG Faucet with D3 v4Provinces in IndonesiaD3 Real Time Chart with Multiple Data StreamsToggle Data Views in Google MapsLeaflet referencing GeoJSON and In-Line PolygonsDataMapsDataTablesReal-time multi-series time series chart data (D3v3)Learning JavaScript (and Observable) by Converting a FiddleGraphvizCaseload & Budget, 2000 - 2017 as C3.js Dual-Axis Bar and Line ChartImage Re-Size Using Input
Simple HTML Table from JS Array
table1 = {
// Table data -- an array of objects
var jsData = new Array( );
jsData[0] = {location:"Uruguay", year:1930, winner:"Uruguay", winScore:4,
loser:"Argentina", losScore:2};
jsData[1] = {location:"Italy", year:1934, winner:"Italy", winScore:2,
loser:"Czechoslovakia", losScore:1};
jsData[2] = {location:"France", year:1938, winner:"Italy", winScore:4,
loser:"Hungary", losScore:2};
jsData[3] = {location:"Brazil", year:1950, winner:"Uruguay", winScore:2,
loser:"Brazil", losScore:1};
jsData[4] = {location:"Switzerland", year:1954, winner:"West Germany", winScore:3,
loser:"Hungary", losScore:2};
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tr, td;
tbody = matchData.querySelector('tbody');
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData[i].year;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].location;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].winner;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].loser;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData[i].winScore + " - " + jsData[i].losScore;
}
}
drawTable("matchData");
}
matchData_fiddle = html`<table id="cupFinals" border=1 px>
<tbody></tbody>
</table>`
{
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tbody = matchData_fiddle.querySelector('tbody');
var headerNames = Object.getOwnPropertyNames(jsData_as_JSON[0]);
var columnCount = headerNames.length;
//Add the header row.
var row = tbody.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = headerNames[i];
row.appendChild(headerCell);
}
// loop through data source
for (var i = 0; i < jsData_as_JSON.length; i++) {
var tr = document.createElement("tr");
for(var colName in jsData_as_JSON[i]) {
var td = document.createElement("td");
td.innerHTML = jsData_as_JSON[i][colName];
if(colName=="Location")
td.className = "centered";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
drawTable("matchData_fiddle");
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
