Simple Gist template to create and publish visualizations with D3.js V5.
-
-
Save iosonosempreio/789fa8f401d21d6d8ad4d1974fb3e059 to your computer and use it in GitHub Desktop.
D3 V5 Gist template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "id": "subj-1", | |
| "type": "subject", | |
| "sibling": "doubt-1", | |
| "start": 0, | |
| "end": 1099, | |
| "open": false, | |
| "level": 2 | |
| }, | |
| { | |
| "id": "doubt-1", | |
| "type": "doubt", | |
| "sibling": "subj-1", | |
| "start": 1100, | |
| "end": 1200, | |
| "open": false, | |
| "level": 5 | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>Title</title> | |
| <style> | |
| svg { | |
| background: #fbfbfb; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script> | |
| const margin = {top: 10, right: 10, bottom: 10, left: 10}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| let x = d3.scaleLinear() | |
| .range([0, width]) | |
| .domain([0,1200]) | |
| const svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + (margin.top + height/2) + ")"); | |
| const line = g.append('line') | |
| .classed('base-line', true) | |
| .attr('x1', x(0)).attr('y1', 0) | |
| .attr('x2', x(1200)).attr('y2', 0) | |
| .style('stroke-width', 1) | |
| .style('stroke', 'LAVENDER'); | |
| let segments = g.selectAll('.segments'); | |
| const update = (data) => { | |
| // console.log(data); | |
| segments = segments.data(data, d=>d.id ); | |
| segments.exit().remove(); | |
| segments = segments.enter().append('path') | |
| .attr('class', d=>d.type) | |
| .classed('segment', true) | |
| .attr('stroke-width', 2) | |
| .attr('stroke', 'black') | |
| .attr('fill', 'transparent') | |
| .style('cursor', 'pointer') | |
| .on('click', d=>{ | |
| let elment = data.find(dd=>dd.id===d.id) | |
| elment.open = !elment.open | |
| let sibling = data.find(dd=>dd.id===d.sibling.id) | |
| sibling.open = !sibling.open | |
| update(data); | |
| }) | |
| .merge(segments) | |
| .attr('d', d=>drawSegments(d)) | |
| } | |
| const drawSegments = (d) => { | |
| let path_d = ``; | |
| if (d.open) { | |
| path_d = `M ${x(d.start)},${0} l ${x(d.end) - x(d.start)},0`; | |
| } else { | |
| if (d.type == 'doubt') { | |
| const level = d.level; | |
| const w = x(d.end) - x(d.start); | |
| const s = x(d.sibling.end) - x(d.sibling.start); | |
| const l = w + s; | |
| const r = w/level/2; | |
| const curve = Math.PI*(r) | |
| let segment = (l - curve*level)/(2*level) | |
| segment = segment<0?0:segment; | |
| path_d = `M ${x(d.start)},${0} `; | |
| for (var i = 1; i <= level; i++) { | |
| if (i%2!==0) { | |
| path_d += `v ${ -1 * segment } a ${r} ${r*1} 180 0 1 ${2*r} 0 v ${ 1 * segment}`; | |
| } else { | |
| path_d += `v ${ 1 * segment } a ${r} ${r*1} 180 0 0 ${2*r} 0 v ${ -1 * segment}`; | |
| } | |
| } | |
| // console.log(path_d) | |
| } else if (d.type == 'subject') { | |
| path_d = `M ${x(d.start)},${0}`; | |
| } | |
| } | |
| return path_d; | |
| } | |
| d3.json('data.json').then(data=>{ | |
| data.forEach(d=>{ d.sibling = data.find( dd => dd.id === d.sibling ); }) | |
| update(data); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment