Skip to content

Commit 91aad5e

Browse files
sgratzlsgratzl
authored
Merge pull request #15 from sgratzl/sgatzl/d3v6
upgrade to d3 v6
2 parents 10fbe8c + 16c9df8 commit 91aad5e

23 files changed

Lines changed: 11706 additions & 11156 deletions

‎README.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ License: BSD-3-Clause license
3131

3232
Download / Include:
3333

34-
- `<script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>`
34+
- `<script src="https://d3js.org/d3.v6.js" charset="utf-8"></script>`
3535
- https://github.com/d3/d3/releases/latest
3636

3737
## Credits
@@ -243,9 +243,7 @@ Most important selectors explained in an example
243243
</style>
244244
</head>
245245
<body>
246-
<div class="header">
247-
D3 Test
248-
</div>
246+
<div class="header">D3 Test</div>
249247
<div id="main">
250248
<p class="header">Lorem Impsum Header</p>
251249
<p>Lorem Impsum</p>
@@ -724,7 +722,7 @@ Adding linear and ordinal scale: [barchart04_scale.html](examples/barchart04_sca
724722

725723
## Interactivity
726724

727-
Interactivity is event-driven as in the usual DOM. However, you have easy access to the currently bound data-item. The raw DOM event is hidden but can be accessed using `d3.event`. This is useful for stopping the event propagation (bubbling) `d3.event.stopPropagation()` or preventing the default behavior `d3.event.preventDefault()`. Moreover, the current context of the function `this` is the current DOM element.
725+
Interactivity is event-driven as in the usual DOM. However, you have easy access to the currently bound data-item as the second argument to the event listener. The first argument is the DOM event itself, which is useful for stopping the event propagation (bubbling) or preventing the default behavior. Moreover, the current context of the function `this` is the current DOM element.
728726

729727
```js
730728
const data = [1, 2, 3];
@@ -738,8 +736,8 @@ const circles = d3
738736
.attr("r", 10)
739737
.attr("cy", 40)
740738
.attr("cx", (d, i) => 30 + i * 30)
741-
.on("click", function (d, i) {
742-
console.log(`clicked on: ${d} (${i})`);
739+
.on("click", function (event, d) {
740+
console.log(`clicked on: ${d}`);
743741
const circle = d3.select(this); // can't use arrow scoping
744742
circle.style("stroke", "orange");
745743
})

‎examples/barchart07_final_ts.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.t
1414
g.append("g").attr("class", "x axis");
1515
g.append("g").attr("class", "y axis");
1616

17-
// delcare the Data Element Type for proper typing
17+
// declare the data element type for proper typing
1818
interface IElem {
1919
temperature: number;
2020
location: {
@@ -36,7 +36,7 @@ const yaxis = d3.axisLeft(yscale);
3636

3737
/////////////////////////
3838

39-
d3.json("weather.json").then((json: IElem[]) => {
39+
d3.json<IElem[]>("weather.json").then((json: IElem[]) => {
4040
data = json;
4141

4242
update(data);
@@ -48,13 +48,13 @@ function update(new_data: IElem[]) {
4848
xscale.domain([0, d3.max(new_data, (d) => d.temperature)!]);
4949
yscale.domain(new_data.map((d) => d.location.city));
5050
//render the axis
51-
// specify the generic argument to enforce being a SVGGEelement
51+
// specify the generic argument to enforce being a SVGGElement
5252
g.select<SVGGElement>(".x.axis").transition().call(xaxis);
5353
g.select<SVGGElement>(".y.axis").transition().call(yaxis);
5454

5555
// Render the chart with new data
5656

57-
// DATA JOIN use the key argument for ensurign that the same DOM element is bound to the same data-item
57+
// DATA JOIN use the key argument for ensuring that the same DOM element is bound to the same data-item
5858
const rect = g
5959
.selectAll("rect")
6060
.data(new_data, (d) => (d as IElem).location.city) // key argument cannot be properly typed
@@ -85,7 +85,7 @@ function update(new_data: IElem[]) {
8585
rect.select("title").text((d) => d.location.city);
8686
}
8787

88-
//interactivity
88+
// interactivity
8989
d3.select<HTMLInputElement, unknown>("#filter-us-only").on("change", function () {
9090
// This will be triggered when the user selects or unselects the checkbox
9191
// since we typed the select such that this is a HTMLInputElement we can just use the this context and have proper autocompletion

‎examples/choropleth.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h1>US Choropleth Map</h1>
4747
const path = d3.geoPath(projection);
4848
const color = d3.scaleSequential(d3.interpolateBlues);
4949

50-
d3.json('https://cdn.jsdelivr.net/npm/us-atlas/states-10m.json').then((us) => {
50+
d3.json("https://cdn.jsdelivr.net/npm/us-atlas/states-10m.json").then((us) => {
5151
const states = topojson.feature(us, us.objects.states).features;
5252
const nation = topojson.feature(us, us.objects.nation).features[0];
5353

@@ -57,22 +57,24 @@ <h1>US Choropleth Map</h1>
5757
const data = states.map((feature) => ({
5858
feature: feature,
5959
name: feature.properties.name,
60-
value: Math.random() // random value
60+
value: Math.random(), // random value
6161
}));
6262

63-
const paths = svg.selectAll('path').data(data)
63+
const paths = svg
64+
.selectAll("path")
65+
.data(data)
6466
.join((enter) => {
65-
const p = enter.append('path');
66-
p.on('mouseenter', function() {
67+
const p = enter.append("path");
68+
p.on("mouseenter", function () {
6769
// move the SVG element after all other elements to be on the top
6870
d3.select(this).raise();
6971
});
70-
p.append('title');
72+
p.append("title");
7173
return p;
7274
})
73-
.attr('d', (d) => path(d.feature))
74-
.style('fill', (d) => color(d.value));
75-
paths.select('title').text((d) => d.name);
75+
.attr("d", (d) => path(d.feature))
76+
.style("fill", (d) => color(d.value));
77+
paths.select("title").text((d) => d.name);
7678
});
7779
</script>
7880
</body>

‎examples/css_example.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,7 @@
4141
</style>
4242
</head>
4343
<body>
44-
<div class="header">
45-
D3 Test
46-
</div>
44+
<div class="header">D3 Test</div>
4745
<div id="main">
4846
<p class="header">Lorem Impsum Header</p>
4947
<p>Lorem Impsum</p>

‎examples/mcv01_initial.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ <h3>Age Histogram</h3>
163163

164164
function wrangleData(filtered) {
165165
const ageHistogram = d3
166-
.histogram()
166+
.bin()
167167
.domain([0, 100])
168168
.thresholds(10)
169169
.value((d) => d.age);

‎examples/mcv02_piechart.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ <h3>Age Histogram</h3>
192192

193193
function wrangleData(filtered) {
194194
const ageHistogram = d3
195-
.histogram()
195+
.bin()
196196
.domain([0, 100])
197197
.thresholds(10)
198198
.value((d) => d.age);

‎examples/mcv03_interaction.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ <h3>Age Histogram</h3>
226226

227227
function wrangleData(filtered) {
228228
const ageHistogram = d3
229-
.histogram()
229+
.bin()
230230
.domain([0, 100])
231231
.thresholds(10)
232232
.value((d) => d.age);

‎examples/mcv04_morevisses.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ <h3>Age Histogram</h3>
197197
const path_enter = enter.append("path");
198198
// TODO register click handler to change selected sex in state and call updateApp()
199199
path_enter.append("title");
200-
path_enter.on("click", (d) => {
200+
path_enter.on("click", (e, d) => {
201201
if (state.selectedSex === d.data.key) {
202202
state.selectedSex = null;
203203
} else {
@@ -243,7 +243,7 @@ <h3>Age Histogram</h3>
243243

244244
function wrangleData(filtered) {
245245
const ageHistogram = d3
246-
.histogram()
246+
.bin()
247247
.domain([0, 100])
248248
.thresholds(10)
249249
.value((d) => d.age);

‎examples/mcv05_transitions.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ <h3>Survived Distribution</h3>
206206
const path_enter = enter.append("path");
207207
// TODO register click handler to change selected sex in state and call updateApp()
208208
path_enter.append("title");
209-
path_enter.on("click", (d) => {
209+
path_enter.on("click", (e, d) => {
210210
if (state.selectedSex === d.data.key) {
211211
state.selectedSex = null;
212212
} else {
@@ -255,7 +255,7 @@ <h3>Survived Distribution</h3>
255255

256256
function wrangleData(filtered) {
257257
const ageHistogram = d3
258-
.histogram()
258+
.bin()
259259
.domain([0, 100])
260260
.thresholds(10)
261261
.value((d) => d.age);
@@ -269,7 +269,7 @@ <h3>Survived Distribution</h3>
269269
}));
270270

271271
const fareHistogram = d3
272-
.histogram()
272+
.bin()
273273
.domain([0, d3.max(filtered, (d) => d.fare)])
274274
.value((d) => d.fare);
275275

‎examples/mcv06_final.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ <h3>Survived Distribution</h3>
218218
const path_enter = enter
219219
.append("path")
220220
.attr("d", (d, i) => arc(noSlice[i]))
221-
.on("click", (d) => {
221+
.on("click", (e, d) => {
222222
if (state[stateAttr] === d.data.key) {
223223
state[stateAttr] = null;
224224
} else {
@@ -270,7 +270,7 @@ <h3>Survived Distribution</h3>
270270

271271
function wrangleData(filtered) {
272272
const ageHistogram = d3
273-
.histogram()
273+
.bin()
274274
.domain([0, 100])
275275
.thresholds(10)
276276
.value((d) => d.age);
@@ -284,7 +284,7 @@ <h3>Survived Distribution</h3>
284284
}));
285285

286286
const fareHistogram = d3
287-
.histogram()
287+
.bin()
288288
.domain([0, d3.max(filtered, (d) => d.fare)])
289289
.value((d) => d.fare);
290290

0 commit comments

Comments
 (0)