Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

SVG3DCAMEMBERT


Information sur la source

Catégorie :Graphique Classé sous : svg, 3d, camembert, Statistique, Graphique Niveau : Initié Date de création : 12/03/2008 Vu / téléchargé: 4 142 / 237

Note :
10 / 10 - par 5 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

Description

Ayant constaté depuis peu que les tracés générés en SVG (Scalable Vector Graphics) étaient anti-aliassés, j'ai eu l'idée de reprendre mon script d'adresse :
http://www.phpcs.com/codes/SMOOTH-3D-CAMEMBERT_39291.aspx
et de l'adapter à cette "nouvelle" technologie; ne pas avoir à se préoccuper de l'Anti-Aliasing, c'est en effet faire l'économie d'un nombre important de lignes de code et d'un temps non moins important passé à articuler tout çà; on peut dès lors se focaliser à 100% sur l'algorithme : que du bonheur, vous dis-je!
D'autre part, quand on sait que SVG est un standard W3C, qu'il s'écrit en XML, que son arbre s'insère tout naturellement dans celui du DOM, et qu'on peut le "mixer" sans difficulté majeure avec (X)HTML, JAVASCRIPT, XSLT et CSS (il a d'ailleurs été prévu pour çà!), on est en droit de se poser la question :
mais que demande le peuple?
J'ai commencé par faire une version PHP+Ajax de cette appli, proche en fait du script indiqué plus haut. Puis ayant remarqué les possibilités importantes d'interaction avec l'utilisateur, j'ai pensé qu'un code entièrement en JavaScript était la meilleure solution, avec éventuellement une partie en "Ajax" pour rapatrier des données depuis un serveur distant.
Ah, j'allais l'oublier : ce script ne tourne pas sous IE, c'est pourtant pas faute d'essayer, IE, via le plug-in Adobe SVG Viewer (ASV pour les intimes), ne semblant pas supporter le code SVG "inline" injecté directement dans une page xhtml.
Il est prévu que MicroSoft intègre SVG dans son prochain navigateur, aussi, en attendant ces jours meilleurs, je me suis contenté d'une démo pour vous présenter ma classe SVG3DCamembert et un aperçu des possibilités d'interaction offertes par SVG.

La démo en ligne (à tester donc avec FireFox) :
http://michel.vanthodiep.free.fr/svg3dcamembert/index.xhtml

Un document utile à potasser :
http://www.yoyodesign.org/doc/w3c/w3c.html#svg1

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Maniacfr le 13/03/2008 12:26:28

Impressionnant !
Reste plus que IE supporte les normes W3C correctement ! :)

signaler à un administrateur
Commentaire de opossum_farceur le 13/03/2008 21:44:14

Ceci dit, je ne suis pas vraiment certain d'avoir exploré toutes les pistes existantes pour que ce script puisse s'exécuter sous IE.
Quelques liens pour les téméraires que cette aventure pourrait tenter :

http://wiki.svg.org/Inline_SVG
http://www.schepers.cc/inlinesvg.html
http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml
http://www.carto.net/papers/svg/network_requests/index.shtml

Note : le dernier lien est surtout utile pour son fichier "helper_functions.js"

A++

signaler à un administrateur
Commentaire de coucou747 le 14/03/2008 09:15:42 10/10

je dois dire que je suis impressione :)
10/10 direct !
j'avais tente de faire des choses du genre en php, mais c'etait imparfait.

signaler à un administrateur
Commentaire de opossum_farceur le 14/03/2008 15:34:51

@coucou747,

Merci pour la note.
En PHP il existe la source dont l'adresse est indiquée plus haut dans la description, et dont la source ici présente "dérive" directement.
Le problème avec PHP, c'est l'interactivité, qui, malgré l'utilisation d'Ajax, est quasi-nulle et en tout cas toujours "lourde" puisque nécessitant à chaque fois une connection au serveur. SVG+JavaScript apporte à ce problème une réponse lumineuse; le seul point faible à mon avis c'est l'approche dûe au tandem IE+ASV, qui transforme toute intégration dans une page xhtml en un véritable calvaire.

A++

signaler à un administrateur
Commentaire de dgdg le 20/03/2008 20:30:28 10/10

tout simplement excellent !!!
Ca fait plaisir :=)

signaler à un administrateur
Commentaire de pierrefab le 21/03/2008 15:28:36 10/10

Excellent ! çà faisait q je voulais le faire.
Merci

signaler à un administrateur
Commentaire de cuq le 25/03/2008 14:02:53

Terrible. dommage que ce soit pas portable sous IE

signaler à un administrateur
Commentaire de malalam le 06/04/2008 09:08:21 administrateur CS 10/10

Hello,

très joli résultat, et très intéressante idée : moderne :-)
Bravo, beau travail Opposum.

signaler à un administrateur
Commentaire de opossum_farceur le 07/04/2008 00:42:34

Hé oh, çà manque un peu de critiques, là sur cette page!
Un lien que j'avais oublié, et que l'on peut rajouter à la liste présente un peu plus haut :

http://blog.pothoven.net/2006/05/inline-dynamic-svg-from-xml-with-ajax.html

A++

signaler à un administrateur
Commentaire de wackybacky le 17/04/2008 16:41:07 10/10

Superbe résultat! SVG ouvre de grandes possibilités, dommage que IE soit encore et toujours en dehors des standards. Merci pour la demo! 10/10 sans hésiter

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

graphique camembert [ par bob ] bonsoir tout le monde je suis a la recherche d'un script qui me permettrait de faire un graphique camembert en forme de pourcentage d'aprés cert Graphique en javascript [ par g_barthe ] Bonjour, Je souhaite tracer des diagrammes genres courbes de fonction mathématiques(à 1 ou 2 variables avec des axes horizontaux, verticaux rafraichir une seule fois une image! [ par niko14 ] Bonjour tout le monde! Voila mon probleme! Je fais afficher un camembert dynamique sur une page qu ipeut etre different selon le budget choisi auparav interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface center le code dans un kit graphique [ par speedylol ] bonjour voici le probléme que je rencontre , j ai trouver un superbe kit graphique imbriquer de plusieur jeux de cadre et j'aimerais centrer mes page Graphisme en Javascript [ par Arto_8000 ] Quoique non standard la plupart des navigateurs supportent maintenant l'objet canvas en javascript pour faire du 2d/3d. Au niveau du 3d je doute que c scroll icons 3D [ par hugosk8 ] Bonjour sa fait 2 jour que je cherche un programme...Javais vue ce programme à m.net je sais pi si vous écoutier sa c'est a musique plus en tout les c cube 3d(besoin d'aide) [ par Tunis_khalifa ] je veux determiner les coordonees d un cube3d qui est en animation lors de l appui sur une touche existe t il une methode (ou un code ) qui peut resou amCharts et ajax [ par skalarache ] Bonjour,Je travaille actuellement sur un application web utilisant la technologie Ajax. L'objectif est de créer des graphiques (camemberts) avec des d


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,359 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.