Published
Edited
Jun 26, 2022
4 stars
Concepts popularity trends tiny charts
viewof height = Inputs.range([40, 60], {step: 1, label: "Area Charts Height", value: 50})
viewof HeaderFontSize = Inputs.range([12, 20], {step: 1, label: "Header Font Size", value: 18})
viewof fontsize = Inputs.range([12, 20], {step: 1, label: "Body Text Font Size", value: 17})
a_table = table2(d3.groups(data, d => d.concept_1)
.filter(([, data]) => data.some(d => d['rank_1'] <= rankCutoff))
.map(([key, data]) => (
{
"Proportion_0": area(data.map(d => Math.max(0, d.proportion_0)) , {
width: 150,
height: height,
color: { line: "black", fill: "skyblue" },
highlights: { max: "orange", end: "black" },
margin: { vertical: 0.1, horizontal: 0.01 },
scaling: "zero"
}),
Concept_0: data[0]['concept_0'],
"Historical_Total_0": data[0]['concept historical total_0'],
"Proportion_1": area(data.map(d => Math.max(0, d.proportion_1)) , {
width: 150,
height: height,
color: { line: "black", fill: "#d0f0c0" },
highlights: { max: "blue", end: "black" },
margin: { vertical: 0.1, horizontal: 0.01 },
scaling: "zero"
}),
Concept_1: key,
"Historical_Total_1": data[0]['concept historical total_1'],
// " ": "||",
// "Rank": data[0]['rank_1'],
// "Level_1": data[0]["level_1"],
"Proportion_2": area(data.map(d => Math.max(0, d.proportion_2)) , {
width: 150,
height: height,
color: { line: "black", fill: "pink" },
highlights: { max: "blue", end: "black" },
margin: { vertical: 0.1, horizontal: 0.01 },
scaling: "zero"
}),
Concept_2: data[0]['concept_2'],
"Historical_Total_2": data[0]['concept historical total_2'],
// "Rank_2": data[0]['rank_2'],
// "Level_2": data[0]["level_2"],
"Proportion_3": area(data.map(d => Math.max(0, d.proportion_3)) , {
width: 150,
height: height,
color: { line: "black", fill: "orange" },
highlights: { max: "blue", end: "black" },
margin: { vertical: 0.1, horizontal: 0.01 },
scaling: "zero"
}),
Concept_3: data[0]['concept_3'],
"Historical_Total_3": data[0]['concept historical total_3'],
// "Rank_3": data[0]['rank_3'],
// "Level_3": data[0]["level_3"],
})), {
width: "1440px",
layout: "fixed",
widths: ["150px", "130px", "50px",
"150px", "130px", "50px",
"150px", "130px", "50px",
"150px", "130px", "50px",
],
align: ["center", "left", "center",
"center", "left", "left",
"center", "left", "left",
"center", "left", "left",],
cols: ['Trend', 'L0', 'Total',
'Trend', 'L1', 'Total',
'Trend', 'L2', 'Total',
'Trend', 'L3', 'Total',
]
}
)
// , {
// width: "1350px",
// layout: "fixed",
// // whitespace: ["100px","100px", "0px","0px","0px", "10px","0px","0px", "0px"],
// widths: ["200px", "200px", "50px", "200px", "200px", "50px", "200px", "200px", "50px"],
// align: ["center", "left", "center", "center", "left", "left", "center", "left", "left"],
// cols: ['Trend', 'Level1 Concept', '#', 'Trend', 'Level2 Concept', '#', 'Trend', 'Level3 Concept', '#'],
// }
// )
// dataTry = FileAttachment("top_level_concepts_try@1.csv").csv()
data = d3.csv("https://raw.githubusercontent.com/hongtaoh/32visNEW/master/data/plots/top_concepts_trends_df.csv")
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.
