D3 has been around for a couple of years. This last year the new v4 version of D3 has been released with a modular API and many new features that make D3 even easier to use. With D3 it is very easy to create beautiful, interactive and flexible data visualisation using web standards which can be viewed on any device.
When you first look at the D3 APIs it might be a bit daunting. D3 provides many different features, functions and visualisations which you can use, but the amount of information can make it difficult to get started. The good thing is, though, that by learning a couple of concepts (a couple of patterns) on how D3 works, understanding all these libraries and parts of D3 becomes easy and immediately clear.
In this presentation I'll walk through the most important concepts of D3 and show, by explaining a couple of basic concepts, how you can create the most beautiful data visualisations with a minimal amount of coding. Besides the core D3 concepts I'll show the most interesting parts of the D3 API in the presentation like: animations, out-of-the-box diagrams, geo/gis, force-diagrams and how to make art with D3.
The document is a course material for learning D3.js (a JavaScript library for manipulating documents based on data). It includes:
1. An overview of the course which will introduce D3.js and have students play with it on HTML documents.
2. A table of contents listing the topics to be covered such as basic drawing, advanced chart drawing, interactions, and transitions.
3. Information about prerequisites including basic knowledge of JavaScript, HTML, CSS, and jQuery since D3 resembles jQuery syntax but is used for data-driven documents.
A small presentation with some quick explanation of what D3.js is and a few examples of what it can do for you. It can be used for a quick presentation (20-30 mins) after which you should have an idea of whether you can use D3.js for your project.
No longer a niche technology, GraphQL has reached mainstream status. It’s in use across a wide swath of companies ranging from small, scrappy startups to large, lumbering enterprises. You can find it driving UIs for media companies, in public APIs for third-party developers, in internal APIs used for IT infrastructure, and embedded in databases. Some of these companies are using Elixir to build their GraphQL systems, and you can too.
After covering some introductory material on GraphQL, we’ll dive in and look at how we can add it to our applications using Absinthe, the GraphQL toolkit for Elixir—and discuss why the BEAM provides some distinct advantages for GraphQL APIs at scale.
(Presented 2019-01-31 at the Elixir & Erlang SF Meetup.)
The document is a tutorial on creating different types of graphs and visualizations using D3.js. It includes step-by-step instructions and code samples for creating a bar graph using external JSON data, a linking list to navigate graph examples, a grid table to display tabular data, and a heatmap to visualize 2D data values. The author provides the full code needed to generate each visualization as an example for learning D3.js and data visualization.
Networks All Around Us: Extracting networks from your problem domainRussell Jurney
This document summarizes a presentation on analyzing networks in problem domains. It provides examples of different types of networks that can be analyzed, including founder networks, website behavior networks, and online social networks. It also describes various tools and techniques for social network analysis, such as calculating centrality, clustering, and dispersion. The presentation emphasizes how to identify relevant entities and relationships to model a problem domain as a property graph and analyze it using graph databases and network analysis libraries.
Social Network Analysis in Your Problem DomainRussell Jurney
This document discusses various types of networks that can be analyzed using social network analysis techniques. It provides examples of networks including founder networks, website behavior networks, online social networks, and email inbox networks. It also summarizes tools and methods for social network analysis including centrality measures, clustering, block models, cores, and dispersion analysis.
Networks All Around Us: Extracting networks from your problem domainRussell Jurney
Network analytics are being increasingly utilized to create machine intelligence that automates the world around us. But what is a network, and how do you analyze them? More directly: how do I find and analyze networks in my dataset? This talk will go over a number of examples of practical network analytics to give viewers a playbook for doing applied social network analysis and network analytics.
Talk given in Tecnocampus Mataró.
In recent years, the mobile and web software industry has advanced fast. Each year new tools and frameworks emerge, fueled by the open source community. This presentation was prepared by Geemba in order to introduce students to this new landscape and modern tecnologies.
The document is a course material for learning D3.js (a JavaScript library for manipulating documents based on data). It includes:
1. An overview of the course which will introduce D3.js and have students play with it on HTML documents.
2. A table of contents listing the topics to be covered such as basic drawing, advanced chart drawing, interactions, and transitions.
3. Information about prerequisites including basic knowledge of JavaScript, HTML, CSS, and jQuery since D3 resembles jQuery syntax but is used for data-driven documents.
A small presentation with some quick explanation of what D3.js is and a few examples of what it can do for you. It can be used for a quick presentation (20-30 mins) after which you should have an idea of whether you can use D3.js for your project.
No longer a niche technology, GraphQL has reached mainstream status. It’s in use across a wide swath of companies ranging from small, scrappy startups to large, lumbering enterprises. You can find it driving UIs for media companies, in public APIs for third-party developers, in internal APIs used for IT infrastructure, and embedded in databases. Some of these companies are using Elixir to build their GraphQL systems, and you can too.
After covering some introductory material on GraphQL, we’ll dive in and look at how we can add it to our applications using Absinthe, the GraphQL toolkit for Elixir—and discuss why the BEAM provides some distinct advantages for GraphQL APIs at scale.
(Presented 2019-01-31 at the Elixir & Erlang SF Meetup.)
The document is a tutorial on creating different types of graphs and visualizations using D3.js. It includes step-by-step instructions and code samples for creating a bar graph using external JSON data, a linking list to navigate graph examples, a grid table to display tabular data, and a heatmap to visualize 2D data values. The author provides the full code needed to generate each visualization as an example for learning D3.js and data visualization.
Networks All Around Us: Extracting networks from your problem domainRussell Jurney
This document summarizes a presentation on analyzing networks in problem domains. It provides examples of different types of networks that can be analyzed, including founder networks, website behavior networks, and online social networks. It also describes various tools and techniques for social network analysis, such as calculating centrality, clustering, and dispersion. The presentation emphasizes how to identify relevant entities and relationships to model a problem domain as a property graph and analyze it using graph databases and network analysis libraries.
Social Network Analysis in Your Problem DomainRussell Jurney
This document discusses various types of networks that can be analyzed using social network analysis techniques. It provides examples of networks including founder networks, website behavior networks, online social networks, and email inbox networks. It also summarizes tools and methods for social network analysis including centrality measures, clustering, block models, cores, and dispersion analysis.
Networks All Around Us: Extracting networks from your problem domainRussell Jurney
Network analytics are being increasingly utilized to create machine intelligence that automates the world around us. But what is a network, and how do you analyze them? More directly: how do I find and analyze networks in my dataset? This talk will go over a number of examples of practical network analytics to give viewers a playbook for doing applied social network analysis and network analytics.
Talk given in Tecnocampus Mataró.
In recent years, the mobile and web software industry has advanced fast. Each year new tools and frameworks emerge, fueled by the open source community. This presentation was prepared by Geemba in order to introduce students to this new landscape and modern tecnologies.
Presentation / Workshop which will teach you the core patterns, concepts and visualisation options of D3.js (v4). Accompanying exercises can be found here: https://github.com/josdirksen/d3exercises
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses how D3 works, examples of basic charts like scatter plots and bar charts using D3, and how to incorporate features like mouse interactions, animations, filters and gradients. It also covers using D3 with technologies like Android, PhoneGap, and Google Glass to create mobile visualizations.
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses topics like what D3 is, how it works, examples of creating simple charts and adding interactivity with mouse events, using SVG filters and gradients, and integrating D3 visualizations into Android and Google Glass apps. It also briefly mentions related technologies, resources for learning more, and potential training topics.
This document provides an overview of D3, a JavaScript library for manipulating documents based on data. It discusses what D3 is, provides examples of D3 visualizations, and covers key D3 concepts like selecting elements, binding data, scales, transitions, and axes. The document also includes links to resources for learning more about using D3.
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsFlorian Georg
My talk at this year's Jazoon about data visualization and exploration with D3, crossfilter and dc.js
It should give you a good introduction on how/when to use these frameworks and how they relate to each other.
More info on http://datavisual.mybluemix.net
This document provides an overview of D3.js, an open-source JavaScript library for producing dynamic, interactive data visualizations in web browsers. It discusses D3.js's technical features like using SVG, HTML, and CSS, its support for Ajax, JSON, and XML, and how it is useful for web interactivity, advanced data analytics, and allowing powerful and full control. The document also briefly touches on D3.js's learning curve and provides examples of basic DOM manipulation, properties as functions, entering and exiting data, attributes, transitions, and interactions using D3.js.
The workshop will present how to combine tools to quickly query, transform and model data using command line tools.
The goal is to show that command line tools are efficient at handling reasonable sizes of data and can accelerate the data science
process. We will show that in many instances, command line processing ends up being much faster than ‘big-data’ solutions. The content
of the workshop is derived from the book of the same name (http://datascienceatthecommandline.com/). In addition, we will cover
vowpal-wabbit (https://github.com/JohnLangford/vowpal_wabbit) as a versatile command line tool for modeling large datasets.
This document provides an overview of D3.js, a JavaScript library for visualizing data in web browsers. It was created in 2011 by Mike Bostock and uses HTML, SVG, and CSS standards to bind interactive graphics to web page documents. D3.js has a steep learning curve but is well-suited for creating interactive and dynamic data visualizations on the web that can adapt to different devices in real-time. It works by joining data to graphical elements using enter, update, and exit operations and provides layouts to organize nodes and edges in network graphs.
This presentation has been prepared by Oleksii Prohonnyi for LvivJS 2015 conference (http://lvivjs.org.ua/)
See the speech in Russian by the following link: https://youtu.be/oi7JhB8eWnA
Eclipse Science provides 10 projects related to scientific computing including projects for visualization, chemistry analysis, data analysis, numerical data manipulation, user interfaces for large datasets, scanning instruments, R programming, LaTeX documents, scientific workflows, and an integrated computational environment. The projects involve various companies and organizations and aim to support scientific domains through open source Eclipse technologies and APIs.
Eclipse science group presentation given at Eclipse Converge and Devoxx 2017 in California. These slides give an overview of projects in the Eclipse Science working group in 2017.
MongoDB for Coder Training (Coding Serbia 2013)Uwe Printz
Slides of my MongoDB Training given at Coding Serbia Conference on 18.10.2013
Agenda:
1. Introduction to NoSQL & MongoDB
2. Data manipulation: Learn how to CRUD with MongoDB
3. Indexing: Speed up your queries with MongoDB
4. MapReduce: Data aggregation with MongoDB
5. Aggregation Framework: Data aggregation done the MongoDB way
6. Replication: High Availability with MongoDB
7. Sharding: Scaling with MongoDB
The document is an introduction to the D3.js JavaScript library for creating interactive data visualizations on the web. It explains that D3 uses common web standards like HTML, CSS, JavaScript and SVG to bind external data to document objects to generate visualizations. It provides examples of how D3 works by joining data to elements using selections, setting attributes from data values, and generating scales, axes and transitions. The document suggests learning D3 incrementally by starting with basic concepts like data joins and attribute binding before moving on to more advanced features like layouts, maps and interactivity.
This document provides an introduction to data visualization with D3.js. It discusses why data visualization is useful, listing reasons like helping people see non-obvious patterns and conveying information universally. It also introduces some common visualization libraries and focuses on D3.js, explaining that it is not limited to specific canvases and allows more creativity than libraries with predefined charts. The document then covers the main concepts of D3.js, including selections of elements, using SVG, and binding data to drive visual element properties. It provides examples of using scales to map data values to pixel coordinates. Finally, it lists some additional learning resources for D3.js.
D3.js is a JavaScript library for manipulating documents based on data. It allows binding data to the DOM and applying data-driven transformations. The document discusses using D3.js to create force-directed graphs by binding data to SVG elements like paths, circles, and text. Key aspects covered include the D3 force layout to simulate physical forces on nodes, and SVG attributes to define paths, circles, text position and styling.
D3 is a powerful visualization library that allows to create amazing interactive visualizations. In this talk, targeted to a group of new engineers, you will learn a bit about the library, its possibilities, some examples and a detailed explanation of D3 selections and the dread Update, Enter and Exit pattern.
Find the slides online in: http://golodhros.github.io/d3-intro/
Data Visualization on the Web - Intro to D3Angela Zoss
This document provides an overview of data visualization using D3.js, a JavaScript library for creating interactive graphics in web browsers. It discusses when to use D3, how to structure D3 code, basic D3 techniques like selections and transitions, and resources for learning D3 like tutorials, examples, and Duke University's data visualization services.
CouchApps are web applications built using CouchDB, JavaScript, and HTML5. CouchDB is a document-oriented database that stores JSON documents, has a RESTful HTTP API, and is queried using map/reduce views. This talk will answer your basic questions about CouchDB, but will focus on building CouchApps and related tools.
The document discusses features of SVG and D3, including different SVG elements, colors/gradients/filters, transforms and animation, and how D3 builds upon SVG to enable data visualization. It provides examples of creating basic SVG shapes and charts with D3, binding data to DOM elements, adding mouse interactions and transitions. It also covers using D3 with other technologies like Angular, working with different data formats and large datasets, and transpires for working with modern JavaScript.
Presentation / Workshop which will teach you the core patterns, concepts and visualisation options of D3.js (v4). Accompanying exercises can be found here: https://github.com/josdirksen/d3exercises
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses how D3 works, examples of basic charts like scatter plots and bar charts using D3, and how to incorporate features like mouse interactions, animations, filters and gradients. It also covers using D3 with technologies like Android, PhoneGap, and Google Glass to create mobile visualizations.
This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses topics like what D3 is, how it works, examples of creating simple charts and adding interactivity with mouse events, using SVG filters and gradients, and integrating D3 visualizations into Android and Google Glass apps. It also briefly mentions related technologies, resources for learning more, and potential training topics.
This document provides an overview of D3, a JavaScript library for manipulating documents based on data. It discusses what D3 is, provides examples of D3 visualizations, and covers key D3 concepts like selecting elements, binding data, scales, transitions, and axes. The document also includes links to resources for learning more about using D3.
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsFlorian Georg
My talk at this year's Jazoon about data visualization and exploration with D3, crossfilter and dc.js
It should give you a good introduction on how/when to use these frameworks and how they relate to each other.
More info on http://datavisual.mybluemix.net
This document provides an overview of D3.js, an open-source JavaScript library for producing dynamic, interactive data visualizations in web browsers. It discusses D3.js's technical features like using SVG, HTML, and CSS, its support for Ajax, JSON, and XML, and how it is useful for web interactivity, advanced data analytics, and allowing powerful and full control. The document also briefly touches on D3.js's learning curve and provides examples of basic DOM manipulation, properties as functions, entering and exiting data, attributes, transitions, and interactions using D3.js.
The workshop will present how to combine tools to quickly query, transform and model data using command line tools.
The goal is to show that command line tools are efficient at handling reasonable sizes of data and can accelerate the data science
process. We will show that in many instances, command line processing ends up being much faster than ‘big-data’ solutions. The content
of the workshop is derived from the book of the same name (http://datascienceatthecommandline.com/). In addition, we will cover
vowpal-wabbit (https://github.com/JohnLangford/vowpal_wabbit) as a versatile command line tool for modeling large datasets.
This document provides an overview of D3.js, a JavaScript library for visualizing data in web browsers. It was created in 2011 by Mike Bostock and uses HTML, SVG, and CSS standards to bind interactive graphics to web page documents. D3.js has a steep learning curve but is well-suited for creating interactive and dynamic data visualizations on the web that can adapt to different devices in real-time. It works by joining data to graphical elements using enter, update, and exit operations and provides layouts to organize nodes and edges in network graphs.
This presentation has been prepared by Oleksii Prohonnyi for LvivJS 2015 conference (http://lvivjs.org.ua/)
See the speech in Russian by the following link: https://youtu.be/oi7JhB8eWnA
Eclipse Science provides 10 projects related to scientific computing including projects for visualization, chemistry analysis, data analysis, numerical data manipulation, user interfaces for large datasets, scanning instruments, R programming, LaTeX documents, scientific workflows, and an integrated computational environment. The projects involve various companies and organizations and aim to support scientific domains through open source Eclipse technologies and APIs.
Eclipse science group presentation given at Eclipse Converge and Devoxx 2017 in California. These slides give an overview of projects in the Eclipse Science working group in 2017.
MongoDB for Coder Training (Coding Serbia 2013)Uwe Printz
Slides of my MongoDB Training given at Coding Serbia Conference on 18.10.2013
Agenda:
1. Introduction to NoSQL & MongoDB
2. Data manipulation: Learn how to CRUD with MongoDB
3. Indexing: Speed up your queries with MongoDB
4. MapReduce: Data aggregation with MongoDB
5. Aggregation Framework: Data aggregation done the MongoDB way
6. Replication: High Availability with MongoDB
7. Sharding: Scaling with MongoDB
The document is an introduction to the D3.js JavaScript library for creating interactive data visualizations on the web. It explains that D3 uses common web standards like HTML, CSS, JavaScript and SVG to bind external data to document objects to generate visualizations. It provides examples of how D3 works by joining data to elements using selections, setting attributes from data values, and generating scales, axes and transitions. The document suggests learning D3 incrementally by starting with basic concepts like data joins and attribute binding before moving on to more advanced features like layouts, maps and interactivity.
This document provides an introduction to data visualization with D3.js. It discusses why data visualization is useful, listing reasons like helping people see non-obvious patterns and conveying information universally. It also introduces some common visualization libraries and focuses on D3.js, explaining that it is not limited to specific canvases and allows more creativity than libraries with predefined charts. The document then covers the main concepts of D3.js, including selections of elements, using SVG, and binding data to drive visual element properties. It provides examples of using scales to map data values to pixel coordinates. Finally, it lists some additional learning resources for D3.js.
D3.js is a JavaScript library for manipulating documents based on data. It allows binding data to the DOM and applying data-driven transformations. The document discusses using D3.js to create force-directed graphs by binding data to SVG elements like paths, circles, and text. Key aspects covered include the D3 force layout to simulate physical forces on nodes, and SVG attributes to define paths, circles, text position and styling.
D3 is a powerful visualization library that allows to create amazing interactive visualizations. In this talk, targeted to a group of new engineers, you will learn a bit about the library, its possibilities, some examples and a detailed explanation of D3 selections and the dread Update, Enter and Exit pattern.
Find the slides online in: http://golodhros.github.io/d3-intro/
Data Visualization on the Web - Intro to D3Angela Zoss
This document provides an overview of data visualization using D3.js, a JavaScript library for creating interactive graphics in web browsers. It discusses when to use D3, how to structure D3 code, basic D3 techniques like selections and transitions, and resources for learning D3 like tutorials, examples, and Duke University's data visualization services.
CouchApps are web applications built using CouchDB, JavaScript, and HTML5. CouchDB is a document-oriented database that stores JSON documents, has a RESTful HTTP API, and is queried using map/reduce views. This talk will answer your basic questions about CouchDB, but will focus on building CouchApps and related tools.
The document discusses features of SVG and D3, including different SVG elements, colors/gradients/filters, transforms and animation, and how D3 builds upon SVG to enable data visualization. It provides examples of creating basic SVG shapes and charts with D3, binding data to DOM elements, adding mouse interactions and transitions. It also covers using D3 with other technologies like Angular, working with different data formats and large datasets, and transpires for working with modern JavaScript.
Similar to D3: Easy and flexible data visualisation using web standards (20)
Generative Classifiers: Classifying with Bayesian decision theory, Bayes’ rule, Naïve Bayes classifier.
Discriminative Classifiers: Logistic Regression, Decision Trees: Training and Visualizing a Decision Tree, Making Predictions, Estimating Class Probabilities, The CART Training Algorithm, Attribute selection measures- Gini impurity; Entropy, Regularization Hyperparameters, Regression Trees, Linear Support vector machines.
Codeless Generative AI Pipelines
(GenAI with Milvus)
https://ml.dssconf.pl/user.html#!/lecture/DSSML24-041a/rate
Discover the potential of real-time streaming in the context of GenAI as we delve into the intricacies of Apache NiFi and its capabilities. Learn how this tool can significantly simplify the data engineering workflow for GenAI applications, allowing you to focus on the creative aspects rather than the technical complexities. I will guide you through practical examples and use cases, showing the impact of automation on prompt building. From data ingestion to transformation and delivery, witness how Apache NiFi streamlines the entire pipeline, ensuring a smooth and hassle-free experience.
Timothy Spann
https://www.youtube.com/@FLaNK-Stack
https://medium.com/@tspann
https://www.datainmotion.dev/
milvus, unstructured data, vector database, zilliz, cloud, vectors, python, deep learning, generative ai, genai, nifi, kafka, flink, streaming, iot, edge
Open Source Contributions to Postgres: The Basics POSETTE 2024ElizabethGarrettChri
Postgres is the most advanced open-source database in the world and it's supported by a community, not a single company. So how does this work? How does code actually get into Postgres? I recently had a patch submitted and committed and I want to share what I learned in that process. I’ll give you an overview of Postgres versions and how the underlying project codebase functions. I’ll also show you the process for submitting a patch and getting that tested and committed.
Enhanced data collection methods can help uncover the true extent of child abuse and neglect. This includes Integrated Data Systems from various sources (e.g., schools, healthcare providers, social services) to identify patterns and potential cases of abuse and neglect.
D3: Easy and flexible data visualisation using web standards
1. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
@JOSDIRKSEN
D3: EASY AND FLEXIBLE DATA
VISUALISATION USING WEB
STANDARDS
2. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WHAT IS D3.JS
3. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WHAT IS D3?
D3.js is a JavaScript library for manipulating documents
based on data. D3 helps you bring data to life using
HTML, SVG, and CSS. D3’s emphasis on web standards
gives you the full capabilities of modern browsers
without tying yourself to a proprietary framework,
combining powerful visualization components and a
data-driven approach to DOM manipulation.
4. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
MORE INFO ON D3.JS
Main site:
API:
Examples:
Usually this will be all you need
https://d3js.org/
https://github.com/d3/d3/blob/master/API.md
https://bl.ocks.org/
5. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
BL.OCKS.ORG IS GREAT
6. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
ALSO LARGE NUMBER OF BOOKS
Be sure to check version: D3 v4 has new API
or one of the many others
7. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WHAT IT IS NOT
Not a charting library: provides building blocks for
other libraries (e.g nvd3.js, Rickshaw.js and c3.js)
Not an SVG abstraction library: Manipulates the
Dom and SVG directly.
Not a Canvas/WebGL library: Minimal support for
Canvas, for 3D use Three.js.
Not a framework: Can be used with Angular, React,
Vue.js and anything else.
8. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WHAT ARE WE GOING TO COVER
Main patterns:
Data binding: select / add / update / remove
Path generators: such as arcs and path
Working with geo to visualize map based data
Add interactivity
Working with layouts: force, tree and others
Mentions of some other stuff:
loading data, working with Scales
Generative art, transitions
9. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
FOLLOW ALONG
Or last tweet from twitter: @josdirksen
http://tiny.cc/d3devoxx
10. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN 1:
SELECT/ADD/UPDATE/REMOVE
11. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SELECT / ADD / UPDATE / REMOVE
Select elements from the DOM, and bind data to them. If
we have too little elements, add new ones. Update the
datum bound to the existing ones, and remove
elements, for which we don't have data ony more.
12. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN IN ACTION
Select / add / update / remove
14. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDESTEP: JAVASCRIPT SETUP
We'll fill in the update function
function show() {
var margin = { top: 20, bottom: 20, right: 40, left: 40 },
width = 800 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function update() { ... }
update();
d3.interval(function() { update(); }, 5000);
}
15. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 0: THE DATA WE'RE WORKING WITH
Data is a just an array: []
We'll use sample data:
1 to 10 elements
each element random value 20 to 40
Handled in this example by getRandomData()
val data = [26.23690455102537, 25.132792981537815,
34.363197598539266]
16. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 1: SELECT AND BIND DATA
Select and bind data:
Bind data to a selection with data
By default bound on array index.
Can be bound on property of data.
Select with d3.select or d3.selectAll
var circles = chart.selectAll('circle')
.data(getRandomData())
17. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 2: HANDLE NEW ELEMENTS
circles is < bound data
Use enter() to create new circles
Set with:attr(..), style(..), html(..),
text(..) and classed(..)
var circles = chart.selectAll('circle')
.data(getRandomData())
circles.enter().append('circle')
.attr("r", function(d) { return d })
.attr("cx", function(d, i) { return i * 100})
.attr("class", "added")
.attr("cy", "50")
18. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 3 AND 4: UPDATE AND REMOVE
EXISTING ELEMENTS
Update the data elements bound to existing circles
Remove the circles without bound data
// set the class to updated and update radius
circles.attr("class", "updated")
.attr("r", function(d) { return d })
circles.exit().remove();
~ And with that ~
19. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDESTEP: TRANSITIONS
Interpolate change on a selection
Works out of the box for:
number, color
string: finds numbers in the string
Custom using: attrTween or styleTween
// contains the circles, which are being reused
circles.attr("class", "updated")
.transition().duration(2000)
.attr("r", function(d) { return d })
https://github.com/d3/d3-transition
20. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
DATABINDING ON INDEX
With data we can provide an accessor function.
Data is now bound and updated on d.id
E.g useful for sorting and moving elements
var input = [
{id: 3, value: 22.63978478623312}
{id: 6, value: 23.562434755740533}
{id: 8, value: 23.82717533064451}];
var circles = chart.selectAll('circle').data(input
, function(d) {return d.id});
21. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
CODE: PATTERN, TRANSITIONS AND DATA BINDING
var circles = chart.selectAll('circle')
.data(getRandomData(), function(d) {return d.index});
circles.enter().append('circle').attr("class", "added")
.attr("cy", "50")
.transition().duration(2000)
.attr("cx", function(d, i) { return i * 100})
.attr("r", function(d) { return d.value });
circles
.attr("class", "updated")
.transition().duration(2000)
.attr("cx", function(d, i) { return i * 100})
.attr("r", function(d) { return d.value });
circles.exit()
.transition().duration(2000)
.attr("r", 0).style("opacity", 0)
.on('end', function(d) { this.remove() });
~ End of pattern 1 ~
22. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN 2:
GENERATORS
23. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
D3: USING GENERATORS
SVG provides a number of primitives (circle, rect, ellipse,
line, polyline, polygon) used for drawing. Real power,
though, comes from the 'path' element. Writing 'path's
by hand is rather complex. With generators, D3.js wraps
the complexity in a simple function.
24. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
THE PATH ELEMENT IS VERSATILE
the d attribute describes a path:
M, L, A, C, A, Q, T ... for lines, arcs, curves
Hard to determine the correct values yourself
D3.js provides generators for complex shapes
<path class="arc" d="M136.86141570725613,-17.69047457265137A13
0,0,1,124.60150267951192,59.31665474390461L62.948628653284814,
257214134993035A69,69,0,0,0,68.61145448511735,-7.3122030494695
style="fill: rgb(252, 160, 130);"></path>
25. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
THE ARC GENERATOR
var arc = d3.arc().outerRadius(200).innerRadius(100);
// generate a path string
var pathString = arc({
startAngle: 0,
endAngle: Math.PI
});
// "M1.469576158976824e-14,-240A240,240,0,1,1,1.46957615897682
// 240L7.34788079488412e-15,120A120,120,0,1,0,7.34788079488412
// -120Z"
select(".chart").append("path").attr("d", pathString);
26. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
NOW IT'S EASY TO CREATE A PIE CHART
Generator
27. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
COMBINED WITH THE PIE FUNCTION
d3.pie() to generate config for d3.arc
var arc = d3.arc()
.outerRadius(height/2 * 0.6).innerRadius(height/2 * 0.3);
var data = [{count:10}, {count:20}, {count:30}]
var pie = d3.pie().padAngle(0.04)
.value(function (d) { return d.count; });
var arcs = pie(data)
// "[{"data":{"count":10},"index":2,"value":10,
// "startAngle":5.215987755982988,
// "endAngle":6.283185307179586,"padAngle":0.04},
// {"data":{"count":20},"index":1,"value":20,
// "startAngle":3.121592653589793,
// "endAngle":5.215987755982988,"padAngle":0.04} ...
selectAll("path").data(arcs).enter()
.append("path").attr("d", arc);
28. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
ANOTHER STANDARD PATTERN
1. (Optionally) Use a generator which creates config
for other generators (d3.pie)
2. Pass initial data through step 1, result is enriched
data with config.
3. Use the normal selectAll(), enter(),
merge(), exit() pattern
4. Use generator which creates a path based on
properties. (d3.arc)
29. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
USING ANOTHER GENERATOR
Temperature spiral
30. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SPIRAL DATA
31. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SPIRAL CODE: SETUP 1/2
var minR = 20;
var maxR = height/2;
// determine min and max values to determine range
var minValue = years.reduce ....
var maxValue = years.reduce ....
// set the scale for the radius
var radius = d3.scaleLinear().range([minR, maxR]).domain([minValue, maxValue+0.3]);
var color = d3.scaleSequential(d3.interpolateRainbow).domain([0, years.length]);
// configure the path generator
var radialGenerator = d3.lineRadial();
radialGenerator.radius(function(d) { return radius(d.value); });
radialGenerator.angle(function(d) { return ((2*Math.PI)/12) * d.monthIndex; });
32. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SPIRAL: RENDER LOOP 2/2
function appendYear() {
// select and bind the data
var dataToShow = years.slice(0, year);
var current = graph.selectAll("path").data(dataToShow);
// We only add new data, we don't update existing data.
current.enter()
.append("path")
.attr("d", function(d,i) { return radialGenerator(d.months)})
.attr("stroke", function(d,i) { return color(i)});
graph.select(".currentYear").text(dataToShow[dataToShow.length-1].year);
year++;
}
33. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDESTEP: SVG AND POSITIONING
Absolute positioning:
Provides a g element for grouping
g has no x or y, uses transform
All attributes on this element apply on children
Actions can be combined, still annoying
<rect x="100", y="100"></rect>
<circle cx="100", cy="100"></circle>
<g transform="translate(50 200)">...</g> <!-- positioning -
<g transform="scale(0.5 0.3)">...</g> <!-- sizing -->
<g transform="rotate(45)">...</g> <!-- rotate the g -->
34. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
POSITIONING WITH SCALES
A scale translates input domain to an output range
Different scales ( )
scaleLinear: continuous input to cont. output
scalePow, scaleLog, scaleTime
scaleSequential: continuous input to interpolator
scaleQuantize: continuous input to discrete range
scaleQuantile: sampled input to discrete range
scaleThreshold: scaleQuantize with thresholds
scaleOrdinal: discrete input to discrete range
https://github.com/d3/d3-scale
35. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SCALELINEAR: CONTINUOUS INPUT TO
CONTINUOUS OUTPUT
var x = d3.scaleLinear()
.domain([10, 130]) // e.g the min and max of your data
.range([0, 960]); // the width of your chart
x(20); // 80
x(50); // 320
var color = d3.scaleLinear()
.domain([10, 100])
.range(["brown", "steelblue"]);
color(20); // "#9a3439"
color(50); // "#7b5167"
36. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WHAT CAN WE INTERPOLATE?
Domain is numeric, the range can be any of this:
Easy to create your own
Also be used in transitions
37. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN 3:
INTERACTION
38. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
INTERACTIONS
Extend the select pattern and respond to user
interactions with the elements on screen.
39. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
D3 MAKES ADDING LISTENERS EASY
Part of the select/add/update/remove pattern
Use the on function (with any DOM event type):
event.name when multiple listeners for event
// on enter() also add event listeners
circles.enter().append('circle').attr("class", "added")
.attr("cy", "50")
.attr("cx", function(d, i) { return i * 100})
.attr("r", function(d) { return d.value })
.on("mouseover", handleMouseOver)
.on("mouseup.foo", handleMouseUp1)
.on("mouseup.bar", handleMouseUp2)
.on("mouseenter mouseleave", handleMouseEnterMouseLeave)
40. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
EVENT LISTENERS IN D3
function handleMouseOver(d, i, nodes) {
var boundData = d;
var index = i;
var currentElement = nodes(i); // also bound to this
// Select element, and add a transition
d3.select(this)
.transition()
.attr({ fill: "orange", r: 100 });
}
41. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STATIC EXAMPLE
Rotating rectangles
42. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
ADD INTERACTIVITY
var tiles = chart.selectAll("g").data(data).enter()...
tiles.on("mouseover", function(d, i ,nodes) {
d3.select(this)
.selectAll("path")
.attr("stroke", colorScale(Math.random()))
.attr("stroke-width", "10")
});
tiles.on("mouseout", function(d, i ,nodes) {
d3.select(this).selectAll("path")
.transition().duration(5000)
.attr("stroke", "#000")
.attr("stroke-width", "2")
});
43. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
INTERACTIVE EXAMPLE
Rotating colored rectangles
44. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SOME ADDITIONAL HELPERS
Helpers to get more information:
d3.event: the current event
d3.mouse: x,y relative to a container
d3.touch: x,y of touch relative to a container
d3.touches: x,y of touches rel. to a container
45. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
THERE IS MORE
d3.brush: select multiple elements by clicking
and dragging the mouse.
d3.drag: drag and drop any element to a new
location
d3.brush
46. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN 4:
LAYOUTS
47. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
LAYOUTS
With generators we generate path attributes, which we
can position ourselves. With a layout we can have D3
determine the correct positions of our elements, and we
only have to determine how to visualize them.
48. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
D3 AND LAYOUTS
D3 comes with a standard set of layouts: Chord,
Force, Cluster, Tree, Treemap, Partion, Pack
Except Chord and Force all follow the same pattern
(more on this later)
Radial Tree Layout
49. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
BASIC LAYOUT PATTERN
1. Load the data (d3.csv,d3.tsv,d3.json etc.)
2. If necessary, convert it to a nested structure
D3 has helpers: d3.stratisfy, d3.nest
3. Convert the nested data into the required stucture
(d3.hierarchy)
4. Pass it through a generator (e.g Tree)
5. Use the output from the generator to draw elements
50. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
LETS CREATE A TREEMAP
Sample treeMap
51. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 1: LOAD THE DATA
"Country (en)";"Country code";"Continent";"Population";"Area";
"Afghanistan";"AF";"Asia";32564342;652230;0;
"Egypt";"EG";"Africa";88487396;1001450;2450;
..
d3.text('./data/countries.csv', function(raw) {
var data = d3.dsvFormat(";").parse(raw)
... // do some data cleanup
52. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 2: CONVERT TO NESTED
// group entries using nest and create hierarchy per continent
var entries = d3.nest()
.key(function (d) {return d.Continent; })
.entries(data);
// and create a root node
var source = { values: entries }
53. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 3: CONVERT TO HIERARCHY
// use our nested data, and tell d3 that the
// children can be accessed through the values property
var root = d3.hierarchy(source, function(d){return d.values;})
// Count the populations to create the hierarchy
.sum(function(data) { return data['Population']; })
// sort the hierarchy based on value
.sort(function(a, b) { return b.value - a.value; });
54. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 4: ENHANCE WITH THE TREEMAP
LAYOUT
var tree = d3.treemap().size([width, height]).padding(2)
tree(root);
55. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
STEP 5: SELECT/ADD/UPDATE/REMOVE
// leaves is returns all the elements in an array
var countries = chart.selectAll(".node")
.data(root.leaves(), function(d) {return d.data.id})
// append a rectangle for each group and set the color
var newCountries = countries.enter().append("rect")
.style("fill", function(d) {return colorScale(d.parent.data.key)})
.style("stroke", "black").attr("class","node")
.on("click", onclick)
// merge two selections for common functionality
var allGroups = countries.merge(newCountries);
// Step 6. Create a transition in which we update the x, y, widht and height
// of the rectangles based on the d.x0, d.x1, d.y0 and d.y1 values.
allGroups.transition().duration(2000)
.attr("x", function(d) {return d.x0}).attr("y", function(d) {return d.y0})
.attr("width", function(d) {return d.x1 - d.x0})
.attr("height", function(d) {return d.y1 - d.y0});
Result
56. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDENOTE: FORCE LAYOUT WITH LINKS
AND NODES
Force layout 1
57. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDENOTE: FORCE LAYOUT WITH JUST
NODES
Force layout 2
58. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDENOTE: MATRIX DATA WITH CHORD
Chord Layout
59. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDENOTE: MATRIX DATA WITH TABLE
Custom Layout
60. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
EXTRAS:
MAPS
61. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
CREATING MAPS
(Not really a pattern, but nicely shows a combination of the other patterns and concepts we've seen)
O en used way to represent data is on maps. D3
provides a standard way to easily create interactive
maps in different projections.
62. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
BEST PART OF D3.JS
At least for me.... since I really like maps
63. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
CAUSE IT LOOKS NICE
64. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
AND INFORMATIVE
65. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
AND BEAUTIFUL
66. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
QUICK NOTE ON PROJECTIONS
Defines how the source coordinates (lat, lon) are
projected to a 2D flat canvas. E.g: Sinu Mollweide:
Example
67. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
VISUALIZING IS EASY
Lets recreate this:
Example
68. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
NOTE ON DATA
D3.js can work with:
GeoJSON: A standard supported by many
applications.
TopoJSON: A specific optimized format for
smaller files.
Most common format is ArcGIS shapefile.
binary format
Use QGis, Mapshaper, OGR to convert
69. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
GEOJSON AND TOPOJSON FORMATS
Can contain multiple geometries.
Each geometry is described (usually) as a path.
Can contain additional properties
population, unemployment rate, etc.
one file for everything
Try to work with TopoJSON, since it's much smaller
{"type":"Topology","objects":{"countries":{"type":"GeometryCollection",
"geometries":[{"type":"Polygon","id":"004","arcs":[[0,1,2,3,4,5]],
"properties":{"value":"7","countryA":"AFG","name":"Afghanistan"}},
{"type":"MultiPolygon","id":"024","arcs":[[[6,7,8,9]],[[10,11,12]]],
"properties":{"value":"10.2"....
70. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PATTERN: TOPO DATA AND D3.JS
1. Load the data
2. Setup a path generator and projection
3. Use the projection to generate path segments
4. Use select / bind / update / remove pattern
71. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDESTEP: LOADING DATA
D3.js provides standard loaders:
d3.csv, d3.tsv
d3.json, d3.xml
d3.text, d3.html
d3.csv("somedata.csv", function(rows) {
// do something with the data
});
72. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SETUP THE PATH GENERATOR
For all the supported projections see:
Pretty much any projection you can think off
Relatively easy to create your own one
var projection = d3.geoNaturalEarth()
var path = d3.geoPath().projection(projection)
https://github.com/d3/d3-geo/
https://github.com/d3/d3-geo-projection
73. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WITH A GENERATOR AND THE DATA
topojson.feature: convert the topoJSON
format to geoJSON
Which can be processed by the path generator
var projection = d3.geoNaturalEarth()
var path = d3.geoPath().projection(projection)
d3.json("./data/world-110m-inet.json", function(loadedTopo) {
countries = topojson.feature(loadedTopo,
loadedTopo.objects.countries).features;
svg.selectAll('.country').data(countries).enter()
.append("path")
.classed('country', true)
.attr("d", path);
}
74. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
AND YOU'RE DONE!
But colors?
75. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
ADD A SIMPLE SCALE
var color = d3.scaleSequential(d3.interpolateGreens).domain([0,100])
var projection = d3.geoNaturalEarth()
var path = d3.geoPath().projection(projection)
d3.json("./data/world-110m-inet.json", function(loadedTopo) {
countries = topojson.feature(loadedTopo,
loadedTopo.objects.countries).features;
svg.selectAll('.country').data(countries).enter()
.append("path")
.classed('country', true)
.attr("d", path);
.attr("fill", function(d) {return d.properties.value
? color(+d.properties.value)
: '#ccc'});
}
76. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
EASY RIGHT?
77. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
SIDENOTE: SUPPORT OF HTML5 CANVAS
Also possible to use <canvas>
var projection = d3.geoNaturalEarth()
// c is a canvas.getContext("2D");
var path = d3.geoPath().projection(projection).context(c);
d3.json("./data/world-110m-inet.json", function(loadedTopo) {
countries = topojson.feature(loadedTopo,
loadedTopo.objects.countries).features;
countries.forEach(function(toDraw) {
toDraw.properties.value ? c.fillStyle = color(toDraw.properties.value)
: c.fillStyle = '#ccc';
c.beginPath();
path(toDraw);
c.fill();
})
});
78. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
EXTRAS:
GENERATIVE ART
79. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
PLAYING WITH VORONOIS
In mathematics, a Voronoi diagram is a partitioning of a
plane into regions based on distance to points in a
specific subset of the plane. That set of points (called
seeds, sites, or generators) is specified beforehand, and
for each seed there is a corresponding region consisting
of all points closer to that seed than to any other.
These regions are called Voronoi cells. The Voronoi
diagram of a set of points is dual to its Delaunay
triangulation.
80. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
VORONOI EXAMPLE
81. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
WORLDS AIRPORTS
82. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
VORONOI TRIANGULATION
Triangulated using D3.voronoi and Delaunay
triangulation
83. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
MORE VORONOI: STAINED GLASS
84. More information contact me: @josdirksen / jos.dirksen@gmail.com / www.smartjava.org / github.com/josdirksen
THANK YOU!
Main d3 sites:
Examples from this presentation:
This presentation:
One of many books:
http://www.d3js.org
https://github.com/d3/d3/blob/master/API.md
https://github.com/josdirksen/d3exercises
https://github.com/josdirksen/d3dv
https://github.com/josdirksen/d3-devoxx-2017
https://www.packtpub.com/web-development/expert-data-
visualization