snow-d3

ساخت چارت‌ها، نقشه‌ها و گراف‌های تعاملی با D3.js

این Skill برای ساخت انواع visualization داده‌محور در وب با D3.js است؛ از bar، line و scatter chart تا نقشه‌های جغرافیایی، treemap، Sankey و force-directed graph.

با استفاده از الگوهای آماده و راهنمای ماژول‌ها، می‌توانید داده‌ها را به SVG یا Canvas تبدیل کنید و قابلیت‌هایی مثل tooltip، zoom، brush، drag و transition را به‌سادگی اضافه کنید.

چه چیزی می‌گیرید

• ساخت بیش از ۳۰ نوع چارت، نمودار، نقشه و layout داده‌محور
• پیاده‌سازی scale، axis، data join و شکل‌های SVG با D3.js v7
• افزودن تعامل‌هایی مثل tooltip، zoom، brush، drag و transition
• الگوهای آماده برای responsive chart و ساختار استاندارد margin convention
• نمونه‌های مستقل HTML برای چارت‌های رایج و پیشرفته

برای چه کاری خوب است

• توسعه‌دهندگانی که به visualization سفارشی در وب نیاز دارند
• ساخت dashboard، گزارش تحلیلی یا ابزار اکتشاف داده‌های تعاملی
• نمایش شبکه‌ها، ساختارهای سلسله‌مراتبی، داده‌های جغرافیایی یا جریان‌ها
• زمانی که کنترل دقیق روی SVG، Canvas، layout و رفتار چارت مهم است

برای چه کاری نیست

• ساخت چارت‌های ساده با کامپوننت‌های آماده و بدون نیاز به سفارشی‌سازی
• پروژه‌هایی که به خروجی ثابت تصویری نیاز دارند و تعامل وب ندارند
• وقتی داده یا منطق تحلیل آماده نیست و فقط به طراحی گرافیکی نیاز دارید

دربارهٔ این اسکیل

D3.js Data Visualization Skill (snow-d3)

D3 (Data-Driven Documents) v7 — the JavaScript library for bespoke data visualization using web standards (SVG, Canvas, HTML).

When to Use

• Creating any chart or graph: bar, line, area, scatter, pie, donut, histogram, box plot
• Building hierarchical visualizations: treemap, sunburst, tree, dendrogram, circle packing
• Rendering network graphs: force-directed layouts, chord diagrams
• Making geographic maps: choropleth, bubble map, globe projections
• Adding interactivity: zoom/pan, brush selection, drag-and-drop, tooltips
• Implementing animated transitions between data states
• Customizing every pixel of a visualization with full SVG/Canvas control

Skill Resources

Examples Bundled in this Skill

Procedure

1. Choose the right chart type

Use the table above or the Module Guide to identify which D3 modules are needed.

2. Set up the HTML skeleton

Every standalone D3 chart starts with this template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Chart</title>
  <style>/* chart styles */</style>
</head>
<body>
<div id="chart"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
// chart code here
</script>
</body>
</html>

3. Apply the margin convention

const width = 800, height = 500;
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const innerWidth  = width  - margin.left - margin.right;
const innerHeight = height - margin.top  - margin.bottom;

const svg = d3.select("#chart")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

4. Define scales

// Continuous → continuous
const xScale = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([0, innerWidth]);
// Time
const xTime  = d3.scaleUtc().domain(d3.extent(data, d => d.date)).range([0, innerWidth]);
// Ordinal / categorical
const xBand  = d3.scaleBand().domain(data.map(d => d.name)).range([0, innerWidth]).padding(0.1);
// Color
const color  = d3.scaleOrdinal(d3.schemeTableau10);

5. Draw shapes using data join

svg.selectAll("rect")
  .data(data)
  .join("rect")
    .attr("x", d => xBand(d.name))
    .attr("y", d => yScale(d.value))
    .attr("width", xBand.bandwidth())
    .attr("height", d => innerHeight - yScale(d.value))
    .attr("fill", d => color(d.name));

6. Add axes

svg.append("g").attr("transform", `translate(0,${innerHeight})`).call(d3.axisBottom(xBand));
svg.append("g").call(d3.axisLeft(yScale).ticks(6).tickFormat(d3.format(",.0f")));

7. Add interactivity (tooltips, zoom, brush)

See Patterns & Recipes and the bundled HTML examples.

Key Concepts Quick Reference

External Resources

• Official docs: https://d3js.org/
• API index: https://d3js.org/api
• Gallery (Observable): https://observablehq.com/@d3/gallery
• GitHub: https://github.com/d3/d3
• CDN: https://cdn.jsdelivr.net/npm/d3@7/+esm
• npm: npm install d3

دانلود ZIP