Public
Edited
Mar 3, 2023
html`<svg height='120' width='120'><circle cx='60' cy='60' r='20' stroke='grey'
stroke-width='2' fill='aquamarine'></svg>`
html`
<svg width=100 height=100 style='overflow: visible; margin: 5px;'>
<path d='M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
`
html`
<svg width=100 height=100 style='border: 1px dashed'>
<path d='${petalPath}' fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
<code>100px</code>
`
petalPath = `
M 0 0
C 50 55 40 90 0 100
C -40 90 -50 55 0 0`
html`<svg width="100%" height=300>
<polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" />
</svg>`
coords = ['300,150 225,280 75,280 0,150 75,20 225,20']
function drawPoly1(coords, ctx) {
d3.select(ctx)
.append("path")
.attr("d", `M${coords.join("L")}Z`)
.attr("fill", "rgb(200,100,50)")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
return ctx;
}
drawPoly1(polyCoords, svgContext())
c = [300,150]
drawPoly1([
[c[0],c[1]], [c[0]-75,c[1]+130], [c[0]-225,c[1]+130],
[c[0]-300,c[1]], [c[0]-225,c[1]-130], [c[0]-75,c[1]-130]
], svgContext())
polyCoords = [[300,150], [225,280], [75,280], [0,150], [75,20], [225,20]]
i = [35, 80]
drawPoly1([
[i[0], i[1]],
[i[0]-i[0], (i[1]*.75)],
[(i[0]-i[0]), (i[1]*.25)],
[i[0], (i[1]-i[1])],
[i[0]*2, i[1]*.25],
[i[0]*2, i[1]*.75]
],
svgContext())
function svgContext() {
return DOM.svg(width, height);
}
height = width / 6
hex = {
const p = [(600/2),(500/2)] //basePosition
const i = [35,80] // hexcoords
const hexGridData = hexGrid.map((d,i) => [...d, data[i]])
const hexColors = {5: 'green', 50: 'blue', 200: 'purple'}
const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]
const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
const svg = d3.create("svg")
.attr('width', 600)
.attr('height', 520)
const hexes = svg.selectAll('path')
.data(hexGridData)
.enter()
.append('path')
.transition()
.duration(3000)
.attr('transform', (d, i) => `translate(${hexPos(d)})`)
.attr('d', `M${coords.join("L")}Z`)
.attr('fill', d => hexColors[d[2]] || 'green')
.attr('stroke', 'white')
.attr('fill-opacity', 0.7)
.attr('stroke-width', 2)
//return svg.node()
}
data = {
let s = [0,0,0]
const hexF = 100/37, len = testsurfaceapi.features.length
testsurfaceapi.features.forEach(d => {
d.properties.SCORE === 200 ? (s[0]=s[0]+1) :
(d.properties.SCORE === 50 ? (s[1]=s[1]+1) : (s[2]=s[2]+1))
})
const hexPer = [Math.round((s[0]/len*100)/hexF),Math.round((s[1]/len*100)/hexF),Math.round((s[2]/len*100)/hexF)]
const hexTypes = Array().concat(Array(hexPer[0]).fill(200))
.concat(Array(hexPer[1]).fill(50))
.concat(Array(hexPer[2]).fill(5))
return hexTypes
}
filDat = {
return data.map((d,i) => {
//console.log(d);
let z;
i <= 3
? z = {coords: hexGrid2[i], score: 200, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]}
: (i === 4 ? z = {coords: hexGrid2[i], score: filter, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]}
: z = {coords: hexGrid2[i], score: d, translate: [hexGrid2[i][0]+i, hexGrid2[i][1]-i]} )
return z
})
}
red = {
let summary = {HIGH: [], MED:[], LOW: []}
data.forEach(d => {
d === 200 ? summary.HIGH.push(d)
: d === 50 ? summary.MED.push(d)
: summary.LOW.push(d)
})
return summary
}
hexNew = {
const p = [(600/2),(400/2)] //basePosition
const i = [35,80] // hexcoords
const hexGridData = hexGrid2.map((d,i) => [...d, filterData[i]])
const getHexagraphSummary = (data) => {
let s = {HIGH: [], MED:[], LOW: []};
data.forEach(d => {
d[2] === 200 ? s.HIGH.push(d[2])
: d[2] === 50 ? s.MED.push(d[2])
: s.LOW.push(d[2])
})
return {HIGH: `% score 200 - ${s.HIGH.length}`,
MED: `% score 50 - ${s.MED.length}`,
LOW: `% score 50 - ${s.LOW.length}` };
// return sums
}
console.log(getHexagraphSummary(hexGridData));
const hexColors = {5: "rgba(0, 224, 135, 0.7)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"}
const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]
const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
const svg = d3.create("svg")
.attr('width', 580)
.attr('height', 460)
svg.selectAll('path')
.data(hexGridData)
.join(
enter => {
enter.append('path')
.transition()
.duration(1000)
.attr('transform', (d, i) => `translate(${hexPos(d)})`)
.attr('d', `M${coords.join("L")}Z`)
.attr('fill', d => hexColors[d[2]] || "rgba(0, 224, 135, 0.7)")
.attr('stroke', 'white')
.attr('stroke-width', 2)
.transition()
.attr('coords', d => d)
svg.append("text")
.attr("x", (width / 2))
.attr("y", 35)
.style("font-size", "10px")
.transition()
.duration(2000)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.attr("font-family", "palatino linotype")
.text("Michigan Regions Covid Data")
},
update => update
.transition()
.duration(5000)
.attr('d', function(d) {
return d;
})
.selection(),
exit => exit
.transition().duration(2000)
.selection(),
)
//console.log(svg.node())
return svg.node()
}
hexNew2 = {
const p = [(600/2),(400/2)] //basePosition
const i = [35,80] // hexcoords
const hexGridData = filDat2;
const hexColors = {5: "rgba(0, 224, 135, 0.4)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"}
const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]
const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]];
const coordsInit = [[i[0]+10, i[1]-10],[i[0]-i[0]+10, (i[1]*.75)-10],[(i[0]-i[0]+10), (i[1]*.25)-10],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]];
const element = this || scrollSVG(html`<svg width=${width} height=${svgHeight}></svg>`)
const svg = d3.select(element).select('svg')
const t = svg.transition().duration(1000)
const g = svg.selectAll('g')
.data(hexGridData, d => d.id)
.join(
enter => {
const g = enter.append('g')
.attr('opacity', 0)
// .attr('faksdsde', d => console.log(d))
.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
g.selectAll('svg')
.data(hexGridData, d => d)
.attr('faksdsde', d => console.log('fakeski'))
//.attr('faksdsde', d => console.log(d))
.join('path')
.attr('opacity', 0.3)
.attr('d', `M${coords.join("L")}Z`)
.attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)")
.attr('fill-opacity', 0.5)
//.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
.attr('stroke', 'white')
.attr('stroke-width', 2)
.transition(t)
//.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`)
//.attr('d', `M${coords.join("L")}Z`)
//.attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)")
console.log('enter')
svg.append("text")
.attr("x", (width / 2))
.attr("y", 35)
.style("font-size", "4px")
.transition()
.duration(2000)
.attr("text-anchor", "bottom")
.style("font-size", "22px")
.attr("font-family", "palatino linotype")
.text("Michigan Regions Covid Data")
g.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '0')
.style('font-size', '.7em')
.style('font-style', 'italic')
//.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`)
.text(d => d.score)
// .text(d => _.truncate(d.title, {length: 20}))
return g
},
update => update,
exit => {
exit.transition(t)
.attr('opacity', 0)
.remove()
console.log('exit')
}
)
g.transition(t)
// // // after the flowers have been entered, animate its opacity to 1
.attr('opacity', 0.5)
.attr('test', d => console.log(d))
// .attr('d', `M${coordsInit.join("L")}Z`)
.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`)
//return element
}
hexNew3 = {
const rectWidth = 40
const svgHeight = 460
const svg = html`<svg height=${svgHeight} style='overflow: visible' />`
const code = html`<code />`
const button = html`<button>new data!</button>`
const p = [(600/2),(400/2)] //basePosition
const i = [35,80] // hexcoords
const hexGridData = filDat2;
const hexColors = {5: "rgba(0, 224, 135, 0.4)", 50: "rgba(0, 168, 224, 0.8)", 200: "rgba(135, 0, 224, 0.9)"}
const hexPos = (d) => [(p[0]+d[0]),(p[1]+d[1])]
const coords = [[i[0], i[1]],[i[0]-i[0], (i[1]*.75)],[(i[0]-i[0]), (i[1]*.25)],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
const coordsInit = [[i[0]+10, i[1]-10],[i[0]-i[0]+10, (i[1]*.75)-10],[(i[0]-i[0]+10), (i[1]*.25)-10],
[i[0], (i[1]-i[1])],[i[0]*2, i[1]*.25], [i[0]*2, i[1]*.75]]
function updateBars() {
// select svg so that transition can be localized within selection
const t = d3.select(svg).transition().duration(1000)
const rect = d3.select(svg)
.selectAll('path')
.data(hexGridData, d => d)
.join(
enter => {
const rect = enter.append('path')
//.attr('fill-opacity', 0.5)
.attr('fill', d => hexColors[d.score] || "rgba(0, 224, 135, 0.3)")
.attr('stroke', 'white')
.attr('stroke-width', 2)
.attr('d', `M${coordsInit.join("L")}Z`)
.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
return rect
},
update => update,
exit => {
exit.transition(t)
.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
.attr('d', `M${coordsInit.join("L")}Z`)
.remove()
},
)
// animate enter + update selection
.attr('transform', (d, i) => `translate(${hexPos(d.translate)})`)
.transition(t)
.attr('d', `M${coords.join("L")}Z`)
.attr('transform', (d, i) => `translate(${hexPos(d.coords)})`)
}
// updateBars()
// return html`
// ${svg}
// `
}
_.times(10)
_ = require('lodash')
svgHeight
testsurfaceapi = FileAttachment("testSurfaceAPI.geojson").json()
// testsurfaceapi.features.filter(d => d.properties.SCORE === 200)
200/testsurfaceapi.features.length
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.
