JavaScript: D3

import * as d3 from 'd3';

// Selections the heart of D3 const svg = d3.select('#chart') .append('svg') .attr('width', 800) .attr('height', 400);

// Data binding: .data() joins data to DOM const circles = svg.selectAll('circle') .data([10, 20, 30, 40, 50]);

// Enter selection: new DOM elements for new data circles.enter() .append('circle') .attr('cx', (d, i) => i * 100 + 50) .attr('cy', 200) .attr('r', d => d) .attr('fill', 'steelblue') .attr('opacity', 0.7);

// Update + exit pattern circles.attr('r', d => d * 1.2); // update existing circles.exit().remove(); // remove old elements ```

const data = [10, 50, 30, 80, 45, 90, 20];
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// Scales: map data domain → visual range const xScale = d3.scaleBand() .domain(data.map((_, i) => i)) .range([0, width]) .padding(0.1);

const yScale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height, 0]); // inverted: SVG y=0 is top

const colorScale = d3.scaleSequential(d3.interpolateViridis) .domain([0, d3.max(data)]);

// Axes const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale).ticks(5).tickFormat(d => ${d}%);

const g = svg.append('g').attr('transform', translate(${margin.left},${margin.top})); g.append('g').attr('transform', translate(0,${height})).call(xAxis); g.append('g').call(yAxis); ```

const dataset = [
  { month: 'Jan', sales: 4200 }, { month: 'Feb', sales: 3800 },
  { month: 'Mar', sales: 5100 }, { month: 'Apr', sales: 4700 },
  { month: 'May', sales: 6200 }, { month: 'Jun', sales: 5800 }
];

const bars = g.selectAll('.bar') .data(dataset) .enter() .append('rect') .attr('class', 'bar') .attr('x', d => xScale(d.month)) .attr('y', d => yScale(d.sales)) .attr('width', xScale.bandwidth()) .attr('height', d => height - yScale(d.sales)) .attr('fill', 'steelblue') .attr('rx', 3); // rounded corners

// Labels on bars g.selectAll('.label') .data(dataset) .enter() .append('text') .attr('x', d => xScale(d.month) + xScale.bandwidth() / 2) .attr('y', d => yScale(d.sales) - 5) .attr('text-anchor', 'middle') .text(d => d3.format('$,.0f')(d.sales)); ```

// Smooth transitions
bars.transition()
  .duration(750)
  .ease(d3.easeCubicOut)
  .attr('y', d => yScale(d.sales))
  .attr('height', d => height - yScale(d.sales));

// Staggered entrance bars.enter() .append('rect') .attr('y', height) // start at bottom .attr('height', 0) // zero height .transition() .duration(600) .delay((d, i) => i * 80) // stagger by index .attr('y', d => yScale(d.sales)) .attr('height', d => height - yScale(d.sales));

// Tooltip on hover const tooltip = d3.select('body').append('div') .style('position', 'absolute').style('opacity', 0) .style('background', 'white').style('padding', '8px').style('border-radius', '4px');

bars.on('mouseover', (event, d) => { tooltip.style('opacity', 1) .html(${d.month}
$${d.sales.toLocaleString()}) .style('left', (event.pageX + 10) + 'px') .style('top', (event.pageY - 20) + 'px'); }) .on('mouseout', () => tooltip.style('opacity', 0)); ```

const timeSeries = [
  { date: new Date('2024-01'), value: 100 },
  { date: new Date('2024-02'), value: 120 },
  { date: new Date('2024-03'), value: 95 },
  { date: new Date('2024-04'), value: 140 }
];

const xTime = d3.scaleTime() .domain(d3.extent(timeSeries, d => d.date)) .range([0, width]);

const yVal = d3.scaleLinear() .domain([0, d3.max(timeSeries, d => d.value)]) .range([height, 0]);

// Line generator const line = d3.line() .x(d => xTime(d.date)) .y(d => yVal(d.value)) .curve(d3.curveCatmullRom); // smooth curve

// Area generator const area = d3.area() .x(d => xTime(d.date)) .y0(height) .y1(d => yVal(d.value)) .curve(d3.curveCatmullRom);

g.append('path').datum(timeSeries) .attr('fill', 'steelblue').attr('opacity', 0.2) .attr('d', area);

g.append('path').datum(timeSeries) .attr('fill', 'none').attr('stroke', 'steelblue').attr('stroke-width', 2) .attr('d', line); ```

// Force-directed graph
const nodes = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
const links = [{ source: 1, target: 2 }, { source: 2, target: 3 }, { source: 1, target: 4 }];

const simulation = d3.forceSimulation(nodes) .force('link', d3.forceLink(links).id(d => d.id).distance(100)) .force('charge', d3.forceManyBody().strength(-300)) .force('center', d3.forceCenter(width / 2, height / 2)) .force('collision', d3.forceCollide().radius(20));

const link = g.append('g').selectAll('line').data(links).enter().append('line') .attr('stroke', '#999').attr('stroke-width', 2);

const node = g.append('g').selectAll('circle').data(nodes).enter().append('circle') .attr('r', 15).attr('fill', d3.schemeTableau10[0]) .call(d3.drag() .on('start', (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }) .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y; }) .on('end', (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }) );

simulation.on('tick', () => { link.attr('x1', d => d.source.x).attr('y1', d => d.source.y) .attr('x2', d => d.target.x).attr('y2', d => d.target.y); node.attr('cx', d => d.x).attr('cy', d => d.y); }); ```