The avatar for @tophtucker
Toph Tucker
Published unlisted
Edited
Mar 31, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Changed in target
chart = {
  const svg = d3.select(DOM.svg(width, height))
      .style("background", "#fff")
      .style("width", "100%")
      .style("height", "auto");

  const {nodes, links} = sankey({
    nodes: data.nodes.map(d => Object.assign({}, d)),
    links: data.links.map(d => Object.assign({}, d))
  });

  svg.append("g")
    .selectAll("rect")
    .data(nodes)
    .join("rect")
      .attr("x", d => d.x0 + 1)
      .attr("y", d => d.y0)
      .attr("height", d => d.y1 - d.y0)
      .attr("width", d => d.x1 - d.x0 - 2)
      .attr("fill", d => {
        let c;
        for (const link of d.sourceLinks) {
          if (c === undefined) c = link.color;
          else if (c !== link.color) c = null;
        }
        if (c === undefined) for (const link of d.targetLinks) {
          if (c === undefined) c = link.color;
          else if (c !== link.color) c = null;
        }
    
    
  // Cor do NODE central igual aos links anteriores (versao nova)


-
         if (d.depth === 1 && (d.name === "2 ou + retenções" || d.name === "1 retenção" || d.name === "Sem retenções" || d.name === "3 ou + retenções" || d.name === "Sem ano de ensino" || d.name === "2 retenções" || d.name === "Sem observação")) return d3.color(d.targetLinks[0].color).brighter(0.5);

+
         if (d.depth === 1 && (d.name === "2 ou + retenções" || d.name === "1 retenção" || d.name === "Sem retenções" || d.name === "3 ou + retenções" || d.name === "Sem ano de ensino" || d.name === "2 retenções" || d.name === "Sem observação")) return d3.color(d.targetLinks[0].color).brighter(0.5).formatHsl();

    
    
 // Cor dos outros NODES 
    
        return (d3.color(c) || d3.color(color)).brighter(0.5);
     
      })
  
    .append("title")
      .text(d => `${d.name}\n${d.value.toLocaleString()}`);

  const link = svg.append("g")
      .attr("fill", "none")
    .selectAll("g")
    .data(links)
    .join("g")
      .attr("stroke", d => d3.color(d.color) || color)
      .style("mix-blend-mode", "multiply");

  link.append("path")
      .attr("d", d3.sankeyLinkHorizontal())
      .attr("stroke-width", d => Math.max(1, d.width));


  link.append("title")
      .text(d => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}`);

  svg.append("g")
      .style("font", "10px sans-serif")
    .selectAll("text")
    .data(nodes)
    .join("text")
      .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
      .attr("y", d => (d.y1 + d.y0) / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
      .text(d => d.name)
    .append("tspan")
      .attr("fill-opacity", 0.7)
      .text(d => ` ${d.value.toLocaleString()}`);

  return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = {
const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));
const nodeByName = new Map;
for (const link of links) {
if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});
if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});
}
return {nodes: Array.from(nodeByName.values()), links};
}

Insert cell
sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])
.nodeSort(inputOrder ? null : undefined)
.nodeWidth(25)
.nodePadding(padding)
.extent([[0, 5], [width, height - 5]])
Insert cell
width = 954
Insert cell
viewof height = {
const form = html`<form class="observablehq--inspect">height = <input name=i type=number min=0 value=400 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
Insert cell
viewof padding = {
const form = html`<form class="observablehq--inspect">padding = <input name=i type=number min=0 value=7 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
Insert cell
viewof color = {
const form = html`<form class="observablehq--inspect">color = <input name=i type=color value="#3ab53a" style="padding:2px;margin:-2px 0;"></form>`;
(form.oninput = () => form.value = form.i.value)();
return form;
}
Insert cell
import {rasterize, serialize} from "@mbostock/saving-svg"
Insert cell
d3 = require("d3@6", "d3-sankey@0.12")
Insert cell