DokuWiki dvd3js
https://www.wiki.leomartin.net/
2026-04-08T01:51:23+00:00DokuWiki
https://www.wiki.leomartin.net/
https://www.wiki.leomartin.net/lib/tpl/dokuwiki/images/favicon.icotext/html2016-04-14T17:56:19+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:adding_a_tooltip
https://www.wiki.leomartin.net/doku.php?id=dvd3js:adding_a_tooltip&rev=1460649379&do=diff
<- Using transitions and animationsGrouping, sorting, and adding axes ->
adding a tooltip
var bardata = [];
for (var i = 0; i < 50; i++) {
bardata.push(Math.round(Math.random() * 30));
}
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
// linear scale
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height]);
// ordinal scale
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width]);
var tooltip = d…text/html2016-04-14T17:34:05+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:adding_events
https://www.wiki.leomartin.net/doku.php?id=dvd3js:adding_events&rev=1460648045&do=diff
<- Creating meaningful color scalesUsing transitions and animations ->
adding events
-> D3 provide is own methods for handling events
-> on()
var bardata = [];
for (var i = 0; i < 100; i++) {
bardata.push(Math.random() * 30);
}
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
// linear scale
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height]);
// ordinal scale
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))…text/html2016-04-14T17:14:15+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:adding_quantitative_scales
https://www.wiki.leomartin.net/doku.php?id=dvd3js:adding_quantitative_scales&rev=1460646855&do=diff
<- Creating a simple bar chart with SVGUsing ordinal scales ->
adding quantitative scales
-> github.com/mbostock/d3/wiki/Scales
Trois types d'échelles :
* Échelles quantitatives - pour les domaines non continus d'entrées, comme les nombres
* linear (plus courante)
* identity
* power
* logtext/html2016-04-14T19:47:21+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:adjusting_margins
https://www.wiki.leomartin.net/doku.php?id=dvd3js:adjusting_margins&rev=1460656041&do=diff
<- Adding a horizontal guideUsing external data ->
adjusting margins
Margin conventions : bl.ocks.org/mbostock/3019563
var bardata = [];
for (var i=0; i < 50; i++) {
bardata.push(Math.round(Math.random()*100)+10)
}
bardata.sort(function compareNumbers(a,b) {
return a -b;
});
var margin = { top: 30, right: 30, bottom: 40, left:50 }
var height = 400 - margin.top - margin.bottom,
width = 600 - margin.left - margin.right,
barWidth = 50,
barOffset = 5;
var tempColor;
var …text/html2016-04-14T14:41:05+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:binding_data_to_the_dom
https://www.wiki.leomartin.net/doku.php?id=dvd3js:binding_data_to_the_dom&rev=1460637665&do=diff
<- Modifying attributes and CSSCreating subselections with enter() ->
Binding data to the DOM
Plusieurs manière d'ajouter de l'information, la plus simple : méthode data
d3.selectAll('.item')
.data([true, true, true]) // application aux seuls trois premiers éléments .item
.style('background', 'cyan');
d3.selectAll('.item')
.data([false, false, true]) // application aux troisième élément .item
.style('background', 'cyan');
var colors = ['red'];
d3.selectAll('.item')
.data(color…text/html2016-04-14T14:19:07+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:controlling_html_in_selections
https://www.wiki.leomartin.net/doku.php?id=dvd3js:controlling_html_in_selections&rev=1460636347&do=diff
<- Creating basic selectionsModifying attributes and CSS ->
Controlling HTML in selections
-> github.com/mbostock/d3/Selections
d3.select('.item')
.append('span') // append à la fin du .item
.html('contenu du span');text/html2016-04-14T13:11:15+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_a_document_structure
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_a_document_structure&rev=1460632275&do=diff
<- Downloading and installing D3Creating basic selections ->
Creating a document structure
<http://ethanschoonover.com/solarized>text/html2016-04-14T20:03:23+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_a_pie_layout
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_a_pie_layout&rev=1460657003&do=diff
<- Using external dataImproving our pie layout ->
Creating a pie layout
-> github.com/mbostock/d3/wiki/Layouts
-> github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
var width = 400;
var height = 400;
var radius = 200;
var colors = d3.scale.category20c();
var piedata = [
{
label: 'Maurice',
value: 1,
},
{
label: 'Mireille',
value: 50,
},
{
label: 'Bob',
value: 49,
},
];
var pie = d3.layout.pie()
.value(function (d) {
return d.value;
});
v…text/html2016-04-14T16:55:40+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_a_simple_bar_chart_with_svg
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_a_simple_bar_chart_with_svg&rev=1460645740&do=diff
<- Drawing SVG graphics with D3Adding quantitative scales ->
Creating a simple bar chart with SVG
var bardata = [20, 30, 45, 15];
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')
.style('fill', '#C61C6F')
.attr('width', barWidth)
.attr('height', function (d) {
return d;
})
.attr('x', func…text/html2016-04-14T13:16:24+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_basic_selections
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_basic_selections&rev=1460632584&do=diff
<- Creating a document structureControlling HTML in selections ->
Creating basic selection
d3.select('.item').text('nouveau texte'); // sél. le 1er .item
d3.select('.item:nth-child(2)').text('nouveau texte'); // sél. le 2eme .item note: pas 0-based
-> css-tricks.com/how-nth-child-workstext/html2016-04-14T17:35:07+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_meaningful_color_scales
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_meaningful_color_scales&rev=1460648107&do=diff
<- Using ordinal scalesAdding events ->
Creating meaningful color scales
var bardata = [];
for (var i = 0; i < 100; i++) {
bardata.push(Math.random() * 30);
}
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
// linear scale
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height]);
// ordinal scale
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width]);
var colors = d3.scale.linear()
//.domai…text/html2016-04-14T15:52:07+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:creating_subselections_with_enter
https://www.wiki.leomartin.net/doku.php?id=dvd3js:creating_subselections_with_enter&rev=1460641927&do=diff
<- Binding data to the DOMWhat is SVG ->
creating subselections with enter()
// html
<section id="chart"></section>
var objets = [
{ name: 'a',
color: 'red',
},
{ name: 'b',
color: 'orange',
},
{ name: 'c',
color: 'yellow',
},
];
d3.select('#chart').selectAll('div') // on sélectionne le chart ET les div qu'on met par la suite (et qui ne sont pas encore créés).
.data(objets)
.enter().append('div')
.classed('item',true)
.text(function (d) {
return d.name;
…text/html2016-04-14T13:00:47+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:downloading_and_installing_d3
https://www.wiki.leomartin.net/doku.php?id=dvd3js:downloading_and_installing_d3&rev=1460631647&do=diff
<- What is D3.jsCreating a document structure ->
-> d3js.org
-> github.com/mbostock/d3/wiki
Télécharger ou CDN :
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></scripts>text/html2016-04-14T16:36:52+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:drawing_svg_graphics_with_d3
https://www.wiki.leomartin.net/doku.php?id=dvd3js:drawing_svg_graphics_with_d3&rev=1460644612&do=diff
<- Understanding SVG primitivesCreating a simple bar chart with SVG ->
drawing SVG with d3
d3.select('#chart')
.append('svg')
.attr('width', 600)
.attr('height', 400)
.style('background', '#cccccc')
.append('rect')
.attr('x', 200)
.attr('y', 100)
.attr('width', 200)
.attr('height', 200)
.style('background', '#ff0000')text/html2016-04-14T18:14:49+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:grouping_sorting_and_adding_axes
https://www.wiki.leomartin.net/doku.php?id=dvd3js:grouping_sorting_and_adding_axes&rev=1460650489&do=diff
<- Adding a tooltipAdding a horizontal guide ->
Grouping, sorting, and adding axes
-> github.com/mbostock/d3/wiki/SVG-Axes
<code>var bardata = [];
for (var i = 0; i < 50; i++) {
bardata.push(Math.round(Math.random() * 30));
}
bardata.sort(function compareNumbers(a, b) {
return a - b;
});
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;text/html2016-04-14T20:24:42+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:improving_our_pie_layout
https://www.wiki.leomartin.net/doku.php?id=dvd3js:improving_our_pie_layout&rev=1460658282&do=diff
<- Creating a pie layoutWorking with force layouts ->
improving our pie layout
var width = 400;
var height = 400;
var radius = 200;
var colors = d3.scale.category20c();
var piedata = [
{ label: 'Maurice', value: 5 },
{ label: 'Mireille', value: 20 },
{ label: 'Bob', value: 10 },
{ label: 'Ginette', value: 12 },
{ label: 'Fernande', value: 8 },
];
var pie = d3.layout.pie()
.value(function (d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(radius);
var myChart = d…text/html2016-04-14T14:25:55+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:modifying_attributes_and_css
https://www.wiki.leomartin.net/doku.php?id=dvd3js:modifying_attributes_and_css&rev=1460636755&do=diff
<- Controlling HTML in selectionsBinding data to the DOM ->
Modifying attributes and CSS
-> s'applique aussi au SVG
d3.selectAll('.classe_a)
.attr('class', 'classe_b')/ remplace la ou les classes actuelles
.classed('classe_c', true); // toggle class sans toucher les autres présentes
d3.selectAll('.item)
.classed({ // on peut aussi passer un objet
'classe_a': true,
'classe_b': false,
'classe_c': true,
});
d3.selectAll('.item)
.style({
'background': 'red',
'paddi…text/html2016-04-14T16:06:32+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:understanding_svg_primitives
https://www.wiki.leomartin.net/doku.php?id=dvd3js:understanding_svg_primitives&rev=1460642792&do=diff
<- What is SVGDrawing SVG graphics with D3 ->
Understanding SVG primitives
<svg width="600" height="400" style="background: #cccccc">
<rect x="250" y="150" width="100" height="10" style="fill: #ff0000" />
<circle cx="200" cy="200" r="5" style="fill: #dd3333" />
<text x="10" y="20" font-size="25" fill="cyan">SVG</text>
<g id="triangle">
<polyline points="10 35, 30 10, 50 35" style="fill: #0000ff;" />
<polyline points="20 45, 40 20, 60 45" style="fill: #3333cc;" />
</g>
<!…text/html2016-04-14T19:35:04+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:using_external_data
https://www.wiki.leomartin.net/doku.php?id=dvd3js:using_external_data&rev=1460655304&do=diff
<- Adjusting marginsCreating a pie layout ->
Using external data
//data.tsv
name number
José 10
Childéric 65
Bernardo 23
Mireille 78
Rambo 80
var bardata = [];
d3.tsv('data.tsv', function (data) {
for (key in data) {
bardata.push({
name:data[key].nom,
nombre:data[key].nombre,
});
}
});text/html2016-04-14T17:36:53+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:using_ordinal_scales
https://www.wiki.leomartin.net/doku.php?id=dvd3js:using_ordinal_scales&rev=1460648213&do=diff
<- Adding quantitative scalesCreating meaningful color scales ->
Creating meaningful color scales
var bardata = [];
for (var i = 0; i < 100; i++) {
bardata.push(Math.random() * 30);
}
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
// linear scale
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height]);
// ordinal scale
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width]);
var colors = d3.s…text/html2016-04-14T17:49:40+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:using_transitions_and_animations
https://www.wiki.leomartin.net/doku.php?id=dvd3js:using_transitions_and_animations&rev=1460648980&do=diff
<- Adding eventsAdding a tooltip ->
Using transitions and animations
var bardata = [];
for (var i = 0; i < 50; i++) {
bardata.push(Math.random() * 30);
}
var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;
// linear scale
var yScale = d3.scale.linear()
.domain([0, d3.max(bardata)])
.range([0, height]);
// ordinal scale
var xScale = d3.scale.ordinal()
.domain(d3.range(0, bardata.length))
.rangeBands([0, width]);
var colors = d3.scale.linear()
//.domain([0, …text/html2016-04-14T12:49:30+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:what_is_d3.js
https://www.wiki.leomartin.net/doku.php?id=dvd3js:what_is_d3.js&rev=1460630970&do=diff
<- Using the exercise filesDownloading and installing D3 ->
What is d3.js?
* Framework/visualisation library for building data-driven graphics
* using open web standards
* familiar conventions
* Works with modern browsers (>IE9).
* CSS-like selector format
* JQuery like function chaining
*text/html2016-04-14T15:54:49+00:00Anonymous (anonymous@undisclosed.example.com)dvd3js:what_is_svg
https://www.wiki.leomartin.net/doku.php?id=dvd3js:what_is_svg&rev=1460642089&do=diff
<- Creating subselections with enter()Understanding SVG primitives ->
What is SVG ?
Why use SVG
* HTML lacks support for complex shapes
* SVG is HTML-like
* can be styled through CSS
* Drawing tools available
* easily scriptable