Composant · Données

Density2DChart

Stable

Densité 2D non-géographique sur axes numériques (heatmap binned, façon Tableau/Dataiku density). Les points (x, y) sont agrégés dans une grille régulière bins×bins sur l'étendue des données ; la couleur d'une cellule encode la densité (somme des poids) normalisée sur l'échelle continue category1..8. Axes gradués (ticks « nice ») et légende Low→High.

Exemples

Deux foyers de concentration ressortent en clair sur la rampe, le bruit dispersé reste froid.

Densité des observations

[0–0.7] × [0–0.7]: 1
[2.9–3.6] × [0–0.7]: 2
[3.6–4.3] × [0–0.7]: 1
[7.1–7.9] × [0–0.7]: 1
[2.9–3.6] × [0.7–1.4]: 2
[4.3–5] × [0.7–1.4]: 2
[1.4–2.1] × [1.4–2.1]: 1
[4.3–5] × [1.4–2.1]: 1
[5.7–6.4] × [1.4–2.1]: 1
[6.4–7.1] × [1.4–2.1]: 1
[7.9–8.6] × [1.4–2.1]: 2
[8.6–9.3] × [1.4–2.1]: 1
[0–0.7] × [2.1–2.9]: 1
[1.4–2.1] × [2.9–3.6]: 1
[2.9–3.6] × [2.9–3.6]: 11
[3.6–4.3] × [2.9–3.6]: 12
[4.3–5] × [2.9–3.6]: 15
[8.6–9.3] × [2.9–3.6]: 1
[9.3–10] × [2.9–3.6]: 1
[0–0.7] × [3.6–4.3]: 2
[2.9–3.6] × [3.6–4.3]: 13
[3.6–4.3] × [3.6–4.3]: 17
[4.3–5] × [3.6–4.3]: 17
[5–5.7] × [3.6–4.3]: 2
[6.4–7.1] × [3.6–4.3]: 1
[7.1–7.9] × [3.6–4.3]: 1
[8.6–9.3] × [3.6–4.3]: 2
[0–0.7] × [4.3–5]: 1
[2.9–3.6] × [4.3–5]: 14
[3.6–4.3] × [4.3–5]: 12
[4.3–5] × [4.3–5]: 10
[9.3–10] × [4.3–5]: 1
[5.7–6.4] × [5–5.7]: 1
[7.1–7.9] × [5–5.7]: 1
[0.7–1.4] × [5.7–6.4]: 1
[3.6–4.3] × [5.7–6.4]: 1
[6.4–7.1] × [5.7–6.4]: 5
[7.1–7.9] × [5.7–6.4]: 16
[7.9–8.6] × [5.7–6.4]: 10
[8.6–9.3] × [5.7–6.4]: 2
[3.6–4.3] × [6.4–7.1]: 1
[5–5.7] × [6.4–7.1]: 1
[6.4–7.1] × [6.4–7.1]: 3
[7.1–7.9] × [6.4–7.1]: 17
[7.9–8.6] × [6.4–7.1]: 21
[8.6–9.3] × [6.4–7.1]: 1
[1.4–2.1] × [7.1–7.9]: 1
[2.1–2.9] × [7.1–7.9]: 1
[6.4–7.1] × [7.1–7.9]: 2
[7.1–7.9] × [7.1–7.9]: 7
[7.9–8.6] × [7.1–7.9]: 14
[8.6–9.3] × [7.1–7.9]: 2
[9.3–10] × [7.1–7.9]: 1
[2.1–2.9] × [7.9–8.6]: 1
[1.4–2.1] × [8.6–9.3]: 1
[2.1–2.9] × [8.6–9.3]: 1
[2.9–3.6] × [8.6–9.3]: 2
[2.1–2.9] × [9.3–10]: 1
[2.9–3.6] × [9.3–10]: 1
[3.6–4.3] × [9.3–10]: 1
[5.7–6.4] × [9.3–10]: 1
[6.4–7.1] × [9.3–10]: 1

Voir le code (Svelte)

<Density2DChart
  label="Densité des observations"
  width={600}
  height={300}
  bins={14}
  data={[{"x":4.19411211143905,"y":3.598529577533961},{"x":4.084583998231489,"y":4.974183798755605},{"x":4.344370842606002,"y":4.058405876652527},{"x":4.739787102555757,"y":4.830653191465258},{"x":3.1491193772056696,"y":4.994746268724439},{"x":3.419267654614182,"y":3.3867092730415562},{"x":4.985520244569294,"y":3.118068218286181},{"x":3.7681289318800575,"y":3.0605070591254657},{"x":3.1439869926050243,"y":4.347368509204764},{"x":4.848026991751057,"y":4.619157553473095},{"x":4.482447386478283,"y":3.127425909101696},{"x":4.236237347701675,"y":3.991917133793196},{"x":3.4077973367682644,"y":4.7846379884447146},{"x":3.137826204364107,"y":4.605465234073561},{"x":3.29268836988727,"y":3.054410994078224},{"x":4.432976596724696,"y":4.477575779649231},{"x":4.726425648539525,"y":4.635241032408197},{"x":4.671703816238653,"y":4.485014439320664},{"x":3.072395801577901,"y":3.678019106703819},{"x":3.300547838351013,"y":4.317709267753041},{"x":3.7661552432766907,"y":3.59882354764213},{"x":4.580371857425371,"y":3.625778198533588},{"x":4.748897553304628,"y":4.116172791047102},{"x":3.401126861759055,"y":3.924011290503671},{"x":4.148119688568693,"y":3.830238104253187},{"x":3.5966727736390536,"y":4.680532217808316},{"x":4.201582670771323,"y":3.7065312865686284},{"x":4.43489527769149,"y":4.173738241742243},{"x":3.798929930105307,"y":4.147460699615749},{"x":3.474716902000232,"y":3.1724985242693213},{"x":4.182569146706988,"y":4.050133705628166},{"x":3.9094095234337307,"y":3.590004921234215},{"x":3.9038095478451855,"y":3.1592950821664627},{"x":4.542374671223747,"y":3.4047086240745656},{"x":3.2413032652071228,"y":4.700352311926126},{"x":4.207736969556537,"y":4.235137940028281},{"x":4.864421845350611,"y":3.4973831179073933},{"x":3.9608650211993908,"y":3.7870330814211783},{"x":4.263179779640948,"y":4.360435486473346},{"x":3.463260650850488,"y":3.3840942980647526},{"x":4.234667659380785,"y":3.0007224082950144},{"x":3.566302829685762,"y":4.553885579832777},{"x":4.532658100841873,"y":3.8641877178401627},{"x":3.73431444202285,"y":4.018557072160093},{"x":3.5078396799544986,"y":3.5847611430030133},{"x":4.68697404940006,"y":3.5654854777108342},{"x":4.189442158299238,"y":3.1177124977659956},{"x":4.751328051905766,"y":4.374230623885166},{"x":3.8969843391780667,"y":3.3483307363224823},{"x":4.654951394374925,"y":3.5763282778562644},{"x":3.4428405763780887,"y":3.910259306854689},{"x":4.549544096714605,"y":3.7280766967349113},{"x":3.002094984055541,"y":3.8422563610795217},{"x":3.2166827918108005,"y":4.981045664279277},{"x":3.5553569796287254,"y":4.152086258471052},{"x":4.185811997012148,"y":4.797464371564549},{"x":4.442182541565123,"y":4.948884964896778},{"x":3.5134334566599845,"y":3.4535160066809114},{"x":3.9908733968580483,"y":3.78862834013469},{"x":4.572438956039231,"y":4.013167143339835},{"x":4.887988806650037,"y":4.5575149066548395},{"x":4.008027792446328,"y":4.830240965741799},{"x":3.779113531475474,"y":4.168625593729608},{"x":4.777295828693219,"y":3.92459750218531},{"x":3.675304174737681,"y":4.488171339728018},{"x":4.7972352513099255,"y":4.748385191777901},{"x":3.3607404233704976,"y":3.491738140812022},{"x":3.681347370464982,"y":3.098661899612593},{"x":3.2724691034632127,"y":4.323136687894881},{"x":4.630907059475271,"y":3.471029281835551},{"x":4.104898512877942,"y":3.570881605414153},{"x":3.3712480069935546,"y":4.202494443022877},{"x":4.285620213153595,"y":4.83451891030861},{"x":4.8236565598396846,"y":3.4902462961572436},{"x":4.362394810357315,"y":3.238106250873816},{"x":4.64670807199865,"y":3.668895006491288},{"x":3.6238005164190197,"y":4.386723757435905},{"x":3.221626520260063,"y":4.689406693768412},{"x":3.7103738788097975,"y":3.551369667309974},{"x":4.22381687221295,"y":3.9463434223767107},{"x":4.111893654387394,"y":4.863900185499293},{"x":3.8990182880773294,"y":4.965172768554265},{"x":3.1486673355794825,"y":4.169106543608525},{"x":4.300513983378426,"y":3.325493574294026},{"x":4.215749562352779,"y":4.533650875805715},{"x":4.171130657741395,"y":3.1027159691335244},{"x":4.791022837996028,"y":3.9514505867620233},{"x":3.8671829704508105,"y":4.651251078420901},{"x":4.511647463548765,"y":3.314872980264422},{"x":4.798583329561438,"y":3.6496896746799767},{"x":3.1946039200735297,"y":3.437913000787568},{"x":3.1277617216705167,"y":4.525221288914429},{"x":4.531877279994952,"y":4.156397581638954},{"x":3.0254971981167316,"y":3.8135078478667457},{"x":4.630073309703764,"y":3.888085127290378},{"x":3.3663537503994787,"y":3.440504849162188},{"x":3.320551514774818,"y":4.197145641407531},{"x":4.163355351036114,"y":3.6228833201447888},{"x":4.315924168245831,"y":3.2470250130850005},{"x":4.708696902593922,"y":3.218646288019906},{"x":4.9802840361279825,"y":3.279773712288483},{"x":3.51683050418125,"y":3.1794764996410705},{"x":4.380943120168961,"y":3.874709606577973},{"x":4.357274532950146,"y":3.0632967949208325},{"x":3.1222625375363338,"y":3.0009139776234113},{"x":3.240565233975912,"y":3.985804558259344},{"x":3.123118400631062,"y":4.973139823401878},{"x":3.626665115648259,"y":3.3055324555866106},{"x":3.4251194598270205,"y":3.6468399766119384},{"x":3.9343408350527014,"y":4.02657306242109},{"x":4.960501194913173,"y":4.419983387654639},{"x":4.193972111304277,"y":3.3155789376774703},{"x":3.5658403041613473,"y":4.586730242514392},{"x":4.501825571759523,"y":3.995751619802672},{"x":3.1740229130601616,"y":4.451785386284714},{"x":4.487385750509512,"y":3.1187105179385797},{"x":3.226079046831503,"y":3.637470126448884},{"x":3.4408591987755424,"y":3.520766198877602},{"x":4.274544001219116,"y":4.113662004989415},{"x":4.710825205645908,"y":4.081399202850368},{"x":8.29041022122391,"y":6.761320531722773},{"x":7.196379363628281,"y":6.96630285725291},{"x":7.769105196357288,"y":6.79377865828284},{"x":8.162873507087525,"y":7.480149508211831},{"x":7.930421114401157,"y":7.0334637169882015},{"x":8.319794893879347,"y":6.490830660094894},{"x":8.375916720077356,"y":6.748734712949365},{"x":8.315583468096136,"y":7.43803525037972},{"x":8.40246701305847,"y":7.298966646799336},{"x":7.822114229585098,"y":6.056138277079975},{"x":8.056947038069808,"y":6.1245101094825705},{"x":7.9066630457093305,"y":6.052484393144252},{"x":8.432294294905054,"y":6.018257081517138},{"x":8.273996571672148,"y":7.263297021977277},{"x":7.065869510204471,"y":6.657476887413057},{"x":7.157611608578643,"y":6.77452258801764},{"x":7.076329052483816,"y":6.513082131982354},{"x":7.315983176378525,"y":6.6348628255700985},{"x":8.174154699395483,"y":7.167959869451803},{"x":8.388109148195063,"y":6.543926418080892},{"x":8.231011808491782,"y":6.813138664147416},{"x":7.7677735689877405,"y":6.191508472054968},{"x":7.860912785334937,"y":6.790132284532363},{"x":7.142127752370261,"y":6.405141636917899},{"x":7.0149772763322,"y":6.253472903861419},{"x":7.475252926570946,"y":6.457698405002104},{"x":7.796819031609604,"y":7.477886260244011},{"x":7.795879364384282,"y":6.869999885964207},{"x":8.36271095339335,"y":7.397807121927761},{"x":8.39858245914736,"y":6.840027809534234},{"x":8.113332748931523,"y":6.131598472656496},{"x":7.227542922006707,"y":6.709329754444458},{"x":8.397075683529058,"y":6.9752125744592455},{"x":7.030356884016822,"y":6.287668744236076},{"x":8.126702309179446,"y":7.177259445738634},{"x":8.087889671832272,"y":7.185939789370606},{"x":7.613148689555539,"y":6.061243057279495},{"x":7.326869055780987,"y":7.005116612187175},{"x":8.034815907960207,"y":6.670858025863235},{"x":7.925962567760592,"y":6.347347855729678},{"x":7.437279865349308,"y":6.019814193257975},{"x":8.31737897792709,"y":7.408116996944005},{"x":7.147755563327928,"y":6.590014681494802},{"x":7.500154018635002,"y":7.154736042560421},{"x":8.323024273534783,"y":6.170835971911827},{"x":7.311315104510316,"y":6.165937095957779},{"x":8.015176371212664,"y":6.475300848705368},{"x":7.763581097481577,"y":7.472383082598626},{"x":7.371081829243844,"y":7.022390842913832},{"x":8.478452206346416,"y":7.447441578585394},{"x":7.97206831023659,"y":7.027964115621505},{"x":7.87304830591802,"y":7.253338337528211},{"x":7.961299419850716,"y":6.820951939011436},{"x":8.189580441075181,"y":6.7690129283671325},{"x":7.160064220503003,"y":6.421862170296657},{"x":8.494375766019512,"y":7.293186665183486},{"x":8.49617338250213,"y":6.985495090943526},{"x":7.222440242870916,"y":6.995262668000191},{"x":7.406162798593828,"y":7.491449654796836},{"x":7.951901674713894,"y":6.298672914644086},{"x":8.424863145418866,"y":6.776193917159081},{"x":7.262463629367977,"y":7.1307304953833714},{"x":7.060919404058214,"y":6.063258335023773},{"x":7.539553433907942,"y":7.032264858964954},{"x":8.21516621169409,"y":6.188904404728163},{"x":7.868115589426884,"y":6.908642471259759},{"x":7.822708070661271,"y":6.2364980579523825},{"x":7.741828427064153,"y":6.558472395203296},{"x":7.231531858552029,"y":6.996380612718118},{"x":7.444888889996749,"y":6.213936388592206},{"x":7.161817893461239,"y":7.265119761817679},{"x":7.766485929846058,"y":7.269264937038191},{"x":8.31338763298159,"y":7.414753676119611},{"x":7.290800809995644,"y":7.439118192269987},{"x":7.287269413604992,"y":6.687710389815136},{"x":7.452514052601771,"y":6.890263438639353},{"x":7.147182822296015,"y":6.130155488909295},{"x":7.664961368155182,"y":6.253609567998726},{"x":8.43414671785857,"y":6.986696541768823},{"x":8.023655951499778,"y":6.088974773925251},{"x":7.901231393637709,"y":6.68870580228451},{"x":7.287019610538622,"y":6.195851728411323},{"x":7.960861236304446,"y":6.097759723708853},{"x":7.90948061687382,"y":7.284923136832623},{"x":7.987752259237577,"y":6.844295561706785},{"x":7.195430576892305,"y":6.3393865676314505},{"x":7.155139416528465,"y":6.159854069426588},{"x":7.005393385889658,"y":6.048642079135702},{"x":7.8497568074845505,"y":6.165080666618925},{"x":7.68392579289336,"y":6.055099189307121},{"x":9.061628882336258,"y":1.5339803702821864},{"x":3.348937334189628,"y":1.1070716386228203},{"x":9.958585803377716,"y":7.550575736700825},{"x":0.09655237202372047,"y":4.419529700847123},{"x":8.344109062265655,"y":1.8651223191363375},{"x":1.9983413824803855,"y":9.254662398833158},{"x":9.685077671746294,"y":4.804382326455965},{"x":7.5839805638343005,"y":6.077766421287212},{"x":8.316440586148035,"y":6.677627566586075},{"x":6.728649142537568,"y":3.5888290421985225},{"x":7.920703891627818,"y":1.4720153815448356},{"x":3.652859033855078,"y":9.818032984537089},{"x":9.304447178404986,"y":2.8859710706798225},{"x":1.6412162788404228,"y":3.19927245527472},{"x":5.660299065364665,"y":6.980589631470195},{"x":3.8292729872415183,"y":6.720036271363514},{"x":8.949464563722474,"y":6.05626941009251},{"x":8.75219703128198,"y":6.766022446922038},{"x":4.7139108202950615,"y":1.34380221429458},{"x":9.048351351659909,"y":4.023497106518362},{"x":3.1889271750994617,"y":1.2784218794100088},{"x":2.813618482469403,"y":7.572990659425497},{"x":9.02720570984632,"y":5.9277594117111345},{"x":6.4694607287968795,"y":7.831798795532342},{"x":2.6181519043716377,"y":8.854566816638489},{"x":5.481702091862309,"y":4.101654293062936},{"x":0.007010698321746056,"y":2.4725976271892884},{"x":5.083684327585476,"y":3.6458802240183017},{"x":6.774780753429411,"y":9.460680489177202},{"x":3.0196499838585265,"y":0.20025491723802635},{"x":3.9555289987267592,"y":0.10201692585927291},{"x":2.8813770054287167,"y":0.6024575236264884},{"x":1.4772537357533602,"y":7.377983931162388},{"x":1.6114997871273662,"y":1.5812686093064345},{"x":5.9970992831499785,"y":1.6529345520087213},{"x":6.2795427470838385,"y":9.809418921270138},{"x":9.172396664122305,"y":7.332797053890674},{"x":3.6914396303200347,"y":6.158480647093841},{"x":6.940951350583207,"y":6.605257991051888},{"x":6.889681819309333,"y":7.266879085109979},{"x":0.25638103497046094,"y":0.487094186473216},{"x":0.27382388723726564,"y":3.870832735612445},{"x":2.604361773749982,"y":9.490114454873892},{"x":2.8716290010472894,"y":9.164234404062961},{"x":8.927851919516852,"y":3.701711894805409},{"x":6.613484624127618,"y":1.8995440015101543},{"x":3.2387080803693773,"y":9.128093723733022},{"x":7.237663272413268,"y":5.565509798734221},{"x":6.240234377905836,"y":5.1856040978737195},{"x":3.8734817522920117,"y":2.893161775028874},{"x":3.508987428391812,"y":9.94062424168951},{"x":0.41286468525084885,"y":4.084339441770846},{"x":7.650178674445572,"y":0.2934825421746273},{"x":9.280303981751345,"y":7.328051332071448},{"x":7.317832711766396,"y":4.033592941255119},{"x":0.7267510894344892,"y":6.1379233031244596},{"x":4.484593870343917,"y":1.2536501890298213},{"x":4.847390951983347,"y":1.4978420741380387},{"x":2.644115985671112,"y":8.3776140252024},{"x":9.231762890346237,"y":2.9785203947585637}]}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`Density2DPoint[]`	–	Points { x, y, weight? } à agréger.
`bins`	`number`	`12`	Nombre de bins par axe (grille bins×bins).
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`size`	`number`	–	Alias de width (largeur du viewBox).
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

Density2DPoint = { x: number; y: number; weight?: number }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Rampe de densité (Low→High).
`--st-semantic-border-subtle`	Axes X et Y.
`--st-semantic-surface-default`	Trait de séparation des cellules.
`--st-semantic-text-secondary`	Étiquettes des axes.