PhD Student at Texas A&M University studying Computer Science in the TAMU Computer Graphics Lab.
Public
Edited
Feb 4, 2023
test = {
const width = 200;
const height = 200;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox",`${-width / 2} ${-height / 2} ${width} ${height}`);
const pat = svg.append('pattern')
.attr("id", 'tile' )
.attr("width", 1)
.attr("height", 1)
.append("svg:image")
.attr("xlink:href", grassURL)
.attr("width", 100)
.attr("height", 150);
const pth = svg.append('path')
.attr("d", "M -75 -75 L -75 75 75 75 75 -75 -75 -75")
.attr("fill", "url(#tile)")
.attr("stroke", "#000")
.attr("stroke-width", '2');
//------------------------------------------------------------------------------
return svg.node();
}
{
// const pic = d3.create('svg')
// .attr('height', 500)
// .attr('width', 500);
let pic = svg`<svg width=500 height=500>`;
let hex = hexagon;
pic.append(
svg`<use xlink:href=#${
'testhex'
}
transform="translate(50,50)">`
);
// pic.append(hexagon)
// .attr('transform', 'rotate(0)');
// pic.append(hexagon);
return pic;
}
hexagon = {
const svg = d3.create('svg')
.attr('id', 'testhex')
.attr('height', 100)
.attr('width', 100)
.attr('style', 'border: 1px dashed')
.attr('transform', 'rotate(30)')
.on("click",function(){
console.log("hi")
const target = d3.select(this)
//target.attr("transform","rotate(30)")
target.selectAll('path').remove()
});
const p0 = svg.append('path')
.attr('d', 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0');
p0.attr('fill', 'red')
.attr('stroke', '#000')
.attr('stroke-width', 2);
// svg.on('click', function(e,d) {
// console.log('hey');
// });
return svg.node();
}
hexpath = {
return d3.create('path')
.attr('d', 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0')
.attr('fill', 'red')
.attr('stroke', '#000')
.attr('stroke-width', 2);
}
<svg width='600' height='600' id='htmlhex'>
<g>
<path d='M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0' fill='red' />
<path d='M 0,0 A 20 20 0 0 1 20 20 L 0,20 Z' fill='blue' />
</g>
</svg>
test2 = {
const ele = document.createElement('div');
const eled3 = d3.select(ele);
eled3.attr('class','row')
.attr('id','rowBoards');
return ele;
}
mutable tilestring = "riverStraight"
hexmap = {
const hm = d3.create('svg')
.attr('id', 'hexmap')
.attr('height', 300)
.attr('width', 300);
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
let x = j % 2 == 0 ? i*100 : i*100 - 50;
let y = j % 2 == 0 ? j*100 : j*100;
// let svg = hm.append('g')
// .attr('transform', 'translate(' + x + ',' + y + ')')
// .on("click",function(){
// const target = d3.select(this)
// target.selectAll('path').remove()
// Object.entries(tileMapping[tileSelected]).forEach((value, key) => {
// let p = svg.append('path');
// Object.entries(value[1]).forEach((value, key) => p.attr(value[0], value[1]))
// });
// target.attr('transform', 'translate(' + x + ',' + y + ')' +
// 'translate(' + 50 + ',' + 50 + ')' +
// 'rotate(60)' +
// 'translate(' + -50 + ',' + -50 + ')');
// target.attr('visibility','hidden');
// target.attr('id','myid');
// console.log(target.attr('id'));
// });
// let p = svg.append('path');
// Object.entries(tileMapping['blank']).forEach((value, key) => {
// Object.entries(value[1]).forEach((value, key) => p.attr(value[0], value[1]))
// });
Object.entries(tileMapping).forEach((tileMaps) => {
//console.log(tileMaps[0]);
let tileName = tileMaps[0];
//console.log(tileName+'.'+zeroPad(i,2)+'.'+zeroPad(j,2));
let g = hm.append('g')
.attr('transform', 'translate(' + x + ',' + y + ')')
.attr('id',tileName+'.'+zeroPad(i,2)+'.'+zeroPad(j,2));
Object.entries(tileMaps[1]).forEach((pathMaps) => {
//console.log(pathMaps[1]);
//let path = pathMaps[1];
let p = g.append('path');
Object.entries(pathMaps[1]).forEach((attr) => {
//console.log(attr);
p.attr(attr[0], attr[1]);
});
});
// NEED TO INSTEAD READ FROM A CSV AND HAVE CLICK FUNCTION UPDATE CSV REDRAWING ALL EVERY TIME
g.on('click',function() {
const target = d3.select(this);
console.log(target.attr('id'));
console.log(mutable tilestring)
target.attr('visibility','hidden');
});
});
}
}
return hm.node();
}
function zeroPad(num, places) {
return String(num).padStart(places, '0')
}
//Object.entries(tileMapping).forEach((value, key) => console.log(value));
Object.entries(tileMapping['blank']).forEach((value, key) => console.log(value));
Object.entries(hexLib.find(t=>t.name=='blank').paths[0]).forEach(([key, val]) => {
console.log(key); // the name of the current key.
console.log(val); // the value of the current key.
});
hexLib.find(t=>t.name=='blank').paths[0]
hexLib = [
{name: 'blank', paths: [
{d: 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0', fill: '#9CC57F', stroke: '#000'}
]},
{name: 'grass', paths: [
{d: 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0', fill: '#9CC57F', stroke: '#000'}
]}
]
jsontest = JSON.stringify([[{name: 'test0',id:0},{name: 'test1',id:1}],[{name: 'test2',id:2},{name: 'test3',id:3}]]);
//JSON.parse(gridDataJSON)
gridDataJSON = {
return JSON.stringify({width: gridWidth, height: gridHeight, data: gridData});
}
viewof loadGridData = {
const button = html`<button>LOAD GRID DATA`;
Object.defineProperty(button, "value", {get() { }});
button.onclick = () => {
const indata = JSON.parse(testSave);
mutable gridWidth = indata.width;
mutable gridHeight = indata.height;
//mutable gridData = indata.data;
console.log('LOADED');
for (var i = 0; i < gridWidth; i++) {
for (var j = 0; j < gridHeight; j++) {
//console.log(indata.data[i][j]);
gridData[i][j].tile = indata.data[i][j].tile;
gridData[i][j].rot = indata.data[i][j].rot;
if (indata.data[i][j].tile != 'blank') console.log(gridData[i][j].tile)
}
}
};
return button;
}
mutable gridWidth = 20
mutable gridHeight = 30
viewof tileSelected = Inputs.select(tileNames, {label: "Tile"})
grid = {
const grid = d3.create('svg')
.attr('id', 'hexmap')
.attr('height', (width / gridWidth * gridHeight * .86))
.attr('width', width);
for (var i = 0; i < gridWidth+1; i++) {
for (var j = 0; j < gridHeight; j++) {
// let x = j % 2 == 0 ? i*90 : i*90 - 45;
// let y = j % 2 == 0 ? j*80 : j*80;
if (i == 0 || i == (gridWidth)) {
if (j % 2 == 1) {
let x = j % 2 == 0 ? i*(width / gridWidth * .9) + gridWidth*(width / gridWidth * .05) : i*(width / gridWidth * .9) - (width / gridWidth * .45) + gridWidth*(width / gridWidth * .05);
let y = j*(width / gridWidth * .8);
let g = grid.append('g')
.attr('id','.'+zeroPad(i,2)+'.'+zeroPad(j,2))
.attr('transform', 'translate(' + x + ',' + y + ')');
Object.entries(tileMapping['oob']).forEach((pathMaps) => {
let p = g.append('path');
Object.entries(pathMaps[1]).forEach((attr) => {
p.attr(attr[0], attr[1]);
});
});
continue;
} else if (i == gridWidth) continue;
}
let x = j % 2 == 0 ? i*(width / gridWidth * .9) + gridWidth*(width / gridWidth * .05) : i*(width / gridWidth * .9) - (width / gridWidth * .45) + gridWidth*(width / gridWidth * .05);
let y = j*(width / gridWidth * .8);
let g = grid.append('g')
.attr('id','.'+zeroPad(i,2)+'.'+zeroPad(j,2))
.attr('transform', 'translate(' + x + ',' + y + ')' +
'translate(' + (width / gridWidth * .5) + ',' + (width / gridWidth * .5) + ')' +
'rotate(' + gridData[i][j].rot + ')' +
'translate(' + -(width / gridWidth * .5) + ',' + -(width / gridWidth * .5) + ')');
Object.entries(tileMapping[gridData[i][j].tile]).forEach((pathMaps) => {
let p = g.append('path');
Object.entries(pathMaps[1]).forEach((attr) => {
p.attr(attr[0], attr[1]);
});
});
g.on('click',function() {
const target = d3.select(this);
let id = target.attr('id');
let idsplit = id.split('.');
let ti = parseInt(idsplit[1]);
let tj = parseInt(idsplit[2]);
if (gridData[ti][tj].tile == tileSelected) {
let rot = gridData[ti][tj].rot;
gridData[ti][tj].rot = rot + 60;
target.attr('transform', 'translate(' + x + ',' + y + ')' +
'translate(' + (width / gridWidth * .5) + ',' + (width / gridWidth * .5) + ')' +
'rotate(' + (rot + 60) + ')' +
'translate(' + -(width / gridWidth * .5) + ',' + -(width / gridWidth * .5) + ')');
} else {
gridData[ti][tj].tile = tileSelected;
target.selectAll('path').remove()
Object.entries(tileMapping[tileSelected]).forEach((value, key) => {
let p = g.append('path');
Object.entries(value[1]).forEach((value, key) => p.attr(value[0], value[1]))
});
}
});
}
}
return grid.node()
}
mutable gridData = {
const gridData = gridDataClear;
//gridData[0][0].tile = 'grass';
//gridData[2][1].tile = 'riverYL';
return gridData;
}
gridDataClear = {
const gridData = [];
for (var i = 0; i < gridWidth; i++) {
gridData[i] = [];
for (var j = 0; j < gridHeight; j++) {
gridData[i][j] = {
row: i,
col: j,
tile: 'blank',
rot: 0
};
}
}
return gridData;
}
tileNames = ['blank','oob','grass','riverStraight','riverYL','riverYR','riverTri']
mutable tileMapping = {
let blankPath0 = new Map();
//blankPath0['d'] = 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0';
blankPath0['d'] = 'M ' + (width / gridWidth * .5) + ' 0 L ' + (width / gridWidth * .07) + ' ' + (width / gridWidth * .25) + ' ' + (width / gridWidth * .07) + ' ' + (width / gridWidth * .75) + ' ' + (width / gridWidth * .5) + ' ' + (width / gridWidth) + ' ' + (width / gridWidth * .93) + ' ' + (width / gridWidth * .75) + ' ' + (width / gridWidth * .93) + ' ' + (width / gridWidth * .25) + ' ' + (width / gridWidth * .5) + ' 0';
blankPath0['fill'] = '#FFF';
blankPath0['stroke'] = '#000';
blankPath0['stroke-width'] = 2;
//blankPath0['visibility'] = 'visible';
let oobPath0 = new Map();
oobPath0['d'] = blankPath0['d'];
oobPath0['fill'] = '#6E6E6E';
oobPath0['stroke'] = '#000';
oobPath0['stroke-width'] = 2;
let grassPath0 = new Map();
//grassPath0['d'] = 'M 50 0 L 7 25 7 75 50 100 93 75 93 25 50 0';
grassPath0['d'] = blankPath0['d'];
grassPath0['fill'] = '#9CC57F';
grassPath0['stroke'] = '#000';
grassPath0['stroke-width'] = 2;
let riverStraightPath0 = new Map();
//riverStraightPath0['d'] = 'M 7 50 L 93 50';
riverStraightPath0['d'] = 'M ' + (width / gridWidth * .07) + ' ' + (width / gridWidth * .5) + ' L ' + (width / gridWidth * .93) + ' ' + (width / gridWidth * .5);
riverStraightPath0['stroke'] = '#60AAC0';
riverStraightPath0['stroke-width'] = (width / gridWidth * .1);
let riverYLPath0 = new Map();
riverYLPath0['d'] = 'M ' + (width / gridWidth * .07) + ' ' + (width / gridWidth * .5) +
' C ' + (width / gridWidth * .5) + ' ' + (width / gridWidth * .5) +
' ' + (width / gridWidth * .5) + ' ' + (width / gridWidth * .5) +
' ' + (width / gridWidth * .715) + ' ' + (width / gridWidth * .125);
riverYLPath0['fill'] = 'none';
riverYLPath0['stroke'] = '#60AAC0';
riverYLPath0['stroke-width'] = (width / gridWidth * .1);
let riverYRPath0 = new Map();
riverYRPath0['d'] = 'M ' + (width / gridWidth * .07) + ' ' + (width / gridWidth * .5) +
' C ' + (width / gridWidth * .5) + ' ' + (width / gridWidth * .5) +
' ' + (width / gridWidth * .5) + ' ' + (width / gridWidth * .5) +
' ' + (width / gridWidth * .715) + ' ' + (width / gridWidth * .875);
riverYRPath0['fill'] = 'none';
riverYRPath0['stroke'] = '#60AAC0';
riverYRPath0['stroke-width'] = (width / gridWidth * .1);
let map = new Map();
map['blank'] = [
blankPath0
];
map['oob'] = [
oobPath0
];
map['grass'] = [
grassPath0
];
map['riverStraight'] = [
grassPath0,
riverStraightPath0
];
map['riverYL'] = [
grassPath0,
riverStraightPath0,
riverYLPath0
];
map['riverYR'] = [
grassPath0,
riverStraightPath0,
riverYRPath0
];
map['riverTri'] = [
grassPath0,
riverStraightPath0,
riverYLPath0,
riverYRPath0
];
return map;
}
BootStrap5Style = {
return html`<code>css</code> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">`
}
BootStrap5 = require("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js")
d3 = require("d3@5")
$ = require("jquery")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
