Published
Edited
Dec 23, 2021
Importers
Object.keys(jsonData[0].properties.language.en) // column names
jsonDataURL = d3.json("https://stage.data.ontario.ca/dataset/a7aa56cf-eb63-4746-9852-3a88806ccfde/resource/48aa983a-e9b4-4c7a-b699-15ddd42d3248/download/data.json")
jsonData = FileAttachment("flu_shot_clinics.json").json()
// https://observablehq.com/@triptych/google-fonts-in-observable
fontName = "Open Sans"; // "Fontdiner Swanky"
<!-- Styles for Google Chart Table -->
<style>
@import url('https://fonts.googleapis.com/css2?family=${fontName}&display=swap');
th, td {
font-family: '${fontName}', sans-serif;
}
.table-header {
background-color: none;
font-size: .9rem;
line-height: 1.5;
}
.table-header th {
padding: 22px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.table-header td {
font-size: .9rem;
font-weight: 400;
}
</style>
// Reorganize Flu Shot Clinics JSON file into format required by Google Table
function prepareJSON(jsonData) {
let o = {};
o["cols"] = [];
o["rows"] = [];
// Construct the column part of the object
const cols = Object.keys(jsonData[0].properties.language.en);
cols.forEach((d, idx) => {
o["cols"][idx] = {id: '', label: d, pattern: '', type: 'string'}
});
// Construct the row part of the object
jsonData.forEach((d, idx) => {
let dataRow = d.properties.language.en;
let thisRow = {};
thisRow = {"c": []};
cols.forEach(function(col) {
thisRow["c"].push( {"v": dataRow[col],"f": null} );
})
o["rows"].push(thisRow);
});
return o;
}
prepareJSON(jsonData)
// Draw Basic Table function
dtTbl = {
const cssClassNames = {
'headerRow': 'table-header',
'tableRow': 'table-header-cells',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
//'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'
};
const datatable = html`<div id="table_div"></div>`;
datatable.style.width = '100%';
datatable.style.height = 800;
yield datatable;
google.charts.load("current", { packages: ["table"] });
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
// Format jsonData object for Google Tables
const o = prepareJSON(jsonData);
// Create data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(o);
const options = {
width: '100%',
height: '100%',
'showRowNumber': false,
'allowHtml': true,
'cssClassNames': cssClassNames
};
const table = new google.visualization.Table(datatable);
table.draw(data, options);
}
}
<!-- Use CSS to define width of column 6 -->
<style>
#table_custdiv .column6 {
width: 250px;
}
</style>
// Draw Table function for Customized Table
dtTblCust = {
const cssClassNames = {
'headerRow': 'table-header',
'tableRow': 'table-header-cells',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
//'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'
};
const datatable = html`<div id="table_custdiv"></div>`;
datatable.style.width = '100%';
datatable.style.height = 800;
yield datatable;
google.charts.load("current", { packages: ["table"] });
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
// Format jsonData object for Google Tables
const o = prepareJSON(jsonData);
// Create data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(o);
var viewColumns = [];
for (var i = 0; i < data.getNumberOfColumns(); i++) {
viewColumns.push(i);
}
// next, setup columns to be adjusted
// column index 1 = second column
let thisCol = 6
viewColumns[thisCol] = {
calc: function (dataTable, row) {
var columnValue = dataTable.getValue(row, thisCol) || '';
// class name should match definition in CSS
return '<div class="column6">' + columnValue + '<div>';
},
type: 'string',
label: data.getColumnLabel(thisCol)
};
const options = {
width: '100%',
height: '100%',
'showRowNumber': false,
'allowHtml': true,
'cssClassNames': cssClassNames
};
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
let visualization = new google.visualization.Table(document.getElementById('table_custdiv'));
visualization.draw(view, {
allowHtml: true,
'cssClassNames': cssClassNames
});
}
}
d3 = require("d3")
$ = require("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js")
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.
