Archivi categoria: chart

4 marzo OPEN DATA DAY: cosa fare con gli occhiali di facebook?

ANNULLATA

nuova data da stabilire

____________________________________
WHY – Perchè:
Allargare l’utilizzo ed i dati raccolti da Facebook tracking exposed, mostrare e condividere la consapevolezza dell’esistenza di algoritmi personalizzati, mostrare alcuni casi d’uso dei dati di facebook tracking exposed e del comune di Bologna.

Open data per i diritti umani

Continua la lettura di 4 marzo OPEN DATA DAY: cosa fare con gli occhiali di facebook?

Grafici su mobile, rappresentazioni di dati con d3.js responsive!

ci sono due vie:

-ridisegnare tutto al cambiamento della finestra o meglio, scrivere in js già pensando che la pagina sarà responsive.

Oppure:

-usare hw  o vh , ovvero misure calcolate in base alla finestra nei css3

.attr(“width”, “100hw”)
.attr(“height”, “auto”)

-css3 media query con differenti transform:scale(0.5);

Oppure:

-usare svg come vanno usate (ma non tutti i browser sono d’accordo):

https://www.w3.org/TR/SVG/coords.html#IntrinsicSizinghttps://www.w3.org/TR/SVGTiny12/coords.html#ViewBoxAttribute

_________SPIEGAZIONE:

allora, la domanda che ci facevamo l’altro giorno è come avere i grafici fatti con D3 e  in rwd.

La risposta numero uno è scriverli pensandoli responsive.

Ammettendo che non li hai scritti tu ,ma vuoi una soluzione rapida ed indolore… ho tre trucchi che funzionano al momento:

il primo è settare l’svg iniziale su hw e/o hv, che sono due misure css3 relativamente nuove ma adottate da tutti i browser.

Da 1 a 100 ti misurano la larghezza/altezza della pagina.
quindi 50hw, significa: fammelo metà della grandezza della finestra.
Quindi nel js del grafico, gli vai ad aggiungere:

var svg = d3.select("body").append("svg")
.attr("width", "100hw")
.attr("height", "auto")
.append("g")

ES: http://albero.redup.xyz/bubble/datascuole/index3.html

Se dal tuo browser non funge, fammi sapere che browser e versione è , perchè a me risulta che vada su tutto.

Secondo trick:

Usare le mediaquery e transform:scale(0.5);
Significa fammelo uguale nelle proporzioni, ma grande la metà.
E’ più macchinoso perchè deve decidere tu gli scatti.
es, se hai una svg di 900px per 900px, puoi decidere che sotto i 900px la fai grande la metà , quindi a 450px,
e poi con un’altra media query decidi che sotto i 450px la fai grande un quarto, quindi arrivi a 225px e quindi visualizzabile su tutto.
Se vuoi essere visto anche da browser “arretrati”, ricordati di copiare 3 volte la regola css che gli dai ed aggiungergli i prefissi:
-webkit-transform, -o-transform, -moz-transform
Io lo faccio principalmente principalmente per gli android 4.0 che sono ancora stra diffusi ed usano un webkit vecchio.

es:

@media screen and (max-width: 900px){
svg{
transform:scale(0.5);
-webkit-transform:scale(0.5);
margin: -25%;
}
}
@media screen and (max-width: 450px){
svg{
transform:scale(0.2);
-webkit-transform:scale(0.2);
margin: -70%;

}
#legend:after{content:"torna a visualizzarlo con un PC o scaricalo come pdf";}
}

Terzo paciugo a cui ho pensato ,ma poi non ho applicato perchè mi sembra un po troppo sporco, rimane quindi una ipotesi:
metto un iframe, con dentro uno dei grafici, ma senza regole di viewport nei meta. Quindi verra fatto vedere in miniatura dentro alla sua finestra e sarà possibile zommarlo a mano, come un sito non responsive :P

///////////////

Letture:

https://www.safaribooksonline.com/blog/2014/02/17/building-responsible-visualizations-d3-js/

http://blog.webkid.io/responsive-chart-usability-d3/

http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive

http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

Plugin WP che utilizza chart.js

URCA.. però funziona a shortCODE che fa molto molto strano.. non è molto proponibile a persone esterne.. Ecco il risultato della demo:

[wp_charts title="linechart" type="line" align="alignright" margin="5px" datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four" scaleoverride="true" scalesteps="5" scalestepwidth="10" scalestartvalue="0"]

 

Ecco cosa bisogna scrivere per vedere quello sopra:

wp_charts title="linechart" type="line" align="alignright" margin="5px" datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four" scaleoverride="true" scalesteps="5" scalestepwidth="10" scalestartvalue="0"