Skip to content

Commit

Permalink
Sketch bins/countours
Browse files Browse the repository at this point in the history
  • Loading branch information
@paolobrasolin
paolobrasolin committed Jan 23, 2024
1 parent b563003 commit 03b448f
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 4 deletions.
13 changes: 13 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
},
"devDependencies": {
"@types/d3": "^7.4.3",
"@types/d3-hexbin": "^0.2.5",
"@types/jest": "^29.4.0",
"@types/node": "^18.13.0",
"@typescript-eslint/eslint-plugin": "^5.20.0",
Expand All @@ -53,6 +54,7 @@
"dependencies": {
"@hotwired/stimulus": "^3.2.1",
"d3": "^7.8.5",
"d3-hexbin": "^0.2.2",
"simpleheat-ts": "^1.0.1"
}
}
108 changes: 104 additions & 4 deletions src/controllers/map_controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const MAP_URL = {
};

import * as d3 from "d3";
import { Hexbin, hexbin } from "d3-hexbin";
import { buildTimeFilter, buildWordFilter } from "../utils";

export default class extends Controller {
Expand All @@ -23,6 +24,8 @@ export default class extends Controller {
projection!: d3.GeoProjection;
dots!: d3.Selection<SVGGElement, unknown, null, undefined>;
heat!: any;
hexbin!: Hexbin<[number, number]>;
svg!: any;

dataset: {
timestamp: Date;
Expand Down Expand Up @@ -61,12 +64,12 @@ export default class extends Controller {
bb
);
const geoGenerator = d3.geoPath().projection(this.projection);
const svg = d3
this.svg = d3
.select(this.containerTarget)
.append("svg")
.style("width", "100%")
.style("height", "100%");
svg
this.svg
.append("g")
.selectAll("path")
.data(bb.features)
Expand All @@ -81,6 +84,13 @@ export default class extends Controller {
.select("svg")
.append("g")
.attr("class", "dots");

this.hexbin = hexbin()
.radius(6) // size of the bin in px
.extent([
[0, 0],
[this.containerTarget.clientWidth, this.containerTarget.clientHeight],
]);
}

disconnect() {}
Expand All @@ -106,6 +116,14 @@ export default class extends Controller {
const maximum = d3.max(bins);
this.heat.max(maximum);
this.redrawheat();

//console.log(this.hexbin(this.dataset.map((d) => [d.x, d.y])));
const color = d3
.scaleLinear()
.domain([0, 600]) // Number of points in the bin?
.range(["transparent", "#69b3a2"]);

this.svg.append("g").attr("id", "hexbins");
//this.dots
// .selectAll("circle")
// .data(data)
Expand Down Expand Up @@ -137,14 +155,96 @@ export default class extends Controller {
}

applyFilter() {
this.throttledRedrawHeat();
this.redrawheat();
// this.dots.selectAll("circle").attr("visibility", (d: any) => {
// const visible = this.wordFilter(d) && this.timeFilter(d);
// return visible ? "visible" : "hidden";
// });
}

redrawheat() {
const dee = this.dataset
.filter(this.wordFilter)
.filter(this.timeFilter)
.map(({ x, y }) => [x, y]);
const mx = Math.max(...this.hexbin(dee).map((h) => h.length), 0);
const color = d3
.scaleLinear()
.domain([0, mx]) // Number of points in the bin?
.range(["blue", "red"]);
//.domain([0, 0.33 * 100, 0.66 * 100, 1 * 100]) // Number of points in the bin?
//.range(["transparent", "blue", "lime", "red"]);

const densityData = d3
.contourDensity()
.x((d) => d[0])
.y((d) => d[1])
.size([
this.containerTarget.clientWidth,
this.containerTarget.clientHeight,
])
.bandwidth(8)
.thresholds(64)(
this.dataset
.filter(this.wordFilter)
.filter(this.timeFilter)
.map(({ x, y }) => [x, y])
);

// this.svg
// .select("#hexbins")
// //.insert("g", "g")
// .selectAll("path")
// .data(densityData)
// .join(
// (enter: any) => {
// return enter
// .append("path")
// .attr("d", d3.geoPath())
// .attr("fill", (d: any) => color(d.value));
// },
// (update: any) => {
// return update
// .attr("d", d3.geoPath())
// .attr("fill", (d: any) => color(d.value));
// },
// (exit: any) => {
// return exit.remove();
// }
// );

//return;

this.svg
.select("#hexbins")
.selectAll("path")
.data(this.hexbin(dee))
.join(
(enter: any) => {
return enter
.append("path")
.attr("d", this.hexbin.hexagon())
.attr("transform", function (d: any) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("fill", function (d: any) {
return color(d.length);
});
},
(update: any) => {
return update
.attr("fill", function (d: any) {
return color(d.length);
})
.attr("transform", function (d: any) {
return "translate(" + d.x + "," + d.y + ")";
});
},
(exit: any) => {
return exit.remove();
}
);
return;
this.heat.clear();

const data = this.dataset
Expand Down Expand Up @@ -173,6 +273,6 @@ export default class extends Controller {

throttledRedrawHeat = this.throttle(
this.redrawheat.bind(this),
17 // 60fps
8 //17 // 60fps
);
}
10 changes: 10 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -791,6 +791,11 @@
dependencies:
"@types/geojson" "*"

"@types/d3-hexbin@^0.2.5":
"integrity" "sha512-EF/1szlis0vN810Q3F//NYeiOjiRZHiRlHADQzc8GMMeaJx9J662LHsxJYBqwqlsTMZuvVk1qLULyvC7p1JNAg=="
"resolved" "https://registry.npmjs.org/@types/d3-hexbin/-/d3-hexbin-0.2.5.tgz"
"version" "0.2.5"

"@types/d3-hierarchy@*":
"integrity" "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw=="
"resolved" "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz"
Expand Down Expand Up @@ -1579,6 +1584,11 @@
dependencies:
"d3-array" "2.5.0 - 3"

"d3-hexbin@^0.2.2":
"integrity" "sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w=="
"resolved" "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz"
"version" "0.2.2"

"d3-hierarchy@3":
"integrity" "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
"resolved" "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz"
Expand Down

0 comments on commit 03b448f

Please sign in to comment.