Consumo pescado / SECOS

compositepltAll = html`

<div> ${viewof selReg}</div>

</br>

<font size="+1.5"><strong>¿Qué pescados son los que más se consumen?</strong></font></br>

${FdonutItemsReg}

</div>

<font size="+1.5"><strong>¿Dónde se consumen?</strong></font></br>

${FdonutRestReg}

</div>

<style>

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body, svg {

font-family: 'Raleway', serif;

/* font-size: 36px; */

}

.ifrblock {

display: block;

margin: 0;

height: 508px;

padding: 0;

}

.halfcol {

display: "flex";

flex-basis: "50%"

text-align: "center";

}

@font-face {

font-family: cocogoose;

src: url('${await cocogoose.url()}');

}

</style>

`

cocogoose = FileAttachment("Cocogoose-Pro-Semilight-trial.ttf")

viewof selReg = Inputs.select(regionalfish.map(d => d.region), {sort: true, unique: true, label: "Seleccione:", width: 320})

FdonutItemsReg = {

var margin = { top: 10, left: 20, right: 5, bottom: 10 }

const height = (750 - margin.left - margin.right);

const width = height

const radius = (Math.min(width, height) - margin.top - margin.bottom )/ 2;

const arc = d3.arc()

.innerRadius(radius * 0.35) // This is the size of the donut hole

.outerRadius(radius * 0.8);

const arcIns = d3.arc()

.innerRadius(radius * 0.8) // line insertion

.outerRadius(radius * 0.8);

const outerArc = d3.arc()

.innerRadius(radius * 0.8)

.outerRadius(radius * 1.1)

const pie = d3.pie()

.padAngle(1 / radius)

.sort(null)

.value(d => d.pct);

const color = d3.scaleOrdinal()

.domain(filteredRegFish.map(d => d.item))

.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), filteredRegFish.length).reverse());

const svg = d3.create("svg")

.attr("width", width-2)

.attr("height", height-145)

.attr("viewBox", [-width / 2, -height / 2, width, height])

.attr("style", "width: 100%; height: auto; font: 32px Raleway;");

svg.append("g")

.selectAll()

.data(pie(filteredRegFish))

.join("path")

.attr("fill", d => color(d.data.item))

.attr("d", arc)

.append("title")

.text((d) => `n = ${d.data.SbjNum}`)

;

// polylines to labels

svg.append("g")

.selectAll('allPolylines')

.data(pie(filteredRegFish))

.join('polyline')

.attr("stroke", "gray")

.style("fill", "none")

.attr("stroke-width", 0.5)

.attr('points', function(d) {

const posA = (arcIns.centroid(d)) // line insertion in the slice

const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that

const posC = outerArc.centroid(d); // Label position = almost the same as posB

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left

posC[0] = radius * 0.9 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left

return [posA, posB, posC]

})

//labels

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size","2em")

.selectAll('allLabels')

.data(pie(filteredRegFish))

.join('text')

.text(d => d.data.item)

.attr('transform', function(d) {

const pos = outerArc.centroid(d);

const midangle = (d.startAngle + (d.endAngle - d.startAngle) / 2)

pos[0] = radius * 0.91 * (midangle < Math.PI ? 1 : -1);

return `translate(${pos})`;

})

.style('text-anchor', function(d) {

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

return (midangle < Math.PI ? 'start' : 'end')

});

// percentages

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "1.7em")

.attr("text-anchor", "middle")

.selectAll()

.data(pie(filteredRegFish))

.join("text")

.attr("transform", d => `translate(${arc.centroid(d)})`)

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("font-weight", "bold")

.attr("fill-opacity",0.9)

.text(d => d.data.pct.toFixed(0)+"%"));

//svg.append("text")

// .attr("x", 5)

// .attr("y", 5)

// .attr("text-anchor", "middle")

// .style("font-size", "16px")

// .style("text-decoration", "underline")

// .text("Consumo reg");

return svg.node();

}

FdonutRestReg = {

var margin = { top: 10, left: 20, right: 5, bottom: 10 }

const height = (750 - margin.left - margin.right);

const width = height

const radius = (Math.min(width, height) - margin.top - margin.bottom )/ 2;

const arc = d3.arc()

.innerRadius(radius * 0.35) // This is the size of the donut hole

.outerRadius(radius * 0.8);

const arcIns = d3.arc()

.innerRadius(radius * 0.8) // line insertion

.outerRadius(radius * 0.8);

const outerArc = d3.arc()

.innerRadius(radius * 0.7)

.outerRadius(radius * 1)

const pie = d3.pie()

.padAngle(1 / radius)

.sort(null)

.value(d => d.value);

const color = d3.scaleOrdinal()

.domain(filterRegRestF.map(d => d.name))

.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), filterRegRestF.length).reverse());

const svg = d3.create("svg")

.attr("width", width-5)

.attr("height", height-145)

.attr("viewBox", [-width / 2, -height / 2, width, height])

.attr("style", "width: 100%; height: auto; font: 32px Raleway;");

svg.append("g")

.selectAll()

.data(pie(filterRegRestF))

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", arc);

// polylines to labels

svg.append("g")

.selectAll('allPolylines')

.data(pie(filterRegRestF))

.join('polyline')

.attr("stroke", "gray")

.style("fill", "none")

.attr("stroke-width", 0.7)

.attr('points', function(d) {

const posA = (arcIns.centroid(d)) // line insertion in the slice

const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that

const posC = outerArc.centroid(d); // Label position = almost the same as posB

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left

posC[0] = radius * 0.6 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left

return [posA, posB, posC]

})

//labels

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "2em")

.selectAll('allLabels')

.data(pie(filterRegRestF))

.join('text')

.text(d => d.data.name)

.attr('transform', function(d) {

const pos = outerArc.centroid(d);

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

pos[0] = radius * 0.6 * (midangle < Math.PI ? 1 : -1);

return `translate(${pos})`;

})

.style('text-anchor', function(d) {

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

return (midangle < Math.PI ? 'start' : 'end')

});

// percentages

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "1.7em")

.attr("text-anchor", "middle")

.selectAll()

.data(pie(filterRegRestF))

.join("text")

.attr("transform", d => `translate(${arc.centroid(d)})`)

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("font-weight", "bold")

.attr("fill-opacity", 1)

.text(d => d.data.value.toFixed(0)+"%"));

return svg.node();

}

Type Table, then Shift-Enter. Ctrl-space for more options.

FdonutNationalRest = {

var margin = { top: 10, left: 20, right: 5, bottom: 10 }

const height = (750 - margin.left - margin.right);

const width = height

const radius = (Math.min(width, height) - margin.top - margin.bottom )/ 2;

const arc = d3.arc()

.innerRadius(radius * 0.35) // This is the size of the donut hole

.outerRadius(radius * 0.8);

const arcIns = d3.arc()

.innerRadius(radius * 0.8) // line insertion

.outerRadius(radius * 0.8);

const outerArc = d3.arc()

.innerRadius(radius * 0.8)

.outerRadius(radius * 1.1)

const pie = d3.pie()

.padAngle(1 / radius)

.sort(null)

.value(d => d.value);

const color = d3.scaleOrdinal()

.domain(natrestconsdic.map(d => d.name))

.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), natrestconsdic.length).reverse());

const svg = d3.create("svg")

.attr("width", width-5)

.attr("height", height-145)

.attr("viewBox", [-width / 2, -height / 2, width, height])

.attr("style", "width: 100%; height: auto; font: 32px Raleway;");

svg.append("g")

.selectAll()

.data(pie(natrestconsdic))

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", arc)

.append("title")

.text((d) => `${d.data.name}: ${d.data.value *100 + "%"}`);

// polylines to labels

svg.append("g")

.selectAll('allPolylines')

.data(pie(natrestconsdic))

.join('polyline')

.attr("stroke", "gray")

.style("fill", "none")

.attr("stroke-width", 1)

.attr('points', function(d) {

const posA = (arcIns.centroid(d)) // line insertion in the slice

const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that

const posC = outerArc.centroid(d); // Label position = almost the same as posB

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left

posC[0] = radius * 0.6 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left

return [posA, posB, posC]

})

//labels

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "2em")

.selectAll('allLabels')

.data(pie(natrestconsdic))

.join('text')

.text(d => d.data.name)

.attr('transform', function(d) {

const pos = outerArc.centroid(d);

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

pos[0] = radius * 0.61* (midangle < Math.PI ? 1 : -1);

return `translate(${pos})`;

})

.style('text-anchor', function(d) {

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

return (midangle < Math.PI ? 'start' : 'end')

});

// percentages

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "1.7em")

.attr("text-anchor", "middle")

.selectAll()

.data(pie(natrestconsdic))

.join("text")

.attr("transform", d => `translate(${arc.centroid(d)})`)

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("font-weight", "bold")

.attr("fill-opacity", 1)

.text(d => (d.data.value*100)+"%"));

return svg.node();

}

FdonutItemsNat = {

var margin = { top: 10, left: 20, right: 5, bottom: 10 }

const height = (750 - margin.left - margin.right);

const width = height

const radius = (Math.min(width, height) - margin.top - margin.bottom )/ 2;

const arc = d3.arc()

.innerRadius(radius * 0.35) // This is the size of the donut hole

.outerRadius(radius * 0.8);

const arcIns = d3.arc()

.innerRadius(radius * 0.8) // line insertion

.outerRadius(radius * 0.8);

const outerArc = d3.arc()

.innerRadius(radius * 0.7)

.outerRadius(radius * 1)

const pie = d3.pie()

.padAngle(1 / radius)

.sort(null)

.value(d => d.value);

const color = d3.scaleOrdinal()

.domain(confishallrd.map(d => d.name))

.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), confishallrd.length).reverse());

const svg = d3.create("svg")

.attr("width", width-5)

.attr("height", height-145)

.attr("viewBox", [-width / 2, -height / 2, width, height])

.attr("style", "width: 100%; height: auto; font: 32px Raleway;");

svg.append("g")

.selectAll()

.data(pie(confishallrd))

.join("path")

.attr("fill", d => color(d.data.name))

.attr("d", arc)

.append("title")

.text((d) => `n = ${d.data.SbjNum}`)

;

// polylines to labels

svg.append("g")

.selectAll('allPolylines')

.data(pie(confishallrd))

.join('polyline')

.attr("stroke", "gray")

.style("fill", "none")

.attr("stroke-width", 1)

.attr('points', function(d) {

const posA = (arcIns.centroid(d)) // line insertion in the slice

const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that

const posC = outerArc.centroid(d); // Label position = almost the same as posB

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left

posC[0] = radius * 0.8 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left

return [posA, posB, posC]

})

//labels

svg.append("g")

.attr("font-family", "Raleway")

// .attr("font-size", "2em")

.selectAll('allLabels')

.data(pie(confishallrd))

.join('text')

.text(d => d.data.name)

.attr('transform', function(d) {

const pos = outerArc.centroid(d);

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

pos[0] = radius * 0.81 * (midangle < Math.PI ? 1 : -1);

return `translate(${pos})`;

})

.style('text-anchor', function(d) {

const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2

return (midangle < Math.PI ? 'start' : 'end')

});

// percentages

svg.append("g")

.attr("font-family", "Raleway")

//.attr("font-size", "1.7em")

.attr("text-anchor", "middle")

.selectAll()

.data(pie(confishallrd))

.join("text")

.attr("transform", d => `translate(${arc.centroid(d)})`)

.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")

.attr("x", 0)

.attr("y", "0.7em")

.attr("font-weight", "bold")

.attr("fill-opacity", 1)

.text(d => d.data.value.toFixed(0)+"%"));

return svg.node();

}

Type Table, then Shift-Enter. Ctrl-space for more options.

data =natrestconsdic

Type Table, then Shift-Enter. Ctrl-space for more options.

filteredRegFish = regionalfish.filter(d => d.region == selReg)

filterRegRestF = fishregrest.filter(d=> d.region== selReg)

Purpose-built for displays of data