Skip to content

Commit 164fc24

Browse files
csaladenescsaladenes
authored
Add files via upload
1 parent a6624cd commit 164fc24

40 files changed

+49681
-0
lines changed

‎ADV 2025/1/barmi.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
CTRL + I
2+
3+
Composer

‎ADV 2025/1/chartjs.html‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Chart.js Visualizations</title>
7+
8+
<!-- Import Chart.js library -->
9+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10+
11+
<style>
12+
body {
13+
font-family: Arial, sans-serif;
14+
margin: 20px;
15+
max-width: 1000px;
16+
margin: 0 auto;
17+
padding: 20px;
18+
}
19+
20+
h1, h2 {
21+
color: #333;
22+
}
23+
24+
.chart-container {
25+
position: relative;
26+
height: 350px;
27+
width: 100%;
28+
margin-bottom: 20px;
29+
}
30+
31+
.charts-row {
32+
display: flex;
33+
flex-wrap: wrap;
34+
gap: 20px;
35+
margin-top: 30px;
36+
}
37+
38+
.chart-col {
39+
flex: 1;
40+
min-width: 300px;
41+
border: 1px solid #eee;
42+
border-radius: 8px;
43+
padding: 15px;
44+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
45+
}
46+
47+
.controls {
48+
background-color: #f5f5f5;
49+
padding: 15px;
50+
border-radius: 8px;
51+
margin-bottom: 20px;
52+
}
53+
54+
.control-group {
55+
margin-bottom: 10px;
56+
}
57+
58+
label {
59+
font-weight: bold;
60+
margin-right: 10px;
61+
}
62+
63+
select {
64+
padding: 8px;
65+
border-radius: 4px;
66+
border: 1px solid #ddd;
67+
background-color: white;
68+
min-width: 150px;
69+
}
70+
71+
.nav-links {
72+
margin-top: 30px;
73+
padding-top: 15px;
74+
border-top: 1px solid #eee;
75+
}
76+
</style>
77+
</head>
78+
<body>
79+
<h1>Chart.js Visualizations</h1>
80+
<p>The same data visualized using Chart.js instead of Vega-Lite.</p>
81+
82+
<div class="controls">
83+
<div class="control-group">
84+
<label for="theme-selector">Color Theme:</label>
85+
<select id="theme-selector" onchange="updateCharts()">
86+
<option value="default">Default</option>
87+
<option value="pastel">Pastel</option>
88+
<option value="bright">Bright</option>
89+
<option value="dark">Dark</option>
90+
<option value="colorblind">Colorblind Friendly</option>
91+
</select>
92+
</div>
93+
</div>
94+
95+
<div class="charts-row">
96+
<!-- Bar Chart Container -->
97+
<div class="chart-col">
98+
<h2>Bar Chart</h2>
99+
<div class="chart-container">
100+
<canvas id="barChart"></canvas>
101+
</div>
102+
</div>
103+
104+
<!-- Donut Chart Container -->
105+
<div class="chart-col">
106+
<h2>Donut Chart</h2>
107+
<div class="chart-container">
108+
<canvas id="donutChart"></canvas>
109+
</div>
110+
</div>
111+
</div>
112+
113+
<div class="nav-links">
114+
<p><a href="index.html">← Back to Vega-Lite Version</a></p>
115+
</div>
116+
117+
<script>
118+
// Chart instances
119+
let barChartInstance = null;
120+
let donutChartInstance = null;
121+
122+
// Color palette themes
123+
const colorThemes = {
124+
default: [
125+
'rgba(54, 162, 235, 0.8)',
126+
'rgba(255, 99, 132, 0.8)',
127+
'rgba(255, 206, 86, 0.8)',
128+
'rgba(75, 192, 192, 0.8)',
129+
'rgba(153, 102, 255, 0.8)',
130+
'rgba(255, 159, 64, 0.8)',
131+
'rgba(199, 199, 199, 0.8)',
132+
'rgba(83, 102, 255, 0.8)'
133+
],
134+
pastel: [
135+
'rgba(187, 222, 251, 0.8)',
136+
'rgba(255, 236, 179, 0.8)',
137+
'rgba(209, 196, 233, 0.8)',
138+
'rgba(197, 225, 165, 0.8)',
139+
'rgba(255, 204, 188, 0.8)',
140+
'rgba(176, 190, 197, 0.8)',
141+
'rgba(255, 224, 178, 0.8)',
142+
'rgba(188, 170, 164, 0.8)'
143+
],
144+
bright: [
145+
'rgba(0, 176, 255, 0.8)',
146+
'rgba(255, 23, 68, 0.8)',
147+
'rgba(255, 214, 0, 0.8)',
148+
'rgba(0, 230, 118, 0.8)',
149+
'rgba(156, 39, 176, 0.8)',
150+
'rgba(255, 87, 34, 0.8)',
151+
'rgba(3, 169, 244, 0.8)',
152+
'rgba(255, 61, 0, 0.8)'
153+
],
154+
dark: [
155+
'rgba(25, 118, 210, 0.8)',
156+
'rgba(198, 40, 40, 0.8)',
157+
'rgba(46, 125, 50, 0.8)',
158+
'rgba(136, 14, 79, 0.8)',
159+
'rgba(49, 27, 146, 0.8)',
160+
'rgba(230, 81, 0, 0.8)',
161+
'rgba(1, 87, 155, 0.8)',
162+
'rgba(183, 28, 28, 0.8)'
163+
],
164+
colorblind: [
165+
'rgba(0, 107, 164, 0.8)',
166+
'rgba(255, 128, 14, 0.8)',
167+
'rgba(171, 171, 171, 0.8)',
168+
'rgba(89, 89, 89, 0.8)',
169+
'rgba(95, 158, 209, 0.8)',
170+
'rgba(200, 82, 0, 0.8)',
171+
'rgba(137, 137, 137, 0.8)',
172+
'rgba(162, 200, 236, 0.8)'
173+
]
174+
};
175+
176+
// Load data from spec1.json
177+
fetch('spec1.json')
178+
.then(response => response.json())
179+
.then(spec => {
180+
const data = spec.data.values;
181+
initCharts(data);
182+
})
183+
.catch(error => {
184+
console.error('Error loading the data:', error);
185+
document.querySelector('.charts-row').innerHTML =
186+
'<p style="color: red;">Error loading the data. Please check the console for details.</p>';
187+
});
188+
189+
function initCharts(data) {
190+
const labels = data.map(item => item.a);
191+
const values = data.map(item => item.b);
192+
const defaultColors = colorThemes.default;
193+
194+
// Initialize Bar Chart
195+
const barCtx = document.getElementById('barChart').getContext('2d');
196+
barChartInstance = new Chart(barCtx, {
197+
type: 'bar',
198+
data: {
199+
labels: labels,
200+
datasets: [{
201+
label: 'Value',
202+
data: values,
203+
backgroundColor: defaultColors,
204+
borderColor: defaultColors.map(color => color.replace('0.8', '1')),
205+
borderWidth: 1
206+
}]
207+
},
208+
options: {
209+
responsive: true,
210+
maintainAspectRatio: false,
211+
plugins: {
212+
legend: {
213+
display: false
214+
},
215+
title: {
216+
display: true,
217+
text: 'Bar Chart'
218+
}
219+
},
220+
scales: {
221+
y: {
222+
beginAtZero: true
223+
}
224+
}
225+
}
226+
});
227+
228+
// Initialize Donut Chart
229+
const donutCtx = document.getElementById('donutChart').getContext('2d');
230+
donutChartInstance = new Chart(donutCtx, {
231+
type: 'doughnut',
232+
data: {
233+
labels: labels,
234+
datasets: [{
235+
label: 'Value',
236+
data: values,
237+
backgroundColor: defaultColors,
238+
borderColor: defaultColors.map(color => color.replace('0.8', '1')),
239+
borderWidth: 1
240+
}]
241+
},
242+
options: {
243+
responsive: true,
244+
maintainAspectRatio: false,
245+
plugins: {
246+
legend: {
247+
position: 'right'
248+
},
249+
title: {
250+
display: true,
251+
text: 'Donut Chart'
252+
}
253+
}
254+
}
255+
});
256+
}
257+
258+
function updateCharts() {
259+
const selectedTheme = document.getElementById('theme-selector').value;
260+
const colors = colorThemes[selectedTheme];
261+
262+
if (barChartInstance && donutChartInstance && colors) {
263+
// Update bar chart colors
264+
barChartInstance.data.datasets[0].backgroundColor = colors;
265+
barChartInstance.data.datasets[0].borderColor = colors.map(color => color.replace('0.8', '1'));
266+
barChartInstance.update();
267+
268+
// Update donut chart colors
269+
donutChartInstance.data.datasets[0].backgroundColor = colors;
270+
donutChartInstance.data.datasets[0].borderColor = colors.map(color => color.replace('0.8', '1'));
271+
donutChartInstance.update();
272+
}
273+
}
274+
</script>
275+
</body>
276+
</html>

0 commit comments

Comments
 (0)