const container = document.querySelector('#visualization');
const rect = container.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const margin = { top: 60, right: 40, bottom: 60, left: 60 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const data = [
{ category: 'A', value: 30 },
{ category: 'B', value: 80 },
{ category: 'C', value: 45 },
];
const svg = d3.select('#visualization').append('svg').attr('width', width).attr('height', height);
const chart = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
const container = document.querySelector('#visualization');
const rect = container.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const margin = { top: 60, right: 40, bottom: 60, left: 60 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const data = [
{ category: 'A', value: 30 },
{ category: 'B', value: 80 },
{ category: 'C', value: 45 },
{ category: 'D', value: 60 },
{ category: 'E', value: 20 },
];
const svg = d3.select('#visualization').append('svg').attr('width', width).attr('height', height);
const chart = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
const xScale = d3
.scaleBand()
.domain(data.map((d) => d.category))
.range([0, innerWidth])
.padding(0.2);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.value)])
.nice()
.range([innerHeight, 0]);
chart.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(xScale));
chart.append('g').call(d3.axisLeft(yScale));
const tooltip = d3
.select('body')
.append('div')
.attr('class', 'd3-tooltip')
.style('position', 'absolute')
.style('opacity', 0);
chart
.selectAll('rect')
.data(data)
.join('rect')
.attr('x', (d) => xScale(d.category))
.attr('y', (d) => yScale(d.value))
.attr('width', xScale.bandwidth())
.attr('height', (d) => innerHeight - yScale(d.value))
.attr('fill', '#3498db')
.on('mouseover', (event, d) => {
tooltip.transition().duration(200).style('opacity', 1);
tooltip
.html(`<strong>${d.category}</strong><br/>Value: ${d.value}`)
.style('left', event.pageX + 10 + 'px')
.style('top', event.pageY - 10 + 'px');
})
.on('mouseout', () => {
tooltip.transition().duration(200).style('opacity', 0);
});
chart
.append('text')
.attr('x', innerWidth / 2)
.attr('y', -20)
.attr('text-anchor', 'middle')
.style('font-size', '18px')
.style('font-weight', 'bold')
.text('Sample Bar Chart');
const line = d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.value));
svg
.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', '#3498db')
.attr('stroke-width', 2)
.attr('d', line);
svg
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', (d) => xScale(d.x))
.attr('cy', (d) => yScale(d.y))
.attr('r', 5)
.attr('fill', '#3498db');
const pie = d3.pie().value((d) => d.value);
const arc = d3.arc().innerRadius(0).outerRadius(radius);
svg
.selectAll('path')
.data(pie(data))
.join('path')
.attr('d', arc)
.attr('fill', (d, i) => d3.schemeCategory10[i]);
