30:T118d,chart = { const svg = d3.select(DOM.svg(width, height)); const def = svg.append('defs'); def.html(` `) const g = svg.append("g") .selectAll("g") .data(bins) .join("g"); var barWidth = width / (bins.length); // var barMargin = 6; // var marginYLabelAndBar = 30; // var angle = -45; g.append("path") .attr("stroke", "black") .attr("stroke-width", .1) .style("padding-left", 10) .style("margin-left", 10) .style("fill", d=>{ const grad = `url(#grad${Math.round(d3.randomUniform(1,4)())})`; return grad; }) .style("opacity",".5") .attr("opacity", 1) .attr("d", d => (!d.lower || !d.upper) ? `` : ` M${x(d.x0)+1},${y(d.upper)} H${x(d.x1)} V${y(d.lower)} H${x(d.x0)+1} Z `); svg.selectAll("g") .append("rect") .data(bins) .enter() g.append("rect") .attr("stroke", "black") .attr("stroke-width", .5) .style("fill","white") .style("opacity",1) .attr("x", function(d) {return x(d.x0);}) .attr("y", function(d) {return y(d.q1)+1;}) .attr('width', 5) .attr('height',5); svg.selectAll("g") .append("rect") .data(bins) .enter() g.append("rect") .attr("stroke", "blue") .attr("stroke-width", .5) .style("fill","white") .style("opacity",1) .attr('width', 5) .attr('height', 5) //.attr('height', d=>x(d.x1)-x(d.x0)) .attr('transform', d=>`translate(${x(d.x0) + (x(d.x1)-x(d.x0))/2},${y(d.q3)}) rotate(45)`); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 20]) .on("zoom", zoomed)); function zoomed() { g.attr("transform", d3.event.transform); } var labels = g.selectAll("g") .append("rect") .data(bins) .enter() .append("text") .style("text-anchor", "start") .text( function (d) { return d.titolo_racconto }) .attr("font-family", "Arial") .attr("font-size", "6px") .attr("fill", "black") .attr('transform', d=>`translate(${x(d.x0) + (x(d.x1)-x(d.x0))/2},${y(d.q3)}) rotate(-90)`) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }31:[] 2e:{"title":"Box Plot","cells":[{"id":0,"value":"md`# Box Plot\n\nBox Plot - Trama - Calvino - Working sheet\n\nSketching visual models with code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"bins = json.slice(0,214).map((v,i) => { v.x0 = i + 2; v.x1 = v.x0 + 1; return v })","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"// json = d3.json(\"https://gist.githubusercontent.com/bbruneau/d1b6d01d99e248b03749bbe9380af35b/raw/5c08cfa5fe6f64926be93878bb1d3a9193f3b721/kalani-quantiles.json\");\njson = d3.csv('https://raw.githubusercontent.com/bea92/boxplot-calvino/master/data.csv', (v) => v)","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"x = d3.scaleLinear()\n .domain([d3.min(bins, d => d.x0), d3.max(bins, d => d.x1)])\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"y = d3.scaleLinear()\n .domain([-3, 35]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"xAxis = g => g.attr(\"transform\", `translate(0,${height-20})`).call(d3.axisBottom(xScale));","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"xScale = d3.scaleTime()\n .domain([startDate, endDate])\n .range([padding, width]); // map these the the chart width = total width minus padding at both sides\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"endDate = new Date(bins[bins.length - 1].date.split(/-/).map(v => parseInt(v)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"startDate = new Date(bins[0].date.split(/-/).map(v => parseInt(v)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"d\"))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"padding = 70","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = ({top: 1, right: 1, bottom: 1, left: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}