Des données visuelles plus faciles dans le navigateur avec les tableaux de variance

 année, bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 

 
Données de bacon
     année    

 et ajoutez les styles suivants à un style.css fichier:

.conteneur largeur: 50%; marge: auto 60px;  .container chart width: 100%; hauteur: 400px; 

Notez quelques choses ici:

• Le balisage graphique ressemble beaucoup à HTML. En fait, il s’agit d’un XML valide utilisé par Variance pour construire notre diagramme à barres. Nous avons également utilisé ce marquage personnalisé pour envelopper les données CSV. Nous référons cet élément CSV dans le graphique étiquette.
• échelle-y-linéaire nous dit quelle devrait être l’échelle de la direction y. Dans notre cas, notre ensemble de données va à 16 000, mais commence à 20 points..
• guide-x / guide-y crée un repère sur les axes respectifs.
•  boucle sur nos données et crée des éléments en fonction de chaque point de données.
• annotation est une étiquette qui peut être placée autour d'un élément particulier, tel qu'un bar. Les accolades vous permettent d’afficher une donnée; dans notre cas, année est dans notre CSV, donc nous pouvons facilement sortir année.
• bar crée un élément de barre, et longueur de la cartedéfinit la largeur de la barre  lardons cartes vers le CSV.

Génial! Maintenant, comment pouvons-nous le rendre moins laid?

Styliser le graphique

Pour styliser le graphique, nous appelons simplement les éléments normaux en CSS. Les éléments de barre du graphique sont des éléments DOM normaux au niveau du bloc et sont positionnés à l'aide de flexbox. Nous allons ajouter quelques styles à notre CSS, qui devrait alors ressembler à ceci:.

corps color: # 3f130c; hauteur: 100%; famille de polices: sans-serif; background-image: url (… /bg.jpg); taille du fond: couverture; position de fond: centre; répétition de fond: non répétée; attachement de fond: fixe;  h1, h2, h3, h4 font-family: Tauri, sans-serif;  .container width: 50%; position: relative; background-image: url (… /bg-blur.jpg); taille du fond: couverture; position de fond: centre; répétition de fond: non répétée; attachement de fond: fixe; marge: auto 100px; rembourrage: 100px;  .bacon-chart position: relative; z-index: 999;  .bacon-chart h3 margin: 0 0 1em;  .container: after background-color: rgba (255,255,255,0,4); position: absolue; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; contenu:"";  .container chart width: 100%; hauteur: 400px;  .bacon-chart bar background-color: rgba (96,28,18,0,7); bordure: aucune; 

Remarque: nous avons ajouté une police Google au fichier d'index au-dessus de notre lien style.css:

Nous avons inclus un petit bonus ici: l'effet "fenêtre floue" peut être vu créé entre les éléments container et body. Pour ce faire, nous utilisons une seconde image de fond..

Nous avons maintenant un graphique plus utile. Mais ça va beaucoup, beaucoup mieux.

Animation et infobulles

Il est temps de prendre des précautions, en commençant par quelques info-bulles sur les barres. Pour démarrer, nous allons ajouter une nouvelle annotation pour chaque barre, afin que notre balise graphique ressemble à ceci:

    année bacons   

Après cela, nous ajouterons de nouveaux styles à notre CSS, ce qui permettra d’obtenir des effets de survol intéressants et des transitions simples pour l’aide:

.bacon-chart couleur d'arrière-plan: rgba (96,28,18,0,7); bordure: aucune; marge: 0! important;  datum débordement: caché;  .tooltip width: auto; hauteur: auto; couleur de fond: # 444; couleur: #fff; opacité: 0; à gauche: -100%; taille de police: .6em; -webkit-transition: tous les fichiers .4; -moz-transition: tous les 0,4; -ms-transition: tous les 0,4; -o-transition: tous les 0,4; transition: tous .4; rembourrage: 6px;  donnée: hover background-color: rgba (255,255,255,0.1);  date: survol .tooltip display: block; opacité: 1; gauche: 0; 

Animation

Enfin, nous souhaitons animer nos barres. Nous y parviendrons avec une animation par images clés:

@ -webkit - images clés barsIn 0% en bas: -100%;  100% en bas: 0; 

Que nous appliquerons ensuite à notre élément barre:

.bacon - barre graphique fond - couleur: rgba (96, 28, 18, 0,7); marge: 0! important; bordure: aucune; hauteur: 0; - webkit - animation: barsIn 1s; 

Ceci peut également être accompli en utilisant quelque chose comme-webkit-transform: échelle (1, 0), mais nous voulions le garder aussi simple que possible. Vous devez également vous assurer que vous ajoutez les préfixes appropriés si nécessaire.

Plus sur la variance

Variance explique très bien des exemples plus complexes et fournit un excellent index de documentation. Vous constaterez que Variance est capable de visualisations beaucoup plus complexes. Nous aborderons brièvement certains des points principaux.

Variance utilise les noms de différentes parties principales d’un graphique pour faciliter sa construction, notamment: point,point, intervalle, bar, boîte à moustaches, et ligne. Chacun de ceux-ci ont leurs propres entrées déterminables. Ceux-ci peuvent tous être utilisés en combinaison les uns avec les autres, et peuvent être créés de manière itérative avec le répéter bloc.

Variance peut également utiliser des données liées, ce qui permet des visualisations gérées par des API contenant des informations mises à jour de manière dynamique..

Conclusion

Aujourd'hui, vous avez appris à créer un graphique stylé, entièrement déclaratif, à l'aide de graphiques de variance. Afin de vous aider à démarrer rapidement, nous avons laissé de côté une grande partie des fonctionnalités disponibles dans Variance, alors assurez-vous de vérifier par vous-même.!

Photo de Bacon par jeffreyww sur Flickr, modifiée. Creative Commons 2.0