Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update tutorial for D3 v5 #30

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update tutorial for D3 v5 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6980767
update tutorial for D3 v5
yangdanny97 Sep 8, 2021
20c3959
fix web standards section arrow function
yangdanny97 Sep 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
# Intro to D3

This is the source for Square's [Intro to D3.js][intro-to-d3] tutorial, it's
a brief intro to d3.js with examples.
a brief intro to D3.js with examples.

This tutorial is intended for D3 v5-v7. For versions of the tutorial compatible with older versions of D3, please see the releases section of the repository.

[intro-to-d3]: https://square.github.io/intro-to-d3

Expand Down
4 changes: 2 additions & 2 deletions _includes/examples/axes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
</head>
<body>
<script type="text/javascript"
src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
src="{{ "/javascripts/d3.v5.min.js" | prepend: site.baseurl }}"></script>
<script type="text/javascript">
{% include examples/data.js %}

var x = d3.scaleTime()
.range([50, 250])
.domain(d3.extent(data, function(d) { return new Date(d.date); }));
.domain(d3.extent(data, d => new Date(d.date)));

{% include examples/axes.js %}
</script>
Expand Down
2 changes: 1 addition & 1 deletion _includes/examples/dom-styled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% include examples/dom.html %}

<script type="text/javascript"
src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
src="{{ "/javascripts/d3.v5.min.js" | prepend: site.baseurl }}"></script>
<script type="text/javascript"
src="{{ "/examples/dom.js" | prepend: site.baseurl }}"></script>
</body>
Expand Down
24 changes: 12 additions & 12 deletions _includes/examples/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
// DOM API
var clickMe = document.getElementById('click-me');
clickMe.onclick = function() {
if (this.style.backgroundColor) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'red';
}
clickMe.onclick = function () {
if (this.style.backgroundColor) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'red';
}
}

// D3 Selection API. Note: it attaches the
// callbacks to each element in the selection
d3.selectAll('.hover-me')
.on('mouseover', function() {
this.style.backgroundColor = 'yellow';
})
.on('mouseleave', function() {
this.style.backgroundColor = '';
});
.on('mouseover', function () {
this.style.backgroundColor = 'yellow';
})
.on('mouseleave', function () {
this.style.backgroundColor = '';
});
2 changes: 1 addition & 1 deletion _includes/examples/ex0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
</style>
</head>
<body>
<script src="../javascripts/d3.v4.min.js"></script>
<script src="../javascripts/d3.v5.min.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion _includes/examples/ex1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@
class="fancy" />
</svg>

<script src="../javascripts/d3.v4.min.js"></script>
<script src="../javascripts/d3.v5.min.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion _includes/examples/ex2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@
</svg>


<script src="../javascripts/d3.v4.min.js"></script>
<script src="../javascripts/d3.v5.min.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
<link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/css/graph.css" | prepend: site.baseurl }}">

<script type="text/javascript" src="{{ "/javascripts/d3.v4.min.js" | prepend: site.baseurl }}"></script>
<script type="text/javascript" src="{{ "/javascripts/d3.v5.min.js" | prepend: site.baseurl }}"></script>
</head>
2 changes: 1 addition & 1 deletion _layouts/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="post">
<h2>{{ page.title }}</h2>

<a href="https://github.com/square/intro-to-d3">
<a href="https://github.com/yangdanny97/intro-to-d3">
<img class="fork-me-on-github" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>

Expand Down
11 changes: 5 additions & 6 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,16 @@ D3 and gain a high-level understanding of this useful tool.

### Notes

The recent version of d3.js, v4, has some big breaks in the API from the
previous version (see all the details of the [v3-to-v4 transition][v3-v4] in the
D3 wiki). Since we expect this to be the future, and that people coming to learn
d3 would want to be up to date from the beginning, we have updated this tutorial
to work with the v4 version. We tagged the [v3 version][archive-v3] for
Major version updates in D3 sometimes come with breaking API changes. We have updated this tutorial
to work with the D3 v5-v7.

We tagged the [v3 version][archive-v3] and [v4 version][archive-v4] for
posterity.

<a href="{{ "/web-standards/" | prepend: site.baseurl }}" class="giant-button">
Let's get started!
</a>

[tweet]: https://twitter.com/andy_matuschak/status/365547794129358849
[v3-v4]: https://github.com/d3/d3/blob/master/CHANGES.md
[archive-v3]: https://github.com/square/intro-to-d3/releases/tag/archive-v3
[archive-v4]: https://github.com/square/intro-to-d3/releases/tag/archive-v4
8 changes: 0 additions & 8 deletions javascripts/d3.v4.min.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions javascripts/d3.v5.min.js
View file
Open in desktop

Large diffs are not rendered by default.

222 changes: 104 additions & 118 deletions javascripts/data-binding.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,108 @@
(function() {
/* Simple transition examples */
var days = [],
maxCount = 0;

d3.selectAll('.ex-2 .example-source table').each(function() {
var table = d3.select(this),
data = [];

table.selectAll('tbody tr').each(function() {
var row = d3.select(this),
product = null,
count = null;

row.selectAll('td').each(function(d, i) {
var td = d3.select(this);
if (i == 0) {
product = td.text();
} else {
count = parseInt(td.text());
maxCount = Math.max(count, maxCount);
}
});

data.push({
product: product,
count: count
});
})

days.push(data);
});

var sales = days[0];

var width = 300,
height = 75;

var x = d3.scaleLinear()
.range([0, 300])
.domain([0, maxCount]);
var y = d3.scaleBand()
.range([0, height])
.domain(sales.map(function(d, i) {
return d.product;
}));

(function() {
/* Plain example, jump transition */
var sales = days[0];
(() => {
/* Simple transition examples */
var days = [],
maxCount = 0;

d3.selectAll('.ex-2 .example-source table').each(function () {
var table = d3.select(this),
data = [];

table.selectAll('tbody tr').each(function () {
var row = d3.select(this),
product = null,
count = null;

row.selectAll('td').each(function (d, i) {
var td = d3.select(this);
if (i == 0) {
product = td.text();
} else {
count = parseInt(td.text());
maxCount = Math.max(count, maxCount);
}
});

data.push({
product: product,
count: count
});
})

days.push(data);
});

var svg = d3.select('.ex-2 .example-result svg')

d3.select('.ex-2 .toggle').on('click', function() {
sales = (sales == days[0]) ? days[1] : days[0];
update();
})

function update() {
var rects = svg.selectAll('rect')
.data(sales, function(d, i) { return d.product });

// When we enter, we add the DOM element
// and set up the things that won't change
var enterRects = rects.enter()
.append('rect')
.attr('x', x(0))
.attr('y', function(d, i) {
return y(d.product);
})
.attr('height', y.bandwidth())

// "rects" represents the update selection, we need to
// manually merge it with the enter selection to update
// all rects at the same time
rects.merge(enterRects)
.attr('width', function(d, i) {
return x(d.count);
});
};

update();
})();

(function() {
/* Fancy example, smooth transition */
var sales = days[0];

var svg = d3.select('.ex-3 .example-result svg');

d3.select('.ex-3 .toggle').on('click', function() {
sales = (sales == days[0]) ? days[1] : days[0];
update();
})

function update() {
var rects = svg.selectAll('rect')
.data(sales, function(d, i) { return d.product });

// When we enter, we add the DOM element
// and set up the things that won't change
var enterRects = rects.enter()
.append('rect')
.attr('x', x(0))
.attr('y', function(d, i) {
return y(d.product);
})
.attr('height', y.bandwidth())
.attr('width', function(d, i) {
return x(d.count);
});

rects.merge(enterRects).transition()
.duration(1000)
.attr('width', function(d, i) {
return x(d.count);
});
};

update();
})();
var width = 300,
height = 75;

var x = d3.scaleLinear()
.range([0, 300])
.domain([0, maxCount]);
var y = d3.scaleBand()
.range([0, height])
.domain(sales.map((d, i) => d.product));

(() => {
/* Plain example, jump transition */
var sales = days[0];

var svg = d3.select('.ex-2 .example-result svg')

d3.select('.ex-2 .toggle').on('click', () => {
sales = (sales == days[0]) ? days[1] : days[0];
update();
})

function update() {
svg.selectAll('rect')
.data(sales, (d, i) => d.product)
.join(
enter => {
enter.append('rect')
.attr('x', x(0))
.attr('y', (d, i) => y(d.product))
.attr('height', y.bandwidth())
.attr('width', (d, i) => x(d.count));
},
update => {
update.attr('width', (d, i) => x(d.count));
},
);
};

update();
})();

(() => {
/* Fancy example, smooth transition */
var sales = days[0];

var svg = d3.select('.ex-3 .example-result svg');

d3.select('.ex-3 .toggle').on('click', () => {
sales = (sales == days[0]) ? days[1] : days[0];
update();
})

function update() {
svg.selectAll('rect')
.data(sales, (d, i) => d.product)
.join(
enter => {
enter.append('rect')
.attr('x', x(0))
.attr('y', (d, i) => y(d.product))
.attr('height', y.bandwidth())
.attr('width', (d, i) => x(d.count));
},
update => {
update.transition().duration(1000)
.attr('width', (d, i) => x(d.count));
},
);
};

update();
})();
})();
14 changes: 7 additions & 7 deletions javascripts/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
(function() {
/* The examples are executable, let's execute them. */
var source = '';
(() => {
/* The examples are executable, let's execute them. */
var source = '';

d3.selectAll('.ex-exec .example-source').each(function() {
source += this.innerText;
});
d3.selectAll('.ex-exec .example-source').each(function () {
source += this.innerText;
});

eval(source);
eval(source);
})();
Loading