{"id":579,"date":"2019-08-05T09:36:00","date_gmt":"2019-08-05T09:36:00","guid":{"rendered":"https:\/\/2020.innosystec.de\/?p=579"},"modified":"2020-12-17T09:37:48","modified_gmt":"2020-12-17T09:37:48","slug":"visualisation-2-go","status":"publish","type":"post","link":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/","title":{"rendered":"Visualisation 2 Go."},"content":{"rendered":"\n<p>In einem Umfeld, in dem die Tools f\u00fcr die Software-Entwicklung so schnell abgel\u00f6st werden wie im Web-Development, spricht es schon f\u00fcr sich seit fast 10 Jahren auf dem Markt zu sein. D3.js ist beliebt und weit verbreitet. Aber allgegenw\u00e4rtig zu sein ist nicht alles. \u00dcberzeugt euch also selbst:<\/p>\n\n\n\n<p>d3.select(&#8222;body&#8220;)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; .data([10,20,30,40,50])<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; .enter()<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .append(&#8218;div&#8216;)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .style(&#8222;background-color&#8220;, &#8222;red&#8220;)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .style(&#8222;max-width&#8220;, d =&gt; d + &#8222;px&#8220;)<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .text(d =&gt; d);<\/p>\n\n\n\n<p>Das ist der komplette Code, der ben\u00f6tigt wird, um ein Balkendiagramm mit D3.js zu erstellen. Keine expliziten Schleifen, keine repetitiven Aufrufe, kein Boiler Plate. Das Ergebnis sieht noch nicht unbedingt modern oder sch\u00f6n aus, aber das l\u00e4sst sich schnell und einfach anpassen (inline oder im CSS).<\/p>\n\n\n\n<p>Ebenso ist D3.js um s\u00e4mtliche Funktionalit\u00e4ten, die man sich im Web-Kontext ausdenken kann, erweiterbar. Im Gegensatz zu anderen Frameworks, die limitierte und vorgefertigte Komponenten ausgeben, stellt D3.js s\u00e4mtliche Freiheiten bereit, die sich ein Entwickler w\u00fcnschen kann. So kann beispielsweise auf Knopfdruck das obige Balkendiagramm mittels fl\u00fcssiger Animation in ein Kuchendiagramm transferiert werden. Klingt kompliziert? Kein Problem, es wurde bereits implementiert, gut dokumentiert und ver\u00f6ffentlicht. In den unendlichen Weiten des Internets gibt es unz\u00e4hlige Beispiel-Implementierungen von D3.js, die (fast) alle W\u00fcnsche zur Visualisierung von Daten abdecken.<\/p>\n\n\n\n<p>Gute Nachrichten gibt es auch f\u00fcr Entwickler, die die Arbeit mit TypeScript bevorzugen. Ein Typing f\u00fcr D3.js gibt es auch \u2026it&#8217;s up to you.<\/p>\n\n\n\n<p><strong><em>npm -i d3<\/em><\/strong><\/p>\n\n\n\n<p>Have fun. Enjoy coding.<\/p>\n\n\n\n<p>Your INNO coding team.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In einem Umfeld, in dem die Tools f\u00fcr die Software-Entwicklung so schnell abgel\u00f6st werden wie im Web-Development, spricht es schon f\u00fcr sich seit fast 10 Jahren auf dem Markt zu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-579","post","type-post","status-publish","format-standard","hentry","category-unkategorisiert"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Visualisation 2 Go. &#8211; INNOSYSTEC GmbH<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualisation 2 Go. &#8211; INNOSYSTEC GmbH\" \/>\n<meta property=\"og:description\" content=\"In einem Umfeld, in dem die Tools f\u00fcr die Software-Entwicklung so schnell abgel\u00f6st werden wie im Web-Development, spricht es schon f\u00fcr sich seit fast 10 Jahren auf dem Markt zu [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/\" \/>\n<meta property=\"og:site_name\" content=\"INNOSYSTEC GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/INNOSYSTECGmbH\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T09:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-17T09:37:48+00:00\" \/>\n<meta name=\"author\" content=\"w3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"w3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/\"},\"author\":{\"name\":\"w3\",\"@id\":\"https:\\\/\\\/innosystec.de\\\/#\\\/schema\\\/person\\\/ec4a25292c357bcb3202696c6976cae1\"},\"headline\":\"Visualisation 2 Go.\",\"datePublished\":\"2019-08-05T09:36:00+00:00\",\"dateModified\":\"2020-12-17T09:37:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/\"},\"wordCount\":305,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/innosystec.de\\\/#organization\"},\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/\",\"url\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/\",\"name\":\"Visualisation 2 Go. &#8211; INNOSYSTEC GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/innosystec.de\\\/#website\"},\"datePublished\":\"2019-08-05T09:36:00+00:00\",\"dateModified\":\"2020-12-17T09:37:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innosystec.de\\\/de\\\/blog\\\/visualisation-2-go\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/innosystec.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualisation 2 Go.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/innosystec.de\\\/#website\",\"url\":\"https:\\\/\\\/innosystec.de\\\/\",\"name\":\"INNOSYSTEC GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/innosystec.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/innosystec.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/innosystec.de\\\/#organization\",\"name\":\"INNOSYSTEC GmbH\",\"url\":\"https:\\\/\\\/innosystec.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/innosystec.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.innosystec.de\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.innosystec.de\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"INNOSYSTEC GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/innosystec.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/INNOSYSTECGmbH\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/innosystec\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/innosystec.de\\\/#\\\/schema\\\/person\\\/ec4a25292c357bcb3202696c6976cae1\",\"name\":\"w3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g\",\"caption\":\"w3\"},\"sameAs\":[\"http:\\\/\\\/localhost:8888\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visualisation 2 Go. &#8211; INNOSYSTEC GmbH","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/","og_locale":"de_DE","og_type":"article","og_title":"Visualisation 2 Go. &#8211; INNOSYSTEC GmbH","og_description":"In einem Umfeld, in dem die Tools f\u00fcr die Software-Entwicklung so schnell abgel\u00f6st werden wie im Web-Development, spricht es schon f\u00fcr sich seit fast 10 Jahren auf dem Markt zu [&hellip;]","og_url":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/","og_site_name":"INNOSYSTEC GmbH","article_publisher":"https:\/\/www.facebook.com\/INNOSYSTECGmbH\/","article_published_time":"2019-08-05T09:36:00+00:00","article_modified_time":"2020-12-17T09:37:48+00:00","author":"w3","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"w3","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/#article","isPartOf":{"@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/"},"author":{"name":"w3","@id":"https:\/\/innosystec.de\/#\/schema\/person\/ec4a25292c357bcb3202696c6976cae1"},"headline":"Visualisation 2 Go.","datePublished":"2019-08-05T09:36:00+00:00","dateModified":"2020-12-17T09:37:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/"},"wordCount":305,"commentCount":0,"publisher":{"@id":"https:\/\/innosystec.de\/#organization"},"articleSection":["Unkategorisiert"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/","url":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/","name":"Visualisation 2 Go. &#8211; INNOSYSTEC GmbH","isPartOf":{"@id":"https:\/\/innosystec.de\/#website"},"datePublished":"2019-08-05T09:36:00+00:00","dateModified":"2020-12-17T09:37:48+00:00","breadcrumb":{"@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.innosystec.de\/de\/blog\/visualisation-2-go\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/innosystec.de\/de\/"},{"@type":"ListItem","position":2,"name":"Visualisation 2 Go."}]},{"@type":"WebSite","@id":"https:\/\/innosystec.de\/#website","url":"https:\/\/innosystec.de\/","name":"INNOSYSTEC GmbH","description":"","publisher":{"@id":"https:\/\/innosystec.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/innosystec.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/innosystec.de\/#organization","name":"INNOSYSTEC GmbH","url":"https:\/\/innosystec.de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/innosystec.de\/#\/schema\/logo\/image\/","url":"https:\/\/www.innosystec.de\/wp-content\/uploads\/2026\/05\/logo.svg","contentUrl":"https:\/\/www.innosystec.de\/wp-content\/uploads\/2026\/05\/logo.svg","width":1,"height":1,"caption":"INNOSYSTEC GmbH"},"image":{"@id":"https:\/\/innosystec.de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/INNOSYSTECGmbH\/","https:\/\/www.linkedin.com\/company\/innosystec\/"]},{"@type":"Person","@id":"https:\/\/innosystec.de\/#\/schema\/person\/ec4a25292c357bcb3202696c6976cae1","name":"w3","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4700db5dfb8049e827291b223a31aaa5977edf9aa60f4527c6aae87814d721b4?s=96&d=mm&r=g","caption":"w3"},"sameAs":["http:\/\/localhost:8888"]}]}},"_links":{"self":[{"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/posts\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/comments?post=579"}],"version-history":[{"count":1,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/posts\/579\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/posts\/579\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/media?parent=579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/categories?post=579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innosystec.de\/de\/wp-json\/wp\/v2\/tags?post=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}