md`# aQuas plot`
chart = {
const height= 400;
const width = 1000;
const margin = ({top: 20, right: 430, bottom: 30, left: 60});
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style('background-color', "FEFDF8");
const yScale = d3.scaleLinear()
.domain([0, d3.max(DataUnrolled, d => d[variable])]).nice()
.range([height-margin.bottom , margin.top]);
const xScale = d3.scaleLinear()
.domain([2016,2020])
.range([margin.left, width-margin.right ]);
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale).ticks(width / 200).tickSizeOuter(0));
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
.call(g => g.select(".domain"))
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 6)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(variable));
let lineMultiCases = d3.line()
.x(d => xScale(d.Any))
.y(d => yScale(d[variable]));
////////////////////////////////////////////////////////////////////////DRAW AXIS
svg.append("g").call(yAxis);
svg.append("g").call(xAxis);
////////////////////////////////////////////////////////////////////////DRAW LINES
svg.selectAll('.line')
.data(DataGrouped)
.join('path')
.attr("class", "line")
.attr("d", d =>(lineMultiCases(d[1])))
.attr('stroke', sex=>(sex==="0"? "#5fa2c1": "grey" ) )
// the idea is grey for all
// #f27522 is orange 1 for women
// #5fa2c1 is blue 0 for men
//and then change saturation according to age
// and make it thicker for the region chosen in the map
.style("fill", "none")
.style("opacity", 0.5)
/////////////////////////////////////////////////////////////////////////ADD MAP
var dummy = svg.selectAll("rect")
.data(squares)
.join("rect")
.attr("x", d=>d.xplace)
.attr("y", d=>d.yplace)
.attr("height", d=> d.height)
.attr("width",d=> d.width )
.attr('stroke', 'grey')
.attr('fill', 'lightgrey')
svg.append("path")
.datum(regions)
.attr("stroke", "grey")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr(d=>regions.points)
d3.select('path').attr('d', regions);
return svg.node();
}
squares=[{id:61, xplace:700, yplace:150, width:40, height:40},{id:62, xplace:740, yplace:160, width:30, height:30},{id:63, xplace:740, yplace:120, width:40, height:40}]
graphicrs = {
const textmap = await FileAttachment("rsmapsvg.svg").text();
const documentmap = (new DOMParser).parseFromString(textmap, "image/svg+xml");
const map = d3.select(documentmap.documentElement).remove();
const pathselected = map.selectAll("[id='61']")
.attr("fill", "#FEFDF8")
.attr("stroke", "grey")
return map.node();
}
getmap = {
const documentmap = (new DOMParser).parseFromString(textmap, "image/svg+xml");
const map = d3.select(documentmap.documentElement).remove();}
md`**Apendix Hodgepodge**`
//const roll=Array.from(d3.rollup(DataGrouped[1], v => d3.sum(v, d => d.Ratio), d => d.Any);
//const roll=d3.rollup(DataGrouped, v => d3.sum(v, d => d.Ratio), d => d.Any);
d3Array = require('https://d3js.org/d3-array.v2.min.js');
md` functions unroll and rollUnroll from https://observablehq.com/@bayre/unrolling-a-d3-rollup`
d3 = require("d3@6")
import {checkbox} from "@jashkenas/inputs"
import {radio} from "@jashkenas/inputs"
html`<style>p { max-width: none; }</style>`
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.
