import { range, area, pie, arc, select, selectAll, csvParse, csv, } from 'd3'; import PieSVG from './PieSVG'; import { parameters } from '/parameters'; import { indices } from './indices'; import { indices_all } from './indices_all'; import { donut_chart } from './donut_chart'; var dataset = csv('spots.csv').then((d) => console.log(d)); const width = 960; const height = 500; const strokeWidth = 8; const circleRadius = width / 6.5 - width / 36 - strokeWidth / 2 - 5; const circle1_cx = width / 6; const circle2_cx = width / 2; const circle3_cx = (width * 5) / 6; const circle_cy = (3 / 4) * height - 8; const donut_width = 55; const tab_height = 18; const tab_width = 110; const tab_window_height = 160; const background_color = '#d9d8d4'; 10; const deltaDeg = (Math.PI * 2) / 55; const textIndent = 3; const extraBorder = 13; const textIndent2 = extraBorder - textIndent; const stroke_width = 2; let borderPathGen = indices_all.map((d) => { return `M${ (d.R + extraBorder) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + extraBorder) * Math.cos((d.indexStart - 1) * deltaDeg) }L${ (d.R - donut_width) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R - donut_width) * Math.cos((d.indexStart - 1) * deltaDeg) }A${d.R - donut_width},${d.R - donut_width},0,0,1,${ (d.R - donut_width) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R - donut_width) * Math.cos((d.indexEnd - 1) * deltaDeg) }L${ (d.R + extraBorder) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + extraBorder) * Math.cos((d.indexEnd - 1) * deltaDeg) }`; }); let textPathGen = indices_all.map((d, i) => { if (d.indexStart < 16) { return `M${ (d.R + textIndent) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexStart - 1) * deltaDeg) }A${d.R + textIndent},${d.R + textIndent},0,0,1,${ (d.R + textIndent) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexEnd - 1) * deltaDeg) }`; } else if (d.indexStart > 40) { return `M${ (d.R + textIndent) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexStart - 1) * deltaDeg) }A${d.R + textIndent},${d.R + textIndent},0,0,1,${ (d.R + textIndent) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexEnd - 1) * deltaDeg) }`; } else { return `M${ (d.R + textIndent2) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + textIndent2) * Math.cos((d.indexEnd - 1) * deltaDeg) }A${d.R + textIndent2},${d.R + textIndent2},0,0,0,${ (d.R + textIndent2) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + textIndent2) * Math.cos((d.indexStart - 1) * deltaDeg) }`; } }); let borderPath = indices.map((d, i) => { return `M${ (d.R + extraBorder) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + extraBorder) * Math.cos((d.indexStart - 1) * deltaDeg) }L${ (d.R - donut_width) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R - donut_width) * Math.cos((d.indexStart - 1) * deltaDeg) }A${d.R - donut_width},${d.R - donut_width},0,0,1,${ (d.R - donut_width) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R - donut_width) * Math.cos((d.indexEnd - 1) * deltaDeg) }L${ (d.R + extraBorder) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + extraBorder) * Math.cos((d.indexEnd - 1) * deltaDeg) }`; }); let radialPath = indices.map((d, i) => { return `M${ (d.R + textIndent) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexStart - 1) * deltaDeg) }A${d.R + textIndent},${d.R + textIndent},0,0,1,${ (d.R + textIndent) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + textIndent) * Math.cos((d.indexEnd - 1) * deltaDeg) }`; }); let radialPath2 = indices.map((d, i) => { return `M${ (d.R + textIndent2) * Math.sin((d.indexEnd - 1) * deltaDeg) },${ -1 * (d.R + textIndent2) * Math.cos((d.indexEnd - 1) * deltaDeg) }A${d.R + textIndent2},${d.R + textIndent2},0,0,0,${ (d.R + textIndent2) * Math.sin((d.indexStart - 1) * deltaDeg) },${ -1 * (d.R + textIndent2) * Math.cos((d.indexStart - 1) * deltaDeg) }`; }); var areaGenerator = area() .x((p) => p[0]) .y0((p) => p[1]) .y1([height - 20]); const points = [ [10, tab_window_height - tab_height], [tab_width, tab_window_height - tab_height], [tab_width, tab_window_height], [width - 10, tab_window_height], [width - 10, height - 90], [10, height - 90], [10, tab_window_height - tab_height], ]; const Tab_area = areaGenerator(points); const deltaTheta = (Math.PI * 2) / 55; // Text Labels var xScale = d3 .scaleLinear() .domain([0, 30]) .range([0, width]); var yScale = d3 .scaleLinear() .domain([0, 30]) .range([height, 0]); const circleData = range(0, 31); console.log(Tab_area); // const Points = [ [10, tab_window_height - tab_height], [tab_width, tab_window_height - tab_height], [tab_width, tab_window_height], [width - 10, tab_window_height], [width - 10, height - 90], [10, height - 90], [10, tab_window_height - tab_height], ]; const App = () => ( ); const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Final Project

mauricio-acosta-reyes