Trei biblioteci. Trei filosofii fundamental diferite. Aceeași problemă pe masă — cum prezinți datele într-un produs web sau într-un raport interactiv. D3, Plotly, Vega — comparația dintre cele trei nu e o competiție pentru un singur câștigător. E o discuție despre tradeoff-uri care depind de proiect, de echipă, de cât de departe vrei să mergi cu personalizarea.

Articolul ăsta evită prezentările entuziaste din documentația oficială. Aici sunt observații după proiecte reale unde fiecare a fost folosit în production.

visualization libraries: De ce contează diferența

O echipă de produs vrea graficele dintr-un dashboard SaaS. Un analist financiar vrea rapoarte interactive în Jupyter. Un specialist BI vrea vizualizări pentru documentare. Aceste trei scenarii cer biblioteci diferite, deși toate se învârt în jurul „vizualizare de date”.

Greșeala comună e să alegi pe baza popularității în comunitate. „D3 e cel mai folosit, deci D3″ e un raționament care duce frecvent la proiecte care durează de două ori mai mult decât trebuie. Filosofiile sunt diferite și asta înseamnă productivitate diferită pe scenarii diferite.

D3.js: control total, productivitate scăzută

D3 e creat de Mike Bostock în 2011, conceput ca toolkit low-level pentru manipulare DOM bazată pe date. Filosofia: nu îți dă diagrame gata făcute, îți dă mecanisme pentru a le construi de la zero.

Asta înseamnă ce sună: dacă vrei un bar chart simplu, scrii 80-150 linii de cod. Dacă vrei un sankey diagram personalizat sau un chord chart artistic, scrii cod, dar ai control absolut asupra fiecărui pixel.

Pentru cine merită D3:

• Echipe care construiesc vizualizări custom inexistente în biblioteci standard. New York Times, Bloomberg, FT — toate au folosit D3 pentru lucruri unice.
• Produse SaaS unde vizualizările sunt diferențiator competitiv real, nu „și grafice”.
• Dezvoltatori care vor să înțeleagă profund grammar of graphics aplicată în SVG/Canvas.

Pentru cine NU merită D3:

• Analiști care vor grafice rapide pentru rapoarte interne. Vei pierde două săptămâni învățând ce ai face în Plotly în două ore.
• Echipe mici fără un specialist front-end. Costul mental e mare; debugging-ul cu transitions și scales scapă pentru începători.
• Proiecte unde graficele se schimbă des — adăugarea unei noi metrici cere modificare în cod, nu în config.

Un exemplu concret de bar chart minimal în D3 v7:

const svg = d3.select("svg")
    .attr("width", 600)
    .attr("height", 400);

const x = d3.scaleBand()
    .domain(data.map(d => d.category))
    .range([40, 580])
    .padding(0.1);

const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .range([380, 20]);

svg.selectAll("rect")
    .data(data)
    .join("rect")
    .attr("x", d => x(d.category))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => 380 - y(d.value))
    .attr("fill", "steelblue");

// + axe, legendă, tooltip... încă 100+ linii

Pentru un bar chart standard, e mai mult cod decât pentru o aplicație CRUD simplă. Asta e prețul pentru control total.

Plotly: productivitate înaltă, personalizare medie

Plotly are o filosofie opusă. „Iată o sută de tipuri de grafice. Configurează prin obiect JSON. Funcționează out-of-the-box.”

Disponibil în Python, R, Julia, JavaScript. Aceeași API funcțională indiferent de limbaj — un avantaj real pentru echipe poliglote. Integrare nativă în Jupyter notebooks; Plotly Dash extinde la aplicații web complete.

Pentru cine merită Plotly:

• Data scientists care vor grafice interactive direct în notebook-uri, fără bagaj front-end.
• Echipe care construiesc dashboard-uri analytics pentru utilizare internă — Dash e mai rapid decât React + D3 cu un factor de 5-10x.
• Rapoarte HTML standalone — Plotly poate exporta grafice interactive în HTML auto-conținut, util pentru distribuție.
• Cazuri unde tooltip-urile, zoom-ul și pan-ul implicite sunt suficiente — și sunt suficiente în 80% din scenarii.

Pentru cine NU merită Plotly:

• Produse SaaS cu cerințe estetice stricte. Plotly poate fi personalizat, dar până la un punct. La acel punct, încerci să forțezi biblioteca să facă lucruri pentru care nu e gândită.
• Aplicații cu volume foarte mari de date (peste 100k puncte pe un singur grafic). Performanța degradează vizibil.
• Vizualizări non-standard. Plotly are zeci de tipuri, dar dacă vrei ceva ce nu există în catalog, e dificil să-l adaugi.

Bar chart echivalent în Plotly Python:

import plotly.express as px

fig = px.bar(data, x='category', y='value',
             title='Vânzări pe categorie',
             color='category')
fig.show()

Patru linii. Cu tooltip-uri, axe, legendă, zoom — toate funcționează default. Diferența față de D3 e categorie de mărime.

Vega și Vega-Lite: grammar of graphics ca JSON

Vega și Vega-Lite vin din lumea academică. Concept: descrii ce vrei să vezi prin specificație declarativă JSON, nu prin cod imperativ. Sub capotă, Vega generează rendering-ul.

Vega-Lite e versiunea mai concisă, suficientă pentru 90% din cazuri standard. Vega complet permite customizări mai avansate.

Integrarea cu Python prin Altair (wrapper Python peste Vega-Lite) a popularizat substanțial Vega în comunitatea data science. Documentația Vega-Lite e una dintre cele mai bune din spațiu.

Pentru cine merită Vega:

• Echipe care vor o grammar of graphics consistentă cu ggplot2 din R, dar accesibilă din Python sau direct JSON.
• Proiecte unde specificațiile de grafice trebuie generate programatic — JSON e mai ușor de manipulat decât cod imperativ.
• Integrare în aplicații web fără să scrii cod JavaScript — definiția JSON poate fi servită direct de backend.
• Educație și cercetare — sintaxa declarativă forțează gândirea în termeni de mapări (data → vizual), nu de pixeli.

Pentru cine NU merită Vega:

• Echipe care vor productivitate maximă cu efort minim. Plotly are catalog mai mare și defaults mai bune vizual.
• Proiecte cu vizualizări foarte custom. Vega permite extensii, dar curba e abruptă comparativ cu D3.
• Echipe fără cunoștințe de grammar of graphics. Conceptul în sine cere ajustare mentală.

Bar chart în Vega-Lite (specificație JSON):

{
  "data": { "values": [...] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Cinci câmpuri. Declarativ. Dacă schimbi de la bar la line, modifici un cuvânt. Dacă schimbi axele, schimbi o referință. Asta e puterea grammar of graphics.

Performanță în production: cifre reale

Pe un bar chart cu 1000 de bare:

• D3 cu SVG: render în 80-150 ms, interacțiuni instant. Cu Canvas (D3 oferă suport), sub 30 ms.
• Plotly cu WebGL: 100-200 ms, interacțiuni fluide. Plotly trece automat la WebGL când datasetul depășește anumite praguri.
• Vega/Vega-Lite: 150-300 ms render inițial. Interacțiuni rezonabile, dar nu la fel de fluide ca D3 custom.

Pe scatter plot cu 50.000 de puncte:

• D3 cu Canvas — singura opțiune viabilă pe această dimensiune. 200-400 ms render.
• Plotly cu WebGL — funcționează, dar interacțiuni încep să tremure pe browser-e mai lente. 500-1000 ms render.
• Vega — degradează vizibil. Pentru volume mari, nu e instrumentul potrivit.

Pe scenarii streaming (date care se actualizează la fiecare secundă):

• D3 are control pe ce se redă și ce nu. Pentru aplicații real-time financiare, e standardul.
• Plotly cu Plotly.react() funcționează, dar mai puțin eficient.
• Vega — nu e construit pentru update-uri frecvente la rate mari.

Estetica default — diferență deseori subestimată

Plotly are estetică „business modern” — culori safe, fonturi standard, layout aerisit. Pentru rapoarte interne, look-ul default e acceptabil. Pentru produs final, nu sclipește.

Vega/Vega-Lite are estetică „academică” — paletă inspirată din ggplot2, font implicit serif sau sans-serif minimalist. Util în publicații, mai puțin în produse SaaS.

D3 nu are estetică default. Tu o construiești. Asta înseamnă efort și control. New York Times și Bloomberg arată cum poate fi rezultatul — dar bugetele lor pentru un singur grafic depășesc bugetul anual al unei echipe medii pentru toate vizualizările.

Curbele de învățare

Plotly e accesibil în ore. Un developer Python sau JavaScript poate scrie prima vizualizare în 30 de minute, primul dashboard funcțional într-o zi. Documentația e generoasă, exemplele acoperă scenarii reale.

Vega/Vega-Lite cere câteva zile pentru a internaliza grammar of graphics. Cei cu fundal R/ggplot2 trec instant. Ceilalți au nevoie de tranziție mentală.

D3 cere săptămâni. Conceptele de scales, selections, transitions, joins — toate sunt non-triviale. Cărțile despre D3 sunt 400+ pagini. Asta nu e accident.

Scenarii reale și recomandări

Câteva cazuri tipice cu recomandare directă.

Dashboard analytics pentru produs SaaS B2B. Plotly Dash sau Streamlit cu Plotly. Productivitate maximă, costul de development mic. Dacă produsul devine flagship și diferențiatorul e vizualizare, migrare ulterioară la React + D3 sau React + lib intermediare (Recharts, Visx).

Rapoarte interactive HTML pentru clienți finali. Plotly export to HTML. Standalone files care funcționează offline, fără infrastructură. Format larg compatibil.

Notebook-uri Jupyter pentru analiză exploratorie. Altair (Vega-Lite Python) dacă vrei grammar of graphics; Plotly dacă vrei catalog maxim și interactivitate; matplotlib (deși nu e în comparația noastră) rămâne standardul pentru rapoarte statice.

Vizualizări custom pentru jurnalism de date. D3. Fără excepție. Catalogul Plotly și Vega nu e suficient pentru ce face NYT cu un grafic.

Aplicație web cu vizualizări multiple care se schimbă des. Vega-Lite dacă specificațiile pot fi generate programatic. Plotly dacă echipa nu vrea să învețe grammar of graphics. D3 doar dacă există resurse front-end dedicate.

Aplicație trading sau monitorizare real-time. D3 cu Canvas sau biblioteci specializate (TradingView Charts, Lightweight Charts). Plotly și Vega nu sunt optime pentru rate mari de update.

Combinații care funcționează

În practică, multe echipe folosesc două biblioteci. Plotly pentru 90% din vizualizări standard, D3 pentru 10% care necesită custom. Vega-Lite în notebook pentru explorare, Plotly în production pentru dashboard.

Combinația cea mai puțin recomandată — D3 + Plotly în aceeași aplicație. Stiluri diferite, paradigme diferite, mentenanță dublu costisitoare. Mai bine alegi una și extinzi.

Tema se leagă natural de discuția despre tooluri Data Analyst, unde am intrat în detaliu pe pattern-urile pe care le observăm în piață. În fond, visualization libraries nu e doar un concept tehnic — este o decizie de business cu impact direct pe productivitatea echipei.

Outlook pentru 2027-2028

Direcțiile vizibile în comunitate:

• D3 evoluează lent. v7 din 2021 a fost ultimul update major; comunitatea construiește biblioteci derivate (Observable Plot, Visx) care simplifică D3 fără să-l înlocuiască.
• Plotly continuă expansiunea catalogului, cu focus pe Dash și pe AI-assisted dashboard generation.
• Vega-Lite primește integrare mai bună cu LLM-uri — generare automată de specificații din descriere în limbaj natural funcționează deja la nivel demo.

Tendința generală — vizualizările generate automat din descrieri devin viabile pentru cazuri simple. Pentru ce contează cu adevărat — explainer-uri vizuale complexe, dashboard-uri custom diferențiate, jurnalism de date — încă e nevoie de specialiști care să cunoască instrumentele bine.

Alegerea între D3, Plotly și Vega nu e despre care e „cel mai bun”. E despre care îți rezolvă problema concretă cu cost minim de development și mentenanță. Răspunsul corect variază. Singura greșeală e să alegi pe baza popularității, nu a fit-ului cu problema.

În practică, visualization libraries a trecut de la subiect de roadmap la prioritate operațională pentru echipele care livrează rezultate de business — exact tipul de tracțiune pe care o vedem reflectată în deciziile reale de buget. Pentru cititorii care lucrează zilnic cu visualization libraries, articolul rămâne deschis pentru update-uri pe măsură ce piața evoluează.

Întrebări frecvente

Când merită D3.js?

Când vizualizarea e ea însăși produsul: echipe care construiesc vizualizări custom inexistente în bibliotecile standard — New York Times, Bloomberg și Financial Times au folosit D3 pentru asta — sau produse SaaS unde graficele sunt un diferențiator competitiv real. Costul e productivitatea: un bar chart simplu înseamnă 80-150 de linii de cod.

Când NU merită D3?

Când vrei grafice rapide pentru rapoarte interne — pierzi două săptămâni învățând ce ai face în Plotly în două ore. La fel, în echipe mici fără specialist front-end, și în proiecte unde graficele se schimbă des, pentru că fiecare metrică nouă cere modificare în cod, nu în configurare.

Pentru cine e Plotly?

Pentru data scientists care vor grafice interactive direct în notebook-uri, fără bagaj front-end; pentru echipe care construiesc dashboard-uri interne, unde Dash e mai rapid decât React plus D3 cu un factor de 5-10x; și pentru rapoarte HTML autonome. Limitele apar la cerințe estetice stricte, la peste 100.000 de puncte pe un singur grafic și la vizualizări care nu există în catalog.