Untitled / Stephen Wood

brain = {

const height = 400;

const svg = d3

.create("svg")

.attr('width',width/2)

.attr('height',height)

.attr("viewBox", [0,0,1000,1000])

var gOutline = svg.append("g")

.attr("id", "brain_outline")

.selectAll("path")

.data(outline)

.join("path")

.attr("class", "outline")

.attr("d",d=>d.d)

.attr("id",d=>d.id)

.attr("transform",d=>d.transform)

.attr("style",d=>d.style)

var gFills = svg.append("g")

.selectAll('path')

.data(fillsections)

.join("path")

.attr("class", "bp")

.attr("d",d=>d.d)

.attr("id",d=>d.id)

.attr("style",d=>d.style)

var gOverlay = svg.append("g")

.selectAll('path')

.data(overlays)

.join("path")

.attr("class", "touch")

.attr("d",d=>d.d)

.attr("id",d=>d.id)

.attr("style",d=>d.style)

.on("mouseover", function(d) {

/* the target element */

var target = d3.select('#'+this.id.slice(2,))

console.log(target.style('fill'))

target.transition().duration(250)

.style("stroke", d3.hsl(target.style('fill')).brighter(0.2))

.attr("class","bp shadow")

.style("stroke-width", "2px")

.style("stroke-opacity", "1")

.attr("opacity", '1')

/* The other elements */

d3.selectAll('.bp').filter(e => e.id !== this.id.slice(2,))

.transition().duration(100)

.attr("class","bp")

.style("stroke-width", "0px")

.attr("opacity", '0.5')

/* the accordian

console.log(this.id);

var panel_to_active = content.filter(o => { return o.name === this.id.slice(2,) });

var panel = document.getElementById('panel-'+panel_to_active.name);

panel.display = 'block';

*/

})

.on("mouseout", function(d) {

d3.selectAll('.bp')

.transition().duration(200)

.style("stroke-width", "0px")

.attr("opacity", '1.0')

})

// svg.selectAll('g').attr("transform",`translate(-${width/8},0)`)

const p = document.createElement("div");

p.appendChild(svg.node());

p.appendChild(otherhtml);

return p;

}

otherhtml = {

var table = document.createElement('div');

//table.style.float = 'right';

table.style.border = '1px solid red';

for (let e in content) {

let button = document.createElement("button");

button.setAttribute('class', 'accordion');

button.innerHTML = `${content[e].title}`

let panel = document.createElement("div",{"class":"panel"});

panel.setAttribute('class', 'panel');

panel.setAttribute('id', 'panel-'+content[e].name);

let p = document.createElement("p")

p.innerHTML = content[e].text

panel.appendChild(p);

table.appendChild(button);

table.appendChild(panel);

button.addEventListener("click", function() {

this.classList.toggle("active");

var panel = this.nextElementSibling;

if (panel.style.maxHeight) {

panel.style.maxHeight = null;

} else {

panel.style.maxHeight = panel.scrollHeight + "px";

}

});

}

return table;

}

content = await d3.json('https://gist.githubusercontent.com/wooduk/4bbe051a25b891be551cc2f3a8fe5f2d/raw/6f59c72dd8f75ecea7466cb7a6f9a47f94a81f87/skills.json')

html`<style>

/* Style the buttons that are used to open and close the accordion panel */

.accordion {

background-color: #eee;

color: #444;

cursor: pointer;

padding: 18px;

width: 100%;

text-align: left;

border: none;

outline: none;

transition: 0.4s;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.active, .accordion:hover {

background-color: #ccc;

}

/* Style the accordion panel. Note: hidden by default */

.panel {

padding: 0 18px;

background-color: white;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

}

</style>`

chart = {

const width = 975;

const height = 600;

const svg = d3.select(DOM.svg(width, height));

// set the ranges

var t = d3.scaleTime().range([0, width]);

t.domain(d3.extent(data, function(d) { return d.start; }));

const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin} ${margin})`);

const groups = g

.selectAll("g")

.data(data)

.enter()

.append("g")

.attr("class", "civ")

groups.attr("transform", (d,i)=>`translate(0 10)`)

svg

.append("g")

.attr("transform", (d,i)=>`translate(${margin} ${height-margin})`)

.call(axisBottom)

return svg.node();

}

margin=70

x = d3.scaleLinear()

//.domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])

.domain([tp("1979-01-01"),tp("2020-12-31")])

.range([0, width - margin - margin])

axisBottom = d3.axisBottom(x)

.tickPadding(2)

.tickFormat(d3.timeFormat("%Y"))

d3 = require('d3@5')

data = [

{from: tp("1982-01-01"), to:tp("2020-01-02"), type: "edu", title: "Got educated", subtitle: "@ school of life", url: "http://example.com"},

]

Purpose-built for displays of data