html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
<style>
text{font-family: 'Montserrat', sans-serif;}
</style>
<div id="main" style="width: 900px;height:600px;font-family: 'Montserrat', sans-serif;filter:invert(${light})"></div>
`
light = 0
// import * as echarts from 'echarts';
{
var ROOT_PATH = "https://echarts.apache.org/examples";
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
d3.json(
"https://cors-anywhere.herokuapp.com/" +
ROOT_PATH +
"/data/asset/data/nutrients.json"
).then(function (data) {
console.warn(data);
normalizeData(data);
console.warn("nm", data);
myChart.setOption((option = getOption(data)));
});
option && myChart.setOption(option);
}
schema = [
{ name: "name", index: 0 },
{ name: "group", index: 1 },
{ name: "protein", index: 2 },
{ name: "calcium", index: 3 },
{ name: "sodium", index: 4 },
{ name: "fiber", index: 5 },
{ name: "vitaminc", index: 6 },
{ name: "potassium", index: 7 },
{ name: "carbohydrate", index: 8 },
{ name: "sugars", index: 9 },
{ name: "fat", index: 10 },
{ name: "water", index: 11 },
{ name: "calories", index: 12 },
{ name: "saturated", index: 13 },
{ name: "monounsat", index: 14 },
{ name: "polyunsat", index: 15 },
{ name: "id", index: 16 }
]
indices = {
return {
name: 0,
group: 1,
id: 16
};
}
mutable groupCategories = []
groupColors = []
function getOption(data) {
const lineStyle = {
width: 0.5,
opacity: 0.05
};
return {
backgroundColor: "#333",
tooltip: {
padding: 10,
backgroundColor: "#222",
borderColor: "#777",
borderWidth: 1
},
title: [
{
text: "Groups",
top: 0,
left: 0,
textStyle: {
color: "#fff"
}
}
],
visualMap: {
// lines
show: true,
type: "piecewise",
categories: groupCategories,
dimension: indices.group,
inRange: {
color: groupColors //['#d94e5d','#eac736','#50a3ba']
},
outOfRange: {
color: ["#ccc"] //['#d94e5d','#eac736','#50a3ba']
},
top: 20,
textStyle: {
color: "#fff"
},
realtime: false
},
parallelAxis: [
//parallel line order
{ dim: 16, name: schema[16].name, scale: true, nameLocation: "end" },
{ dim: 2, name: schema[2].name, nameLocation: "end" },
{ dim: 4, name: schema[4].name, nameLocation: "end" },
{ dim: 3, name: schema[3].name, nameLocation: "end" },
{ dim: 5, name: schema[5].name, nameLocation: "end" },
{ dim: 6, name: schema[6].name, nameLocation: "end" },
{ dim: 7, name: schema[7].name, nameLocation: "end" },
{ dim: 8, name: schema[8].name, nameLocation: "end" },
{ dim: 9, name: schema[9].name, nameLocation: "end" },
{ dim: 10, name: schema[10].name, nameLocation: "end" },
{ dim: 11, name: schema[11].name, nameLocation: "end" },
{ dim: 12, name: schema[12].name, nameLocation: "end" },
{ dim: 13, name: schema[13].name, nameLocation: "end" },
{ dim: 14, name: schema[14].name, nameLocation: "end" },
{ dim: 15, name: schema[15].name, nameLocation: "end" }
],
parallel: {
left: 280,
top: 20,
// top: 150,
// height: 300,
width: 400,
layout: "vertical",
parallelAxisDefault: {
type: "value",
name: "nutrients???",
nameLocation: "end",
nameGap: 20,
nameTextStyle: {
color: "#fff",
fontSize: 14
},
axisLine: {
lineStyle: {
color: "#aaa"
}
},
axisTick: {
lineStyle: {
color: "#777"
}
},
splitLine: {
show: false
},
axisLabel: {
color: "#fff"
},
realtime: false
}
},
animation: false,
series: [
{
name: "nutrients_series",
type: "parallel",
lineStyle: lineStyle,
inactiveOpacity: 0,
activeOpacity: 0.01,
progressive: 500,
smooth: true,
data: data
}
]
};
}
function normalizeData(originData) {
const groupMap = {};
originData.forEach(function (row) {
const groupName = row[indices.group];
console.log(groupName);
if (!groupCategories.includes(groupName)) {
groupCategories.push(groupName);
}
row.forEach(function (item, index) {
if (
// get all non name values
index !== indices.name &&
index !== indices.group &&
index !== indices.id
) {
// Convert null to zero, as all of them under unit "g".
row[index] = parseFloat(item) || 0;
}
});
});
// we may have multiple lines of the same color.
const hStep = Math.round(300 / (groupCategories.length - 1));
for (var i = 0; i < groupCategories.length; i++) {
groupColors.push(echarts.color.modifyHSL("#5A94DF", hStep * i));
}
}
d3=require('d3')
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.
