Qualcuno sa come visualizzare un'immagine in scala di grigi, ovvero una matrice 2-D di intensità di pixel, utilizzando d3? Non riesco a trovare alcun esempio di esso ovunque, sarà difficile? Qualsiasi aiuto/link/suggerimenti apprezzato!D3: visualizzazione dell'immagine in scala di grigi guidata da dati di array 2D
Se si desidera solo visualizzare un'immagine, utilizzare lo image element e l'attributo "xlink: href". Per esempio:
svg.append("image")
.attr("xlink:href", "my.png")
.attr("width", 960)
.attr("height", 500);
Se si desidera colorare un'immagine in scala di grigi, poi vedono questo colorized heightmap example che utilizza quantili per creare una scala di colori divergenti, e con HCL interpolazione per una migliore percezione:
Se hai i tuoi dati in qualche altra rappresentazione, questi esempi potrebbero essere utili:
Infine, se si dispone di singoli campioni, piuttosto che un istogramma 2D precalcolate, avrete bisogno di bin i dati prima di generare una delle mappe di calore di cui sopra.
Molto bello, grazie per le informazioni. La heightmap è un bell'esempio di cosa stavo mirando. Fondamentalmente ho un array python 2-d con cui sto lavorando. Grazie per aver fornito d3 Michael! – reptilicus
Una domanda, perché l'immagine su http://bl.ocks.org/3074470 è liscia e non troppo pixelata. – reptilicus
Si prega di contrassegnare questa domanda come accettata se ho risposto alla tua domanda. Per la tua seconda domanda, l'immagine è liscia perché il browser ricampiona la tela (come qualsiasi altra immagine) quando viene visualizzata con una risoluzione non nativa. Potresti essere in grado di controllare questo comportamento tramite la proprietà di stile [image-rendering] (https://developer.mozilla.org/en-US/docs/CSS/Image-rendering). – mbostock
Sembra una mappa termica –
Sì, qualcosa del genere. Vedo alcuni link a d3 heatmaps, ma non immagini chiare finora. Sono un po 'sorpreso. . . – reptilicus
Cosa intendi per "semplice immagine"? –