.1 200 OK date: Thu, 02 Jul 2026 17:35:43 GMT server: mw-web.codfw.main-5b9465ddc4-sllrc x-content-type-options: nosniff content-language: en accept-ch: reporting-endpoints: csp-report-to-endpoint='/w/api.php?action=cspreport&format=json'; content-security-policy: script-src 'unsafe-eval' blob: 'self' meta.wikimedia.org *.wikimedia.org *.wikipedia.org *.wikinews.org *.wiktionary.org *.wikibooks.org *.wikiversity.org *.wikisource.org wikisource.org *.wikiquote.org *.wikidata.org *.wikifunctions.org *.wikivoyage.org *.mediawiki.org mediawiki.org wikimedia.org *.wmflabs.org *.wmcloud.org *.toolforge.org wss://*.toolforge.org *.jsdelivr.net unpkg.com cdnjs.cloudflare.com raw.githubusercontent.com *.github.com code.jquery.com cdn.mathjax.org use.typekit.net fonts.cdnfonts.com use.fontawesome.com i.ytimg.com rsms.me doi.org localhost https://localhost:* http://localhost:* wss://localhost:* ws://localhost:* *.google.com *.gstatic.com *.googleapis.com *.translate.yandex.net yastatic.net ya.ru radically.github.io cdn.sammdot.ca cdn.fontshare.com viaf.org publicai-proxy.alaexis.workers.dev iiif.archive.org api.flickr.com live.staticflickr.com api.anthropic.com api.openai.com api.publicai.co catalogo.pusc.it parsifal.urbe.it opac.sbn.it overpass-api.de api.openrouteservice.org archive.org *.openstreetmap.org *.waymarkedtrails.org *.thunderforest.com registry.ipe.wiki analytics.ipe.wiki qlever.dev app.goacoustic.com wikipedia-archive.ourworldindata.org api.inaturalist.org inaturalist-open-data.s3.amazonaws.com validator.w3.org db.onlinewebfonts.com fontlibrary.org 'unsafe-inline' auth.wikimedia.org; default-src 'self' data: blob: upload.wikimedia.org https://commons.wikimedia.org meta.wikimedia.org *.wikimedia.org *.wikipedia.org *.wikinews.org *.wiktionary.org *.wikibooks.org *.wikiversity.org *.wikisource.org wikisource.org *.wikiquote.org *.wikidata.org *.wikifunctions.org *.wikivoyage.org *.mediawiki.org mediawiki.org wikimedia.org *.wmflabs.org *.wmcloud.org *.toolforge.org wss://*.toolforge.org *.jsdelivr.net unpkg.com cdnjs.cloudflare.com raw.githubusercontent.com *.github.com code.jquery.com cdn.mathjax.org use.typekit.net fonts.cdnfonts.com use.fontawesome.com i.ytimg.com rsms.me doi.org localhost https://localhost:* http://localhost:* wss://localhost:* ws://localhost:* *.google.com *.gstatic.com *.googleapis.com *.translate.yandex.net yastatic.net ya.ru radically.github.io cdn.sammdot.ca cdn.fontshare.com viaf.org publicai-proxy.alaexis.workers.dev iiif.archive.org api.flickr.com live.staticflickr.com api.anthropic.com api.openai.com api.publicai.co catalogo.pusc.it parsifal.urbe.it opac.sbn.it overpass-api.de api.openrouteservice.org archive.org *.openstreetmap.org *.waymarkedtrails.org *.thunderforest.com registry.ipe.wiki analytics.ipe.wiki qlever.dev app.goacoustic.com wikipedia-archive.ourworldindata.org api.inaturalist.org inaturalist-open-data.s3.amazonaws.com validator.w3.org db.onlinewebfonts.com fontlibrary.org en.wikibooks.org en.wikinews.org en.wikiquote.org en.wikisource.org en.wikiversity.org en.wikivoyage.org en.wiktionary.org www.mediawiki.org commons.wikimedia.org foundation.wikimedia.org incubator.wikimedia.org species.wikimedia.org wikimania.wikimedia.org www.wikidata.org www.wikifunctions.org auth.wikimedia.org; style-src 'self' data: blob: upload.wikimedia.org https://commons.wikimedia.org meta.wikimedia.org *.wikimedia.org *.wikipedia.org *.wikinews.org *.wiktionary.org *.wikibooks.org *.wikiversity.org *.wikisource.org wikisource.org *.wikiquote.org *.wikidata.org *.wikifunctions.org *.wikivoyage.org *.mediawiki.org mediawiki.org wikimedia.org *.wmflabs.org *.wmcloud.org *.toolforge.org wss://*.toolforge.org *.jsdelivr.net unpkg.com cdnjs.cloudflare.com raw.githubusercontent.com *.github.com code.jquery.com cdn.mathjax.org use.typekit.net fonts.cdnfonts.com use.fontawesome.com i.ytimg.com rsms.me doi.org localhost https://localhost:* http://localhost:* wss://localhost:* ws://localhost:* *.google.com *.gstatic.com *.googleapis.com *.translate.yandex.net yastatic.net ya.ru radically.github.io cdn.sammdot.ca cdn.fontshare.com viaf.org publicai-proxy.alaexis.workers.dev iiif.archive.org api.flickr.com live.staticflickr.com api.anthropic.com api.openai.com api.publicai.co catalogo.pusc.it parsifal.urbe.it opac.sbn.it overpass-api.de api.openrouteservice.org archive.org *.openstreetmap.org *.waymarkedtrails.org *.thunderforest.com registry.ipe.wiki analytics.ipe.wiki qlever.dev app.goacoustic.com wikipedia-archive.ourworldindata.org api.inaturalist.org inaturalist-open-data.s3.amazonaws.com validator.w3.org db.onlinewebfonts.com fontlibrary.org 'unsafe-inline'; object-src 'none'; report-uri /w/api.php?action=cspreport&format=json; report-to csp-report-to-endpoint last-modified: Sun, 21 Jun 2026 22:10:17 GMT content-type: text/html; charset=UTF-8 age: 0 accept-ranges: bytes x-cache: cp2047 hit, cp2047 miss x-cache-status: hit-local server-timing: cache;desc="hit-local", host;desc="cp2047" strict-transport-security: max-age=106384710; includeSubDomains; preload report-to: { "group": "wm_nel", "max_age": 604800, "endpoints": [{ "url": "https://intake-logging.wikimedia.org/v1/events?stream=w3c.reportingapi.network_error&schema_uri=/w3c/reportingapi/network_error/1.0.0" }] } nel: { "report_to": "wm_nel", "max_age": 604800, "failure_fraction": 0.05, "success_fraction": 0.0} set-cookie: WMF-Last-Access=02-Jul-2026;Path=/;HttpOnly;secure;Expires=Mon, 03 Aug 2026 12:00:00 GMT set-cookie: WMF-Last-Access-Global=02-Jul-2026;Path=/;Domain=.wikipedia.org;HttpOnly;secure;Expires=Mon, 03 Aug 2026 12:00:00 GMT set-cookie: WMF-DP=712;Path=/;HttpOnly;secure;Expires=Fri, 03 Jul 2026 00:00:00 GMT x-client-ip: 75.28.18.94 cache-control: private, s-maxage=0, max-age=0, must-revalidate, no-transform vary: Accept-Encoding,X-Subdomain,Cookie,Authorization,User-Agent set-cookie: GeoIP=US:TX:McKinney:33.20:-96.62:v4; Path=/; secure; Domain=.wikipedia.org set-cookie: NetworkProbeLimit=0.001;Path=/;Secure;SameSite=None;Max-Age=3600 set-cookie: WMF-Uniq=A-ZejBarAbyxCZWnVm-6NgORAAAAAFvdZVaAla0WLE-OmlBU3EJos55tVlNbJdmx;Domain=.wikipedia.org;Path=/;HttpOnly;secure;SameSite=None;Expires=Fri, 02 Jul 2027 00:00:00 GMT transfer-encoding: chunked x-request-id: 7854c271-cc6b-47a8-9970-1566433359df x-analytics: 8000 D3.js - Wikipedia Jump to content Main menu Main menu move to sidebar hide Navigation Main page Contents Current events Random article About Wikipedia Contact us Contribute Help Learn to edit Community portal Recent changes Upload file Special pages Search Search Appearance Donate Create account Log in Personal tools Donate Create account Log in Contents move to sidebar hide (Top) 1 Context 2 Technical principles Toggle Technical principles subsection 2.1 Selections 2.2 Transitions 2.3 Data-binding 2.4 Appending nodes using data 3 Community 4 See also 5 References 6 Further reading 7 Related projects 8 External links Toggle the table of contents D3.js 17 languages Español Eesti فارسی Suomi Français Italiano 日本語 한국어 മലയാളം मराठी Nederlands Português Српски / srpski Svenska Türkçe Українська 中文 Edit links Article Talk English Read Edit View history Tools Tools move to sidebar hide Actions Read Edit View history General What links here Related changes Upload file Permanent link Page information Cite this page Get shortened URL Switch to legacy parser Print/export Download as PDF Printable version In other projects Wikimedia Commons Wikidata item Appearance move to sidebar hide From Wikipedia, the free encyclopedia Javascript library for data visualization "},"programming language":{"wt":"[[JavaScript]]"},"operating system":{"wt":""},"platform":{"wt":""},"size":{"wt":""},"language":{"wt":""},"language count":{"wt":"<!-- DO NOT include this parameter unless you know what it does -->"},"language footnote":{"wt":""},"genre":{"wt":"[[Data visualization]], [[JavaScript library]]"},"license":{"wt":"[[ISC license|ISC]]"},"website":{"wt":"{{URL|https://d3js.org/}}"},"standard":{"wt":""},"AsOf":{"wt":""}},"i":0}}]}'> Data-Driven Documents (D3.js) Developers Mike Bostock , Jason Davies, Jeffrey Heer , Vadim Ogievetsky, and community Release 18 February 2011 ; 15 years ago ( 2011-02-18 ) Stable release 7.9.0 [ 1 ] / 12 March 2024 ; 2 years ago ( 12 March 2024 ) Written in JavaScript Type Data visualization , JavaScript library License ISC Website d3js .org Repository github .com /d3 /d3 D3.js (also known as D3 , short for Data-Driven Documents ) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers . It makes use of Scalable Vector Graphics (SVG), HTML5 , and Cascading Style Sheets (CSS) standards. It is the successor to the earlier Protovis framework. [ 2 ] Its development was noted in 2011, [ 3 ] as version 2.0.0 was released in August 2011. [ 4 ] With the release of version 4.0.0 in June 2016, D3 was changed from a single library into a collection of smaller, modular libraries that can be used independently. [ 5 ] Context [ edit ] There have been various previous attempts to bring data visualization to web browsers. The most notable examples were the Prefuse, Flare, and Protovis toolkits, which can all be considered as direct predecessors of D3.js. [ citation needed ] Prefuse was a visualization toolkit created in 2005 that required usage of Java , and visualizations were rendered within browsers with a Java plug-in. Flare was a similar toolkit from 2007 that used ActionScript , and required a Flash plug-in for rendering. [ citation needed ] In 2009, based on the experience of developing and utilizing Prefuse and Flare, Jeffrey Heer , Mike Bostock , and Vadim Ogievetsky of Stanford University 's Stanford Visualization Group created Protovis, a JavaScript library to generate SVG graphics from data. The library was known to data visualization practitioners and academics. [ 6 ] In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Informed by experiences with Protovis, Bostock, along with Heer and Ogievetsky, developed D3.js to provide a more expressive framework that, at the same time, focuses on web standards and provides improved performance. [ 7 ] Technical principles [ edit ] The D3.js library uses pre-built functions to select elements, create SVG objects, style them, or add transitions, dynamic effects, or tooltips . These objects can also be styled using CSS. Large datasets can be bound to SVG objects using D3.js functions to generate text/graphic charts and diagrams. The data can be in various formats such as JSON , comma-separated values (CSV) or geoJSON , but, if required, JavaScript functions can be written to read other data formats. Selections [ edit ] The central principle of D3.js design is to enable the programmer to first use a CSS-style selector to select a given set of Document Object Model (DOM) nodes, then use operators to manipulate them in a similar manner to jQuery . [ 8 ] For example, one may select all HTML paragraph elements (represented by < p > ... < / p > ), and then change their text color, e.g. to lavender: elements\n .style(\"color\", \"lavender\") // set style \"color\" to value \"lavender\"\n .attr(\"class\", \"squares\") // set attribute \"class\" to value \"squares\"\n .attr(\"x\", 50); // set attribute \"x\" (horizontal position) to value 50px\n"}}'> d3 . selectAll ( "p" ) // select all <p> elements . style ( "color" , "lavender" ) // set style "color" to value "lavender" . attr ( "class" , "squares" ) // set attribute "class" to value "squares" . attr ( "x" , 50 ); // set attribute "x" (horizontal position) to value 50px The selection can be based on an HTML tag, class, identifier, attribute, or place in the hierarchy. Once elements are selected, one can apply operations to them. This includes getting and setting attributes, display texts, and styles (as in the above example). Elements may also be added and removed. This process of modifying, creating and removing HTML elements can be made dependent on data, which is the basic concept of D3.js. Transitions [ edit ] By declaring a transition, values for attributes and styles can be smoothly interpolated over a certain time. The following code will make all HTML < p > ... < / p > elements on a page gradually change their text color to pink: elements\n .transition(\"trans_1\") // transition with name \"trans_1\"\n .delay(0) // transition starting 0ms after trigger\n .duration(500) // transitioning for 500ms\n .ease(d3.easeLinear) // transition easing progression is linear...\n .style(\"color\", \"pink\"); // ... to color: pink\n"}}'> d3 . selectAll ( "p" ) // select all <p> elements . transition ( "trans_1" ) // transition with name "trans_1" . delay ( 0 ) // transition starting 0ms after trigger . duration ( 500 ) // transitioning for 500ms . ease ( d3 . easeLinear ) // transition easing progression is linear... . style ( "color" , "pink" ); // ... to color: pink Data-binding [ edit ] For more advanced uses, loaded data drives the creation of elements. D3.js loads a given dataset, then, for each of its elements, creates an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events). [ 9 ] [ 10 ] [ 11 ] // Data var countriesData = [ { name : "Ireland" , income : 53000 , life : 78 , pop : 6378 , color : "black" }, { name : "Norway" , income : 73000 , life : 87 , pop : 5084 , color : "blue" }, { name : "Tanzania" , income : 27000 , life : 50 , pop : 3407 , color : "grey" } ]; // Create SVG container var svg = d3 . select ( "#hook" ). append ( "svg" ) . attr ( "width" , 120 ) . attr ( "height" , 120 ) . style ( "background-color" , "#D0D0D0" ); // Create SVG elements from data svg . selectAll ( "circle" ) // create virtual circle template . data ( countriesData ) // bind data . join ( "circle" ) // joins data to the selection and creates circle elements for each individual data . attr ( "id" , function ( d ) { return d . name }) // set the circle's id according to the country name . attr ( "cx" , function ( d ) { return d . income / 1000 }) // set the circle's horizontal position according to income . attr ( "cy" , function ( d ) { return d . life }) // set the circle's vertical position according to life expectancy . attr ( "r" , function ( d ) { return d . pop / 1000 * 2 }) // set the circle's radius according to country's population . attr ( "fill" , function ( d ) { return d . color }); // set the circle's color according to country's color Generated SVG graphics are designed according to the provided data. Appending nodes using data [ edit ] Once a dataset is bound to a document, use of D3.js typically follows a pattern wherein an explicit .enter() function, an implicit "update," and an explicit .exit() function is invoked for each item in the bound dataset. Any methods chained after the .enter() command will be called for each item in the dataset not already represented by a DOM node in the selection (the previous selectAll() ). Likewise, the implicit update function is called on all existing selected nodes for which there is a corresponding item in the dataset, and .exit() is called on all existing selected nodes that do not have an item in the dataset to bind to them. The D3.js documentation provides several examples of how this works. [ 12 ] Community [ edit ] D3.js is a popular toolset used by many individuals and organizations for data visualization. Some organizations that use it include The New York Times , Airbnb , and MTV . [ 13 ] Mike Bostock created bl.ocks as a website for sharing D3 visualizations and code snippets, which used GitHub Gist to host the code. He later created Observable as a place where programmers could make and share visualizations. (Similar to bl.ocks but the code is all hosted on the observable site). There are also D3 communities on many programming sites like CodePen . See also [ edit ] Free and open-source software portal JavaScript framework JavaScript library Open-source software References [ edit ] ↑ "Release 7.9.0" . March 12, 2024 . Retrieved March 22, 2024 . ↑ "For Protovis Users" , Mbostock.github.com , archived from the original on August 6, 2012 , retrieved August 18, 2012 ↑ Myatt, Glenn J.; Johnson, Wayne P. (September 2011), "5.10 Further reading" , Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations , Hoboken, New Jersey: John Wiley & Sons , p. A–2, ISBN 978-0-470-53649-0 , retrieved January 23, 2013 ↑ "Release Notes" , D3.js , retrieved August 22, 2012 ↑ "Release v4.0.0 · d3/d3" . GitHub . June 28, 2016 . Retrieved December 27, 2021 . ↑ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Automated Classification, Analysisand Redesign of Chart Images" , ACM User Interface Software & Technology , retrieved January 23, 2013 ↑ Bostock, Ogievetsky & Heer 2011 ↑ Bostock, Ogievetsky & Heer 2011 , chap. 3 ↑ Bostock, Mike (February 5, 2012), Thinking with Joins ↑ "A Pen by Lopez Hugo" . Codepen.io . Archived from the original on March 22, 2016 . Retrieved August 1, 2016 . ↑ "Edit fiddle" . JSFiddle.net . Retrieved August 1, 2016 . ↑ "Three Little Circles" . Mbostock.github.io . Retrieved August 1, 2016 . ↑ "Why Industry Leaders Choose D3.js for Powerful Data Visualizations" . April 13, 2023. Further reading [ edit ] Background on D3.js itself Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (October 2011), "D3: Data-Driven Documents" , IEEE Transactions on Visualization and Computer Graphics , 17 (12), IEEE Press : 2301– 2309, doi : 10.1109/TVCG.2011.185 , PMID 22034350 , S2CID 505461 Using D3.js - beginner level Murray, Scott (March 2013), Interactive Data Visualization for the Web, An Introduction to Designing with D3 (1st ed.), Sebastopol, California: O’Reilly Media , ISBN 978-1-4493-3973-9 Timms, Simon (September 2013), Social Data Visualization with HTML5 and JavaScript (1st ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6654-2 Using D3.js - intermediate level De 8000 war, Mike (June 2012), Steele, Julie; Blanchette, Meghan (eds.), Getting Started with D3 , Creating Data-Driven Documents (1st ed.), Sebastopol, California: O’Reilly Media , ISBN 978-1-4493-2879-5 Qi Zhu, Nick (October 2013), Data Visualization with D3.js Cookbook (1st ed.), Birmingham: Packt Publishing , ISBN 978-1-7821-6216-2 Others Newton, Thomas; Villarreal, Oscar (2014), Learning D3.js Mapping , Birmingham: Packt Publishing , p. 126, ISBN 9781783985609 Navarro Castillo, Pablo (2014), Mastering D3.js , Birmingham: Packt Publishing , p. 352, ISBN 9781783286270 Teller, Swizec (2013), Data Visualization with d3.js , Birmingham: Packt Publishing , p. 194, ISBN 9781782160007 Viau, Christophe (2013), Developing a D3.js Edge: Constructing Reusable D3 Components and Charts , Bleeding Edge Press , p. 268, ISBN 9781939902023 , archived from the original on September 3, 2014 , retrieved August 27, 2014 Meeks, Elijah (2014), D3.js in Action , Manning Publications , p. 325, ISBN 9781617292118 Maclean, Malcolm (2014), D3 Tips and Tricks , Leanpub , p. 580 King, Ritchie (2014), Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript , Addison-Wesley Data & Analytics Series , p. 288, ISBN 978-0-321-93317-1 Videos Gopal, Nikhil (October 2014), D3 and CoffeeScript: A Python Programmer's Introduction to Web Visualizations , Sebastopol, California: O’Reilly Media King, Ritchie (December 2014), D3 Visualization LiveLessons: An Introduction to Data Visualization in JavaScript , Addison-Wesley Professional Related projects [ edit ] The Vega and Vega-Lite visualisation grammars are a declarative visualization specification built on parts of D3.js. External links [ edit ] Wikimedia Commons has media related to D3.js . Official website D3.js Gallery Blocksplorer , search for blocks by methods used D3 "reusable chart" libraries: C3 https://c3js.org Plotly https://plot.ly/javascript bl.ock.org Archived April 7, 2017, at the Wayback Machine and blockbuilder.org : popular early gallery system. Observablehq.com : main D3js playground. Authority control databases GND Retrieved from " https://en.wikipedia.org/w/index.php?title=D3.js&oldid=1333892839 " Categories : D3.js Free data analysis software Free software programmed in JavaScript JavaScript libraries JavaScript visualization toolkits Software using the BSD license Visualization API Hidden categories: Articles with short description Short description is different from Wikidata Use mdy dates from September 2012 All articles with unsourced statements Articles with unsourced statements from April 2023 Commons category link is on Wikidata Webarchive template wayback links Articles with example JavaScript code This page was last edited on 20 January 2026, at 09:16  (UTC) . Page was rendered with Parsoid . Text is available under the Creative Commons Attribution-ShareAlike 4.0 License ; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy . Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc. , a non-profit organization. Privacy policy About Wikipedia Disclaimers Contact Wikipedia Legal & safety contacts Code of Conduct Developers Statistics Cookie statement Mobile view Search Search Toggle the table of contents D3.js 17 languages Add topic 0