|
/
|
visualizing<span class="text-[var(--accent-color)]">.org</span>
|
|
|
/
|
Home
|
|
|
/chart-types
|
Chart Types
|
|
|
/bar-chart
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><rect x="14" y="20" width="14" height="35" fill="#c94a2e"></rect><rect x="32" y="10" width="14" height="45" fill="#c94a2e"></rect><rect x="50" y="30" width="14" height="25" fill="#c94a2e"></rect><rect x="68" y="22" width="14" height="33" fill="#c94a2e"></rect><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Bar chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When the question is comparing magnitudes across categories — not how tasks unfold over time. The Gantt’s ancestor.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Comparison</span>
|
|
|
/line-graph
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><polyline points="4,50 20,38 36,44 52,20 68,26 84,8 100,14" fill="none" stroke="#c94a2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Line chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">Use a line chart when you want to track a single metric over time — burndown, velocity, spend — instead of a roster of tasks.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time Series</span>
|
|
|
/cumulative-flow-diagram
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><path d="M0,55 L20,48 L40,40 L60,30 L80,18 L100,8 L100,55 Z" fill="#c94a2e" opacity="0.85"></path><path d="M0,55 L20,52 L40,46 L60,40 L80,32 L100,22 L100,55 Z" fill="#e8c4b8"></path><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Cumulative flow diagram</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">For agile teams: stacked areas show how much work is in each workflow state over time. A flow-based cousin of the Gantt.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Project</span>
|
|
|
/calendar-heatmap
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><rect x="4" y="4" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="12" y="4" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="20" y="4" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="28" y="4" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="36" y="4" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="44" y="4" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="52" y="4" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="60" y="4" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="68" y="4" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="76" y="4" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="84" y="4" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="92" y="4" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="4" y="11" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="12" y="11" width="6" height="6" fill="#c94a2e" fill-opacity="0.6"></rect><rect x="20" y="11" width="6" height="6" fill="#1a1a18" fill-opacity="0.7"></rect><rect x="28" y="11" width="6" height="6" fill="#f5ede9" fill-opacity="0.8"></rect><rect x="36" y="11" width="6" height="6" fill="#e8c4b8" fill-opacity="0.9"></rect><rect x="44" y="11" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="52" y="11" width="6" height="6" fill="#1a1a18" fill-opacity="0.6"></rect><rect x="60" y="11" width="6" height="6" fill="#f5ede9" fill-opacity="0.7"></rect><rect x="68" y="11" width="6" height="6" fill="#e8c4b8" fill-opacity="0.8"></rect><rect x="76" y="11" width="6" height="6" fill="#c94a2e" fill-opacity="0.9"></rect><rect x="84" y="11" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="92" y="11" width="6" height="6" fill="#f5ede9" fill-opacity="0.6"></rect><rect x="4" y="18" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="12" y="18" width="6" height="6" fill="#1a1a18" fill-opacity="0.7"></rect><rect x="20" y="18" width="6" height="6" fill="#f5ede9" fill-opacity="0.9"></rect><rect x="28" y="18" width="6" height="6" fill="#e8c4b8" fill-opacity="0.6"></rect><rect x="36" y="18" width="6" height="6" fill="#c94a2e" fill-opacity="0.8"></rect><rect x="44" y="18" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="52" y="18" width="6" height="6" fill="#f5ede9" fill-opacity="0.7"></rect><rect x="60" y="18" width="6" height="6" fill="#e8c4b8" fill-opacity="0.9"></rect><rect x="68" y="18" width="6" height="6" fill="#c94a2e" fill-opacity="0.6"></rect><rect x="76" y="18" width="6" height="6" fill="#1a1a18" fill-opacity="0.8"></rect><rect x="84" y="18" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="92" y="18" width="6" height="6" fill="#e8c4b8" fill-opacity="0.7"></rect><rect x="4" y="25" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="12" y="25" width="6" height="6" fill="#f5ede9" fill-opacity="0.8"></rect><rect x="20" y="25" width="6" height="6" fill="#e8c4b8" fill-opacity="0.6"></rect><rect x="28" y="25" width="6" height="6" fill="#c94a2e" fill-opacity="0.9"></rect><rect x="36" y="25" width="6" height="6" fill="#1a1a18" fill-opacity="0.7"></rect><rect x="44" y="25" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="52" y="25" width="6" height="6" fill="#e8c4b8" fill-opacity="0.8"></rect><rect x="60" y="25" width="6" height="6" fill="#c94a2e" fill-opacity="0.6"></rect><rect x="68" y="25" width="6" height="6" fill="#1a1a18" fill-opacity="0.9"></rect><rect x="76" y="25" width="6" height="6" fill="#f5ede9" fill-opacity="0.7"></rect><rect x="84" y="25" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="92" y="25" width="6" height="6" fill="#c94a2e" fill-opacity="0.8"></rect><rect x="4" y="32" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="12" y="32" width="6" height="6" fill="#e8c4b8" fill-opacity="0.9"></rect><rect x="20" y="32" width="6" height="6" fill="#c94a2e" fill-opacity="0.8"></rect><rect x="28" y="32" width="6" height="6" fill="#1a1a18" fill-opacity="0.7"></rect><rect x="36" y="32" width="6" height="6" fill="#f5ede9" fill-opacity="0.6"></rect><rect x="44" y="32" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="52" y="32" width="6" height="6" fill="#c94a2e" fill-opacity="0.9"></rect><rect x="60" y="32" width="6" height="6" fill="#1a1a18" fill-opacity="0.8"></rect><rect x="68" y="32" width="6" height="6" fill="#f5ede9" fill-opacity="0.7"></rect><rect x="76" y="32" width="6" height="6" fill="#e8c4b8" fill-opacity="0.6"></rect><rect x="84" y="32" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="92" y="32" width="6" height="6" fill="#1a1a18" fill-opacity="0.9"></rect><rect x="4" y="39" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="12" y="39" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="20" y="39" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="28" y="39" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="36" y="39" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="44" y="39" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="52" y="39" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="60" y="39" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="68" y="39" width="6" height="6" fill="#e8c4b8" fill-opacity="0.5"></rect><rect x="76" y="39" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="84" y="39" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="92" y="39" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="4" y="46" width="6" height="6" fill="#c94a2e" fill-opacity="0.5"></rect><rect x="12" y="46" width="6" height="6" fill="#1a1a18" fill-opacity="0.6"></rect><rect x="20" y="46" width="6" height="6" fill="#f5ede9" fill-opacity="0.7"></rect><rect x="28" y="46" width="6" height="6" fill="#e8c4b8" fill-opacity="0.8"></rect><rect x="36" y="46" width="6" height="6" fill="#c94a2e" fill-opacity="0.9"></rect><rect x="44" y="46" width="6" height="6" fill="#1a1a18" fill-opacity="0.5"></rect><rect x="52" y="46" width="6" height="6" fill="#f5ede9" fill-opacity="0.6"></rect><rect x="60" y="46" width="6" height="6" fill="#e8c4b8" fill-opacity="0.7"></rect><rect x="68" y="46" width="6" height="6" fill="#c94a2e" fill-opacity="0.8"></rect><rect x="76" y="46" width="6" height="6" fill="#1a1a18" fill-opacity="0.9"></rect><rect x="84" y="46" width="6" height="6" fill="#f5ede9" fill-opacity="0.5"></rect><rect x="92" y="46" width="6" height="6" fill="#e8c4b8" fill-opacity="0.6"></rect></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Calendar heatmap</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When the question is “how busy is each day?” rather than “which tasks are running when?”. Best for ongoing operational work.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time Series</span>
|
|
|
/area-chart
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><path d="M4,50 L20,40 L36,44 L52,22 L68,28 L84,12 L100,18 L100,55 L4,55 Z" fill="#c94a2e" opacity="0.85"></path><line x1="0" y1="55" x2="100" y2="55" stroke="#1a1a18" stroke-width="0.5" stroke-opacity="0.15"></line></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Area chart</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When the headline is the cumulative size of a single time series — spend, hours logged, story points completed — not the per-task plan.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Time Series</span>
|
|
|
/sankey-diagram
|
<div class="h-[72px] mb-4 flex items-center justify-center"><svg viewbox="0 0 100 60" width="100" height="60"><path d="M4,12 C40,12 60,30 96,30" stroke="#c94a2e" stroke-width="6" fill="none" opacity="0.7"></path><path d="M4,28 C40,28 60,40 96,40" stroke="#e8c4b8" stroke-width="6" fill="none"></path><path d="M4,46 C40,46 60,50 96,50" stroke="#1a1a18" stroke-width="6" fill="none" opacity="0.4"></path></svg></div><p class="text-[14px] font-medium text-[var(--ink)] mb-1">Sankey diagram</p><p class="text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]">When the question is how work flows between phases or how resources move across a process — not how it unfolds on a calendar.</p><span class="inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]">Flow</span>
|
|
|
/lexis-diagram
|
Timeline<!-- --> <span>→</span>
|
|
|
/node-link-diagram
|
PERT chart<!-- --> <span>→</span>
|
|
|
/cumulative-flow-diagram
|
Kanban board<!-- --> <span>→</span>
|
|
|
/line-graph
|
Burndown chart<!-- --> <span>→</span>
|
|
|
/bar-chart
|
Milestone chart<!-- --> <span>→</span>
|
|
|
/funnel-chart
|
<span class="text-[var(--accent-color)]">←</span> Previous: Funnel chart
|
|
|
/gauge-chart
|
Next: Gauge chart <span class="text-[var(--accent-color)]">→</span>
|
|
|
/
|
visualizing<span class="text-[var(--accent-color)]">.org</span>
|
|
|
/privacy
|
Privacy Policy
|
|
|
/terms
|
Terms & Conditions
|
|
|
/contact
|
Contact Us
|
|
