result=table([
{first_name: 'John', last_name: 'Doe'},
{first_name: 'Martin', last_name: 'Smith'}
])
format={return html`
<head>
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
</head>
<style>
:root {
--syntax_normal: #1b1e23;
--syntax_comment: #a9b0bc;
--syntax_number: #20a5ba;
--syntax_keyword: #c30771;
--syntax_atom: #10a778;
--syntax_string: #008ec4;
--syntax_error: #ffbedc;
--syntax_unknown_variable: #838383;
--syntax_known_variable: #005f87;
--syntax_matchbracket: #20bbfc;
--syntax_key: #6636b4;
--mono_fonts: 82%/1.5 Menlo, Consolas, monospace;
}
.observablehq--expanded,
.observablehq--collapsed,
.observablehq--function,
.observablehq--import,
.observablehq--string:before,
.observablehq--string:after,
.observablehq--gray {
color: var(--syntax_normal);
}
.observablehq--collapsed,
.observablehq--inspect a {
cursor: pointer;
}
.observablehq--field {
text-indent: -1em;
margin-left: 1em;
}
.observablehq--empty {
color: var(--syntax_comment);
}
.observablehq--keyword,
.observablehq--blue {
color: #3182bd;
}
.observablehq--forbidden,
.observablehq--pink {
color: #e377c2;
}
.observablehq--orange {
color: #e6550d;
}
.observablehq--null,
.observablehq--undefined,
.observablehq--boolean {
color: var(--syntax_atom);
}
.observablehq--number,
.observablehq--bigint,
.observablehq--date,
.observablehq--regexp,
.observablehq--symbol,
.observablehq--green {
color: var(--syntax_number);
}
.observablehq--index,
.observablehq--key {
color: var(--syntax_key);
}
.observablehq--prototype-key {
color: #aaa;
}
.observablehq--empty {
font-style: oblique;
}
.observablehq--string,
.observablehq--purple {
color: var(--syntax_string);
}
.observablehq--error,
.observablehq--red {
color: #e7040f;
}
.observablehq--inspect {
font: var(--mono_fonts);
overflow-x: auto;
display: block;
white-space: pre;
}
.observablehq--error .observablehq--inspect {
word-break: break-all;
white-space: pre-wrap;
}
table {
min-width: 100%;
border-width: 1px
}
td { vertical-align: top; }
th:not(:first-child):not(:last-child), td:not(:first-child):not(:last-child) { padding: 0 10px; }
th { vertical-align: bottom; }
th
.number {
text-align: right;
font-feature-settings: 'tnum';
}
tbody tr td.with-decimal {
padding-left:10px !important;
padding-right:0px !important;
}
tbody tr td.decimal {
padding-left:0 !important;
padding-right:10px !important;
}
details {
position: absolute;
bottom: 0;
border-radius: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 30px;
}
details[open] {
width: 360px;
}
summary {
list-style-type: none;
display: inline-block;
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
}
details summary::-webkit-details-marker {
display: none;
}
details input {
position: absolute;
top: 3px;
left: 25px;
}
a[download] {
position: absolute;
bottom: 0;
right: 5px;
border-radius: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 30px;
height: 30px;
text-align: center;
line-height: 28px;
}
a[download] button {
border: none;
background: transparent;
}
</style>
${result}`}
table(
fetch(json_url).then(d => d.json())
)
viewof data = table(
defence_filter,
{
nully: () => '<span style="color: red">No data</span>',
limit: 500,
enableFilter: true,
enableCSVDownload: true,
columns: [
'Supplier_name',
'Quantity',
'UOM',
'Unit_price',
'Order_amount',
'Payments',
{
key: 'Date_order2',
name: 'Order Date'
},
{
key:"Date_payments2",
name:"Payments Date"
}]
}
)
data
x=table(
fetch(json_url).then(d => d.json()),
{
nully: () => '<span style="color: red">No data</span>',
limit: 500,
enableFilter: false,
enableCSVDownload: true,
columns: [{
key: 'key',
name: 'Station ID',
render: val => `<a href="https://google.com/?q=${val}" target="_blank">${val}</a>`
},
'last1hrf',
'rainfall',
'rainfallmsg',
{
key: 'rfstationstatus',
name: 'RF Status'
}]
}
)
CSV = require('json2csv@4.0.0').then(a => a.parse)
max_height=400
sty=html`<style>
table {
min-width: 100%;
}
td { vertical-align: top; }
th:not(:first-child):not(:last-child), td:not(:first-child):not(:last-child) { padding: 0 10px; }
th { vertical-align: bottom; }
th
.number {
text-align: right;
font-feature-settings: 'tnum';
}
tbody tr td.with-decimal {
padding-left:10px !important;
padding-right:0px !important;
}
tbody tr td.decimal {
padding-left:0 !important;
padding-right:10px !important;
}
details {
position: absolute;
bottom: 0;
border-radius: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 30px;
}
details[open] {
width: 360px;
}
summary {
list-style-type: none;
display: inline-block;
line-height: 28px;
width: 30px;
height: 30px;
text-align: center;
}
details summary::-webkit-details-marker {
display: none;
}
details input {
position: absolute;
top: 3px;
left: 25px;
}
a[download] {
position: absolute;
bottom: 0;
right: 5px;
border-radius: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 30px;
height: 30px;
text-align: center;
line-height: 28px;
}
a[download] button {
border: none;
background: transparent;
}
</style>`
defence=FileAttachment("defence_wrong.csv").csv({typed:true})
defence_filter={
let filtered=defence.filter(d=>(d.Quantity==60000)&(d.status=="wrong"))
filtered.map(d=>d.Date_order2=dateformat(d.Date_order))
filtered.map(d=>d.Date_payments2=dateformat(d.Date_payments))
return filtered
}
dateformat=d3.utcFormat("%Y-%m-%d")
dateformat(defence[0].Date_order)
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.
