CODE:
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Viz Kids</title>
<style>
.dataviz5432-container {
font-family: 'Comic Sans MS', cursive, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f0f8ff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.dataviz5432-title {
text-align: center;
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.dataviz5432-charts {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.dataviz5432-chart {
width: 45%;
min-width: 300px;
margin: 10px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.3s ease;
}
.dataviz5432-chart:hover {
transform: scale(1.02);
}
.dataviz5432-controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
.dataviz5432-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
border-radius: 30px;
transition: background-color 0.3s ease;
}
.dataviz5432-button:hover {
background-color: #45a049;
}
.dataviz5432-inputs {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 20px;
}
.dataviz5432-input-group {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
padding: 10px;
background-color: rgba(255,255,255,0.7);
border-radius: 10px;
transition: transform 0.3s ease;
}
.dataviz5432-input-group:hover {
transform: scale(1.05);
}
.dataviz5432-input {
width: 60px;
padding: 5px;
margin-top: 5px;
border: 2px solid #4CAF50;
border-radius: 5px;
text-align: center;
font-size: 16px;
}
.dataviz5432-color-picker {
margin-top: 5px;
cursor: pointer;
}
.dataviz5432-bar, .dataviz5432-pie-slice {
transition: all 0.3s ease;
}
.dataviz5432-bar:hover, .dataviz5432-pie-slice:hover {
opacity: 0.8;
transform: scale(1.05);
}
.dataviz5432-tooltip {
position: absolute;
background-color: rgba(0,0,0,0.8);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
.dataviz5432-chart {
width: 90%;
}
.dataviz5432-input-group {
width: 40%;
}
}
</style>
</head>
<body>
<div class="dataviz5432-container">
<h1 class="dataviz5432-title">Data Viz Kids</h1>
<div class="dataviz5432-charts">
<div class="dataviz5432-chart">
<h2>Bar Chart: Favorite Fruits</h2>
<svg id="barChart" width="100%" height="300"><rect x="10" y="129.87654320987653" width="40" height="170.12345679012347" fill="#FF6384" class="dataviz5432-bar"></rect><text x="30" y="290" text-anchor="middle">Apples</text><text x="30" y="124.87654320987653" text-anchor="middle">53</text><rect x="70" y="155.55555555555554" width="40" height="144.44444444444446" fill="#36A2EB" class="dataviz5432-bar"></rect><text x="90" y="290" text-anchor="middle">Bananas</text><text x="90" y="150.55555555555554" text-anchor="middle">45</text><rect x="130" y="65.67901234567901" width="40" height="234.320987654321" fill="#FFCE56" class="dataviz5432-bar"></rect><text x="150" y="290" text-anchor="middle">Oranges</text><text x="150" y="60.67901234567901" text-anchor="middle">73</text><rect x="190" y="126.66666666666666" width="40" height="173.33333333333334" fill="#4BC0C0" class="dataviz5432-bar"></rect><text x="210" y="290" text-anchor="middle">Grapes</text><text x="210" y="121.66666666666666" text-anchor="middle">54</text><rect x="250" y="40" width="40" height="260" fill="#9966FF" class="dataviz5432-bar"></rect><text x="270" y="290" text-anchor="middle">Strawberries</text><text x="270" y="35" text-anchor="middle">81</text></svg>
</div>
<div class="dataviz5432-chart">
<h2>Pie Chart: Favorite Fruits</h2>
<svg id="pieChart" width="100%" height="300"><path d="M 150 150 L 290 150 A 140 140 0 0 1 214.9633243853109 274.0151865087856 Z" fill="#FF6384" class="dataviz5432-pie-slice" style="transform-origin: 150px 150px; transform: scale(1); transition: transform 0.5s ease-out 0s;"></path><text x="233.84653854761189" y="200.73221829945777" text-anchor="middle" fill="white">Apples (53)</text><path d="M 150 150 L 214.9633243853109 274.0151865087856 A 140 140 0 0 1 90.18289409054665 276.5776988281002 Z" fill="#36A2EB" class="dataviz5432-pie-slice" style="transform-origin: 150px 150px; transform: scale(1); transition: transform 0.5s ease-out 0s;"></path><text x="152.01212056386225" y="247.97934155135195" text-anchor="middle" fill="white">Bananas (45)</text><path d="M 150 150 L 90.18289409054665 276.5776988281002 A 140 140 0 0 1 19.453887883390195 99.42616673379857 Z" fill="#FFCE56" class="dataviz5432-pie-slice" style="transform-origin: 150px 150px; transform: scale(1); transition: transform 0.5s ease-out 0s;"></path><text x="58.9859875495915" y="186.33799028120413" text-anchor="middle" fill="white">Oranges (73)</text><path d="M 150 150 L 19.453887883390195 99.42616673379857 A 140 140 0 0 1 137.08242967513775 10.597215318695163 Z" fill="#4BC0C0" class="dataviz5432-pie-slice" style="transform-origin: 150px 150px; transform: scale(1); transition: transform 0.5s ease-out 0s;"></path><text x="90.94180563483286" y="71.79431172653653" text-anchor="middle" fill="white">Grapes (54)</text><path d="M 150 150 L 137.08242967513775 10.597215318695163 A 140 140 0 0 1 290 149.99999999999997 Z" fill="#9966FF" class="dataviz5432-pie-slice" style="transform-origin: 150px 150px; transform: scale(1); transition: transform 0.5s ease-out 0s;"></path><text x="216.02217307736257" y="77.57712611237538" text-anchor="middle" fill="white">Strawberries (81)</text></svg>
</div>
</div>
<div class="dataviz5432-inputs">
<div class="dataviz5432-input-group">
<label for="apples">Apples</label>
<input type="number" id="apples" class="dataviz5432-input" value="10" min="0" max="100">
<input type="color" id="apples-color" class="dataviz5432-color-picker" value="#FF6384">
</div>
<div class="dataviz5432-input-group">
<label for="bananas">Bananas</label>
<input type="number" id="bananas" class="dataviz5432-input" value="15" min="0" max="100">
<input type="color" id="bananas-color" class="dataviz5432-color-picker" value="#36A2EB">
</div>
<div class="dataviz5432-input-group">
<label for="oranges">Oranges</label>
<input type="number" id="oranges" class="dataviz5432-input" value="20" min="0" max="100">
<input type="color" id="oranges-color" class="dataviz5432-color-picker" value="#FFCE56">
</div>
<div class="dataviz5432-input-group">
<label for="grapes">Grapes</label>
<input type="number" id="grapes" class="dataviz5432-input" value="12" min="0" max="100">
<input type="color" id="grapes-color" class="dataviz5432-color-picker" value="#4BC0C0">
</div>
<div class="dataviz5432-input-group">
<label for="strawberries">Strawberries</label>
<input type="number" id="strawberries" class="dataviz5432-input" value="18" min="0" max="100">
<input type="color" id="strawberries-color" class="dataviz5432-color-picker" value="#9966FF">
</div>
</div>
<div class="dataviz5432-controls">
<button id="randomizeBtn" class="dataviz5432-button">Randomize Data</button>
<button id="clearBtn" class="dataviz5432-button">Clear Charts</button>
</div>
</div>
<pre><code><script>
const fruits = ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Strawberries'];
let colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];
const barChartSvg = document.getElementById('barChart');
const pieChartSvg = document.getElementById('pieChart');
const randomizeBtn = document.getElementById('randomizeBtn');
const clearBtn = document.getElementById('clearBtn');
const tooltip = document.createElement('div');
tooltip.classList.add('dataviz5432-tooltip');
document.body.appendChild(tooltip);
randomizeBtn.addEventListener('click', randomizeData);
clearBtn.addEventListener('click', clearCharts);
fruits.forEach((fruit, index) => {
const input = document.getElementById(fruit.toLowerCase());
const colorPicker = document.getElementById(`${fruit.toLowerCase()}-color`);
input.addEventListener('input', updateCharts);
colorPicker.addEventListener('input', (e) => {
colors[index] = e.target.value;
updateCharts();
});
});
function updateCharts() {
const data = fruits.map(fruit => parseInt(document.getElementById(fruit.toLowerCase()).value));
drawBarChart(data);
drawPieChart(data);
}
function randomizeData() {
fruits.forEach(fruit => {
const input = document.getElementById(fruit.toLowerCase());
input.value = Math.floor(Math.random() * 100) + 1;
});
updateCharts();
}
function clearCharts() {
barChartSvg.innerHTML = '';
pieChartSvg.innerHTML = '';
fruits.forEach(fruit => {
document.getElementById(fruit.toLowerCase()).value = 0;
});
}
function drawBarChart(data) {
const maxValue = Math.max(...data);
const barWidth = 40;
const chartWidth = barChartSvg.clientWidth;
const chartHeight = barChartSvg.clientHeight;
const xScale = chartWidth / (data.length * 2);
const yScale = (chartHeight - 40) / maxValue;
barChartSvg.innerHTML = '';
data.forEach((value, index) => {
const bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bar.setAttribute('x', xScale + index * xScale * 2 - barWidth / 2);
bar.setAttribute('y', chartHeight);
bar.setAttribute('width', barWidth);
bar.setAttribute('height', 0);
bar.setAttribute('fill', colors[index]);
bar.classList.add('dataviz5432-bar');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', xScale + index * xScale * 2);
text.setAttribute('y', chartHeight - 10);
text.setAttribute('text-anchor', 'middle');
text.textContent = fruits[index];
const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
valueText.setAttribute('x', xScale + index * xScale * 2);
valueText.setAttribute('y', chartHeight - value * yScale - 5);
valueText.setAttribute('text-anchor', 'middle');
valueText.textContent = value;
barChartSvg.appendChild(bar);
barChartSvg.appendChild(text);
barChartSvg.appendChild(valueText);
bar.addEventListener('mousemove', (e) => showTooltip(e, `${fruits[index]}: ${value}`));
bar.addEventListener('mouseout', hideTooltip);
// Animate bar
setTimeout(() => {
bar.setAttribute('y', chartHeight - value * yScale);
bar.setAttribute('height', value * yScale);
}, 50 * index);
});
}
function drawPieChart(data) {
const total = data.reduce((sum, value) => sum + value, 0);
const radius = Math.min(pieChartSvg.clientWidth, pieChartSvg.clientHeight) / 2 - 10;
const centerX = pieChartSvg.clientWidth / 2;
const centerY = pieChartSvg.clientHeight / 2;
pieChartSvg.innerHTML = '';
let startAngle = 0;
data.forEach((value, index) => {
const endAngle = startAngle + (value / total) * 2 * Math.PI;
const x1 = centerX + radius * Math.cos(startAngle);
const y1 = centerY + radius * Math.sin(startAngle);
const x2 = centerX + radius * Math.cos(endAngle);
const y2 = centerY + radius * Math.sin(endAngle);
const largeArcFlag = endAngle - startAngle <= Math.PI ? '0' : '1';
const pathData = [
`M ${centerX} ${centerY}`,
`L ${x1} ${y1}`,
`A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
'Z'
].join(' ');
const slice = document.createElementNS('http://www.w3.org/2000/svg', 'path');
slice.setAttribute('d', pathData);
slice.setAttribute('fill', colors[index]);
slice.classList.add('dataviz5432-pie-slice');
const midAngle = (startAngle + endAngle) / 2;
const labelX = centerX + (radius * 0.7) * Math.cos(midAngle);
const labelY = centerY + (radius * 0.7) * Math.sin(midAngle);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', labelX);
text.setAttribute('y', labelY);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.textContent = `${fruits[index]} (${value})`;
pieChartSvg.appendChild(slice);
pieChartSvg.appendChild(text);
slice.addEventListener('mousemove', (e) => showTooltip(e, `${fruits[index]}: ${value} (${((value / total) * 100).toFixed(1)}%)`));
slice.addEventListener('mouseout', hideTooltip);
// Animate slice
slice.style.transformOrigin = `${centerX}px ${centerY}px`;
slice.style.transform = 'scale(0)';
setTimeout(() => {
slice.style.transition = 'transform 0.5s ease-out';
slice.style.transform = 'scale(1)';
}, 50 * index);
startAngle = endAngle;
});
}
function showTooltip(e, text) {
tooltip.textContent = text;
tooltip.style.left = `${e.pageX + 10}px`;
tooltip.style.top = `${e.pageY + 10}px`;
tooltip.style.opacity = 1;
}
function hideTooltip() {
tooltip.style.opacity = 0;
}
updateCharts();
</script>
</code></pre><div class="dataviz5432-tooltip"></div>
</body></html>