Playground - 코드 에디터

D3.js코드 중심 데이터 시각화

viz.js

// D3.js Data Visualization

const data = [
  { name: 'JavaScript', value: 95, color: '#f7df1e' },
  { name: 'Python', value: 91, color: '#3776ab' },
  { name: 'React', value: 88, color: '#61dafb' },
  { name: 'TypeScript', value: 85, color: '#3178c6' },
  { name: 'Vue', value: 72, color: '#42b883' },
  { name: 'Go', value: 65, color: '#00add8' },
  { name: 'Lua', value: 45, color: '#000080' },
];

const width = 600, height = 400;
const margin = { top: 30, right: 30, bottom: 50, left: 60 };

const svg = d3.select('body').append('svg')
  .attr('width', width).attr('height', height)
  .style('font-family', 'system-ui, sans-serif');

const x = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.left, width - margin.right])
  .padding(0.3);

const y = d3.scaleLinear()
  .domain([0, 100])
  .range([height - margin.bottom, margin.top]);

// Bars
svg.selectAll('rect').data(data).join('rect')
  .attr('x', d => x(d.name))
  .attr('y', d => y(d.value))
  .attr('width', x.bandwidth())
  .attr('height', d => y(0) - y(d.value))
  .attr('fill', d => d.color)
  .attr('rx', 4);

// Labels
svg.selectAll('.label').data(data).join('text')
  .attr('class', 'label')
  .attr('x', d => x(d.name) + x.bandwidth() / 2)
  .attr('y', d => y(d.value) - 6)
  .attr('text-anchor', 'middle')
  .attr('font-size', 12)
  .attr('fill', '#334155')
  .text(d => d.value);

// X Axis
svg.append('g')
  .attr('transform', `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x))
  .selectAll('text').attr('font-size', 11);

// Y Axis
svg.append('g')
  .attr('transform', `translate(${margin.left},0)`)
  .call(d3.axisLeft(y).ticks(5));

// Title
svg.append('text')
  .attr('x', width / 2).attr('y', 20)
  .attr('text-anchor', 'middle')
  .attr('font-size', 16).attr('font-weight', 'bold')
  .attr('fill', '#1e293b')
  .text('Language Popularity Index');

Preview

Console

D3.jsviz.jsUTF-8

Ln 1, Col 1Spaces: 2