Skip to content

Commit 08a215a

Browse files
Theo-JaunetTheo-Jaunet
committed
grid
1 parent 6908fc4 commit 08a215a

4 files changed

Lines changed: 222 additions & 34 deletions

File tree

‎assets/js/collageGrid.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,9 @@ function makeCollageFromData(palettes, order, marks, row) {
250250
}
251251

252252
drawnMarks[order[j]] = {x: offX, y: offY, w: sourceW, h: sourceH}
253+
254+
255+
253256
tcon.drawImage(mark.source, offX - sourceW / 2, offY - sourceH / 2, sourceW, sourceH)
254257

255258
}

‎assets/js/collageHandler.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -649,21 +649,21 @@ function getRelationships(drawingData) {
649649
}
650650
}
651651

652-
/*
653-
for (const [key, value] of Object.entries(primitive)) {
654-
let t = getFromTo(key, drawingData, value)
655-
if (t) {
656-
res.push(t)
652+
/*
653+
for (const [key, value] of Object.entries(primitive)) {
654+
let t = getFromTo(key, drawingData, value)
655+
if (t) {
656+
res.push(t)
657+
}
657658
}
658-
}
659659
660-
for (const [key, value] of Object.entries(palette_cat)) {
661-
let t = getFromTo(key, drawingData, value)
662-
if (t) {
663-
res.push(t)
660+
for (const [key, value] of Object.entries(palette_cat)) {
661+
let t = getFromTo(key, drawingData, value)
662+
if (t) {
663+
res.push(t)
664+
}
664665
}
665-
}
666-
*/
666+
*/
667667

668668
return res
669669
}

‎assets/js/sandbox.js‎

Lines changed: 204 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ let chartAxis = {
77
}
88

99

10+
let gridMod = false
11+
1012
const datasetList = ["pinguin"]
1113

1214
let megaGlyph = {}
@@ -67,6 +69,17 @@ async function loadDataset(url) {
6769
chartDataset.data = data
6870
}
6971

72+
73+
function isCont(data, column) {
74+
let allVals = [...new Set(data.map(d => d[column]))]
75+
console.log(allVals);
76+
if (allVals.length > data.length * 0.1) {
77+
return true
78+
} else {
79+
return false
80+
}
81+
}
82+
7083
async function drawSvg() {
7184

7285
let svg = d3.select("#fakePreviewSvg")
@@ -131,19 +144,148 @@ async function drawSvg() {
131144
marks[NaN] = {source: defaultCont}
132145
marks[null] = {source: defaultCont}
133146

134-
console.log(marks);
135147

136-
svg.selectAll("dots")
137-
.data(data)
138-
.enter()
139-
.append("image")
140-
.attr("xlink:href", d => marks[d[dataBinding[encodings[0]]]].source.toDataURL("image/png"))
141-
.attr("x", d => xScale(d[chartAxis.x]))
142-
.attr("y", d => yScale(d[chartAxis.y]))
143-
.attr("width", d => marks[d[dataBinding[encodings[0]]]].source.width)
144-
.attr("height", d => marks[d[dataBinding[encodings[0]]]].source.height)
148+
let useColor = false
149+
let useMorph = false
150+
151+
152+
let useDatCol = ""
153+
let useDatMorph = ""
154+
155+
let lin = false
156+
157+
let colScale
158+
let linScale
159+
160+
if (megaGlyph[encodings[0]].color) {
161+
if (megaGlyph[encodings[0]].color.dataColumn !== "") {
162+
useDatCol = megaGlyph[encodings[0]].color.dataColumn
163+
useColor = true
164+
165+
if (isCont(data, useDatCol)) {
166+
lin = true
167+
linScale = d3.scaleLinear(d3.extent(data.map(d => d[useDatCol])), [0, 1])
168+
colScale = d3.interpolateRdYlBu
169+
} else {
170+
colScale = d3.scaleOrdinal(d3.schemeAccent);
171+
}
172+
}
173+
}
174+
175+
if (megaGlyph[encodings[0]].size) {
176+
if (megaGlyph[encodings[0]].size.dataColumn !== "") {
177+
useDatMorph = megaGlyph[encodings[0]].size.dataColumn
178+
useMorph = true
179+
if (isCont(data, useDatCol)) {
180+
lin = true
181+
182+
if (megaPalettes[encodings[0]].encodings.morph) {
183+
if (megaPalettes[encodings[0]].encodings.morph.min !== 0) {
184+
185+
let bounds = [megaPalettes[encodings[0]].encodings.morph.min.proto.canvas.width,
186+
megaPalettes[encodings[0]].encodings.morph.max.proto.canvas.width]
187+
linScale = d3.scaleLinear(d3.extent(data.map(d => d[useDatCol])), bounds)
188+
}
189+
}
190+
191+
}
192+
193+
194+
}
195+
}
196+
197+
if (gridMod) {
198+
199+
let xCumul = 5
200+
let yCumul = 5
201+
202+
let width = 700
203+
204+
for (let i = 0; i < data.length; i++) {
205+
206+
let d = data[i]
207+
let can = marks[d[dataBinding[encodings[0]]]].source
208+
let cl = 1
209+
if (useColor) {
210+
211+
if (lin) {
212+
let tcol = colScale(linScale(d[useDatCol])).replace("rgb(", "").replace(")", "").split(",")
213+
can = toColor(can, +tcol[0] * cl, +tcol[1] * cl, +tcol[2] * cl, 210)
214+
} else {
215+
let tcol = hexToRgb(colScale(d[useDatCol]))
216+
can = toColor(can, tcol.r * cl, tcol.g * cl, tcol.b * cl, 210)
217+
218+
}
219+
220+
removeColor(230, 230, 230, can, 25)
221+
222+
223+
}
224+
225+
226+
let tw = can.width
227+
let th = can.height
145228

146229

230+
svg.append("image")
231+
.attr("xlink:href", can.toDataURL("image/png"))
232+
.attr("x", xCumul)
233+
.attr("y", yCumul)
234+
.attr("width", tw)
235+
.attr("height", th)
236+
237+
xCumul += tw
238+
if (xCumul + tw > width) {
239+
yCumul += th
240+
xCumul = 5
241+
}
242+
243+
244+
}
245+
} else {
246+
247+
248+
svg.selectAll("dots")
249+
.data(data)
250+
.enter()
251+
.append("image")
252+
.attr("xlink:href", d => {
253+
let can = marks[d[dataBinding[encodings[0]]]].source
254+
let cl = 1
255+
if (useColor) {
256+
257+
if (lin) {
258+
let tcol = colScale(linScale(d[useDatCol])).replace("rgb(", "").replace(")", "").split(",")
259+
260+
console.log(tcol);
261+
can = toColor(can, +tcol[0] * cl, +tcol[1] * cl, +tcol[2] * cl, 210)
262+
} else {
263+
let tcol = hexToRgb(colScale(d[useDatCol]))
264+
can = toColor(can, tcol.r * cl, tcol.g * cl, tcol.b * cl, 210)
265+
266+
}
267+
268+
removeColor(230, 230, 230, can, 25)
269+
}
270+
return can.toDataURL("image/png")
271+
272+
})
273+
.attr("x", (d, i) => {
274+
275+
return xScale(d[chartAxis.x])
276+
277+
278+
})
279+
.attr("y", (d, i) => {
280+
281+
return yScale(d[chartAxis.y])
282+
283+
}
284+
)
285+
.attr("width", d => marks[d[dataBinding[encodings[0]]]].source.width)
286+
.attr("height", d => marks[d[dataBinding[encodings[0]]]].source.height)
287+
288+
}
147289
} else if (pal.displayType === "morph") {
148290

149291
let sizeScale = d3.scaleLinear(d3.extent(data.map(d => d[dataBinding[encodings[0]]])), [pal.encodings.morph.min.proto.size[0], pal.encodings.morph.max.proto.size[0]])
@@ -170,17 +312,53 @@ async function drawSvg() {
170312
let tmarks = makeMarks(encodings, data)
171313

172314
let order = getOrder(encodings)
315+
if (gridMod) {
173316

174-
svg.selectAll("dots")
175-
.data(data)
176-
.enter()
177-
.append("image")
178-
.attr("xlink:href", d =>
179-
makeCollageFromData(encodings, order, tmarks, d).toDataURL("image/png"))
180-
.attr("x", d => xScale(d[chartAxis.x]))
181-
.attr("y", d => yScale(d[chartAxis.y]))
317+
let xCumul = 5
318+
let yCumul = 5
319+
320+
let width = 700
321+
322+
for (let i = 0; i < data.length; i++) {
323+
324+
let d = data[i]
325+
326+
let can = makeCollageFromData(encodings, order, tmarks, d)
327+
328+
329+
330+
let tw = can.width
331+
let th = can.height
332+
333+
334+
svg.append("image")
335+
.attr("xlink:href", can.toDataURL("image/png"))
336+
.attr("x", xCumul)
337+
.attr("y", yCumul)
338+
.attr("width", tw)
339+
.attr("height", th)
340+
341+
xCumul += tw
342+
if (xCumul + tw > width) {
343+
yCumul += th
344+
xCumul = 5
345+
}
346+
347+
}
348+
} else {
349+
350+
351+
svg.selectAll("dots")
352+
.data(data)
353+
.enter()
354+
.append("image")
355+
.attr("xlink:href", d =>
356+
makeCollageFromData(encodings, order, tmarks, d).toDataURL("image/png"))
357+
.attr("x", d => xScale(d[chartAxis.x]))
358+
.attr("y", d => yScale(d[chartAxis.y]))
182359

183-
//TODO: here generate glyphs WRT data and use it as a single image
360+
361+
}
184362
}
185363

186364
populateSandboxMenu(data)
@@ -248,6 +426,7 @@ function makePaletteMenu(palettes, name = undefined) {
248426
delete megaGlyph[prev];
249427

250428
makeMarkTree()
429+
drawSvg()
251430
}
252431

253432
return select;
@@ -545,3 +724,9 @@ function getKeyByValue(object, value) {
545724
return Object.keys(object).find(key => object[key] === value);
546725
}
547726

727+
728+
function switchGrid() {
729+
730+
gridMod = !gridMod;
731+
drawSvg()
732+
}

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -321,19 +321,19 @@ <h3 style="width: 100%;text-align:center;display: inline-block;margin-top:3%">Da
321321
</div>
322322
</div>-->
323323
<!-- Grid Stuff------------------------------------------------------------------------>
324-
<div class="row" style="margin-top: 0;text-align: center;display:flex">
324+
<!-- <div class="row" style="margin-top: 0;text-align: center;display:flex">
325325
<div class="twelve columns">
326326
<h3 style="width: 100%;text-align:center;display: inline-block;margin-top:3%">Collage Grid
327327
</h3>
328328
329329
<div id="AllPaletteCont"></div>
330330
</div>
331-
</div>
331+
</div>-->
332332

333333
<!-- SANDBOX ???????????????????????? Stuff------------------------------------------------------------------------>
334334
<div class="row" style="margin-top: 0;text-align: center;display:flex">
335335
<div class="twelve columns">
336-
<h3 style="width: 100%;text-align:center;display: inline-block;margin-top:3%"> Sandbox
336+
<h3 style="width: 100%;text-align:center;display: inline-block;margin-top:3%"> Sandbox <button onclick="switchGrid()"> Grid Layout</button>
337337
</h3>
338338

339339
<div style="display: flex">

0 commit comments

Comments
 (0)