Published
Edited
Jul 23, 2021
Insert cell
md`# Shopifly API`
Insert cell
url1 = "https://e9s9p1ckrg.execute-api.ap-southeast-1.amazonaws.com/dev/shopify-proxy?url=boomgrow-farms.myshopify.com/admin/api/2020-10/orders/2988528042147/fulfillments.json?limit=250"
Insert cell
url2 = "https://e9s9p1ckrg.execute-api.ap-southeast-1.amazonaws.com/dev/shopify-proxy?url=boomgrow-farms.myshopify.com/admin/api/2020-10/orders.json?status=any?limit=250"
Insert cell
url3 = "https://e9s9p1ckrg.execute-api.ap-southeast-1.amazonaws.com/dev/shopify-proxy?url=boomgrow-farms.myshopify.com/admin/api/2020-10/customers.json?limit=250"
Insert cell
d3 = require("d3@5")
Insert cell
orders= await d3.json(url2)
Insert cell
fulfullment= await d3.json(url1)
Insert cell
customer = await d3.json(url3)
Insert cell
myOrder = orders.orders.map( d => (
{
id: d.id,
order_number: d.order_number,
created_at: d.created_at,
subtotal_price: d.subtotal_price,
total_price: d.total_price,
shipping_address: d.shipping_address,
city: d.shipping_address.city,
zip: d.shipping_address.zip,
latitude: d.shipping_address.latitude,
longitude: d.shipping_address.longitude,
name: d.customer.first_name,
description: d.customer.last_name,
contact_email: d.contact_email,
financial_status: d.financial_status,
}
))
Insert cell
Inputs.table(myOrder)
Insert cell
myCoords = myOrder
.filter(d => d.latitude != null )
.filter(d => d.longitude != null )
.map( d => (
{
name: d.name,
description: d.description,
latitude: d.latitude,
longitude: d.longitude,
total_price: d.total_price,
city: d.shipping_address.city,
}
))
Insert cell
Plot.plot({
width:1200,
height: 600,
grid: true,
inset: 10,
marginLeft: 150,
x: {
label: "total price",
padding: 0.8
},
y: {
label: "city",
padding: 1,
},
marks: [
//Plot.ruleY([0]),
Plot.dot(myOrder, {y: "city", x: "total_price", fill:"total_price"}),
[Plot.frame()]
]
})
Insert cell
Insert cell
melawati = [3.215484622983702, 101.75364073732851]
Insert cell
calcDistance = function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
}
Insert cell
function deg2rad(deg) {
return deg * (Math.PI/180)
}
Insert cell
myDist = myCoords.map( d => (
{
name: d.name,
distance: calcDistance( melawati[0], melawati[1], d.latitude, d.longitude)
}
)
)
.sort((a, b) => b.distance - a.distance)
Insert cell
Plot.plot({
width:1000,
height: 600,
grid: true,
inset: 10,
marginLeft: 110,
x: {
label: "distance (km)",
padding: 2
},
y: {
label: "customer",
padding: 1,
},
marks: [
//Plot.ruleY([0]),
Plot.dot(myDist, {y: "name", x: "distance", fill:"distance"}),
[Plot.frame()]
]
})
Insert cell

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.
Learn more