23:null 24:["$","title",null,{"children":"Rotate or Wrap? Investigating cyclic time series readability | Kun-Ting Chen | Observable"}] 29:T465,numDataPoints = { let numDataPoints = 0; //Dynamic, random dataset let dataset = []; //Initialize empty array let inputdata = null; if (datasetname == "STATEN_ISLAND_Num_Traffic_Accidents2017.csv") { inputdata = d3.csvParse( await FileAttachment( "STATEN_ISLAND_Num_Traffic_Accidents2017.csv" ).text(), (d, _, columns) => { return d; } ); numDataPoints = inputdata.length; } else if ( datasetname == "STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv" ) { inputdata = d3.csvParse( await FileAttachment( "STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv" ).text(), (d, _, columns) => { return d; } ); numDataPoints = inputdata.length; } else if (datasetname == "averagerainfall.csv") { inputdata = d3.csvParse( await FileAttachment("averagerainfall.csv").text(), (d, _, columns) => { return d; } ); numDataPoints = inputdata.length; } else if (datasetname == "randomdailypatterns") { numDataPoints = numSampleDataPoints; } return numDataPoints; }2a:Tc0a,dataset = { //Dynamic, random dataset let dataset = []; //Initialize empty array let inputdata = null; if (datasetname == "STATEN_ISLAND_Num_Traffic_Accidents2017.csv") { inputdata = d3.csvParse( await FileAttachment( "STATEN_ISLAND_Num_Traffic_Accidents2017.csv" ).text(), (d, _, columns) => { let total = 0; for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]]; d.total = total; return d; } ); inputdata.forEach((obj, i) => { dataset.push([i + 1, parseInt(obj.frequency), obj.hour]); //Add new number to array }); } else if ( datasetname == "STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv" ) { inputdata = d3.csvParse( await FileAttachment( "STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv" ).text(), (d, _, columns) => { let total = 0; for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]]; d.total = total; return d; } ); inputdata.forEach((obj, i) => { let str = ""; switch (parseInt(obj.week)) { case 0: str = "Sun"; break; case 1: str = "Mon"; break; case 2: str = "Tue"; break; case 3: str = "Wed"; break; case 4: str = "Thu"; break; case 5: str = "Fri"; break; case 6: str = "Sat"; break; } dataset.push([i + 1, parseInt(obj.frequency), str]); //Add new number to array }); } else if (datasetname == "averagerainfall.csv") { inputdata = d3.csvParse( await FileAttachment("averagerainfall.csv").text(), (d, _, columns) => { let total = 0; for (let i = 1; i < columns.length; ++i) total += d[columns[i]] = +d[columns[i]]; d.total = total; return d; } ); inputdata.forEach((obj, i) => { dataset.push([i + 1, parseInt(obj.Rainfall), obj.State]); //Add new number to array }); } else if (datasetname == "randomdailypatterns") { // var xRange = getNext() * 50; //Max range of new x values // console.log("getNext(): "+getNext()); pseudorandomNumberGenerator(); let yRange = pseudorandomNumberGenerator() * 1000; //Max range of new y values for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times // var newNumber1 = Math.floor(getNext() * xRange); //New random integer let randomNumber = pseudorandomNumberGenerator(); let newNumber2 = Math.floor(randomNumber * yRange); //New random integer // console.log("yRange: "+yRange+", newNumber2: "+newNumber2+", randomNumber: "+randomNumber); dataset.push([i + 1, newNumber2, i + 1]); //Add new number to array, d[4] used for tickformat, e.g., string } } let startAngle = 0; let endAngle = 2 * Math.PI; let itemAngle = (endAngle - startAngle) / numDataPoints; return dataset; }2b:Tf71,renderRadial = { svgsRadial.selectAll(".cleanOnInit").remove(); //to override previous transform rotation svgGroupRadial.attr('transform', 'translate(' + [w / 2, h / 2] + ')'); configuration.angle = 0; svgGroupRadial .selectAll(".radialline") .data(d3.range(numDataPoints)) .enter() .append("line") .attr("y2", -barHeight - 20) .attr("class", "radialline" + " cleanOnInit") .style("stroke", "black") .style("stroke-width", ".5px") .attr("transform", function(d, i) { return "rotate(" + (i * 360) / numDataPoints + ")"; }); svgGroupRadial .selectAll('.radialarc') .data(dataset) .enter() .append('path') .attr("class", "radialarc" + " cleanOnInit") .attr('d', function(d) { return arc(d); }) .attr('fill', 'lightsteelblue') //lightsteelblue .attr('stroke', 'white') .attr('stroke-width', 1); let circles = svgGroupRadial .selectAll(".radialcircle") .data(yScaleRadial.ticks(5)) .enter() .append("circle") .attr("class", "radialcircle" + " cleanOnInit") .attr("r", function(d) { return rScale(d); }) .style("fill", "none") .style("stroke", "black") .style("visibility", bEnableDashedLine ? "visible" : "hidden") .style("stroke-dasharray", "2,2") .style("stroke-width", ".5px"); svgGroupRadial .selectAll(".radiallabel") .data(Array.from(dataset, d => d[2])) .enter() .append("text") .attr("class", "radiallabel" + " cleanOnInit") .style("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .style("fill", function(d, i) { return "#3e3e3e"; }) .append("textPath") .attr("xlink:href", "#label-path") .attr("startOffset", function(d, i) { return (i * 100) / numDataPoints + 50 / numDataPoints + '%'; }) .text(function(d) { return d; }); let angle = 0; let dragstartangle = 0; svgGroupRadial .append("rect") //Make a new rectangle .attr("x", -w / 4) //Set rect's position and size… .attr("y", -h / 2) .style("stroke-width", "2") .style("storke", "rgb(0,0,0)") // .style("fill", "none") .style("fill", "rgb(255,255,255)") .style("fill-opacity", 0) .attr("class", " cleanOnInit") .attr("width", h) .attr("height", h) .attr("draggable", true) .call( d3 .drag() .on('start', () => { let exy = [d3.event.x, d3.event.y], dxy = [0, 0]; dragstartangle = angleBetweenPoints(dxy, exy); }) .on("drag", () => { let exy = [d3.event.x, d3.event.y], dxy = [0, 0]; angle = configuration.angle + angleBetweenPoints(dxy, exy); angle -= dragstartangle; configuration.angle = angle; svgGroupRadial.attr( "transform", 'translate(' + [w / 2, h / 2] + ')' + "rotate(" + toDegrees(configuration.angle) + ",0, 0) " ); }) .on("end", () => {}) ); svgsRadial .append("g") .attr("class", "yAxis" + " cleanOnInit") .attr('transform', 'translate(' + [w / 2, 0] + ')') .style("visibility", bEnableTickMarks ? "visible" : "hidden") .call(yAxisRadial); svgsRadial .selectAll(".outercircle") .data([{ x: 0, y: 0 }]) .enter() .append("circle") .attr("cx", w / 2) .attr("cy", h / 2) .attr("r", h / 2 - 2) .attr("class", "outercircle") .style("fill", "none") .style("stroke", "black") .style("stroke-width", "1.5px"); svgsRadial .selectAll(".innercircle") .data([{ x: 0, y: 0 }]) .enter() .append("circle") .attr("cx", w / 2) .attr("cy", h / 2) .attr("r", innerRadius) .attr("class", "innercircle") .style("fill", "#E0E2DB") .style("stroke", "black") .style("stroke-width", "1.5px"); }2c:T143f,renderLinear = { svgsLinear.selectAll(".cleanLinearOnInit").remove(); //override previous axis transform translation configuration.xAxisX = 0; //Create Y axis svgsLinear .append("g") .attr("class", "yAxisLinear" + " cleanLinearOnInit") .style("visibility", bEnableTickMarks ? "visible" : "hidden") .attr("transform", "translate(" + padding + ",0)") .call(yAxisLinear); d3.select("g.yAxisLinear") .select("path") .remove(); //Create horizontal lines let horizontallines = svgsLinear .selectAll(".horizontalline") .data(yScaleLinear.ticks(5)) .enter() .append("line") .attr("class", "horizontalline" + " cleanLinearOnInit") .attr("x1", function(d) { return padding; }) .attr("y1", function(d) { return yScaleLinear(d); }) .attr("x2", function(d) { return w - padding * 2; }) .attr("y2", function(d) { return yScaleLinear(d); }) .style("fill", "none") .style("stroke", "black") .style("visibility", bEnableDashedLine ? "visible" : "hidden") .style("stroke-dasharray", "2,2") .style("stroke-width", ".5px"); //Create a clipPath svgsLinear .append("clipPath") //Make a new clipPath .attr("id", "chart-area") //Assign an ID .attr("class", ".clipPathRect" + " cleanLinearOnInit") .append("rect") .attr("x", padding) //Set rect's position and size… .attr("y", padding) .attr("width", w - padding * 3) .attr("height", h); svgsLinear .append("rect") //Make a new rectangle .attr("x", padding) //Set rect's position and size… .attr("y", padding) .style("stroke-width", "2") .style("storke", "rgb(0,0,0)") .style("fill", "rgb(255,255,255)") .style("fill-opacity", 0) .attr("width", w - padding * 3) .attr("height", h) .attr("class", "linearrect" + " cleanLinearOnInit") .attr("draggable", true) .call( d3 .drag() .on('start', () => { configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) .on("drag", () => { transformGroup( bHorizontalWrappingConfig, bVerticalWrappingConfig, bDiagonalWrappingConfig, graphics, d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY, configuration.internalDataset ); configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) .on("end", () => { transformGroup( bHorizontalWrappingConfig, bVerticalWrappingConfig, bDiagonalWrappingConfig, graphics, d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY, configuration.internalDataset ); configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) ); svgGroupLinear .attr("fill", "lightsteelblue") .style("mix-blend-mode", "multiply") .attr("clip-path", "url(#chart-area)") //Add reference to clipPath .call( d3 .drag() .on('start', () => { configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) .on("drag", () => { transformGroup( bHorizontalWrappingConfig, bVerticalWrappingConfig, bDiagonalWrappingConfig, graphics, d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY, configuration.internalDataset ); configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) .on("end", () => { transformGroup( bHorizontalWrappingConfig, bVerticalWrappingConfig, bDiagonalWrappingConfig, graphics, d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY, configuration.internalDataset ); configuration.dragStartX = d3.event.x; configuration.dragStartY = d3.event.y; }) ); //Create X axis for (let k = 0; k < 3; k++) { svgGroupLinear .append("g") .attr("class", "xAxis" + k + " cleanLinearOnInit") .attr( "transform", "translate(" + shiftDistance[3 + k].x + "," + (h - padding) + ")" ) .call(xAxisLinear); svgGroupLinear .selectAll("g.xAxis" + k) .select("path") .remove(); } //Create bars for (let k = 0; k < 3; k++) { svgGroupLinear .selectAll(".bar" + k) .data(configuration.internalDataset) .enter() .append("rect") .attr("class", "bar" + k + " cleanLinearOnInit") .attr("x", function(d) { return d[2] + shiftDistance[3 + k].x; }) .attr("y", function(d) { return yScaleLinear(d[1]); }) .attr("height", d => yScaleLinear(0) - yScaleLinear(d[1])) .attr("width", xScaleLinear.bandwidth()); } return svgGroupLinear; }2d:[{"id":"d32968e6f9e2b4b40dbc0efe9ee73b83be9d076740341a79133c7e4eb566fe1f57cec8e6de1403ed67256008d060cb08fee2dc0dbb938ca03841fa5a263d5d0b","href":"https://static.observableusercontent.com/files/d32968e6f9e2b4b40dbc0efe9ee73b83be9d076740341a79133c7e4eb566fe1f57cec8e6de1403ed67256008d060cb08fee2dc0dbb938ca03841fa5a263d5d0b","name":"averagerainfall.csv","type":"text/csv","lastModified":1635392907005.836,"size":121},{"id":"76bc9c6f98b8801e54badb1665e129bb071dcfc7ffbe8a39e3f282bc1065358276a6c593d7c611d92f04d098e7e1f9bcae2200d16b5feed7fd4befe92d475806","href":"https://static.observableusercontent.com/files/76bc9c6f98b8801e54badb1665e129bb071dcfc7ffbe8a39e3f282bc1065358276a6c593d7c611d92f04d098e7e1f9bcae2200d16b5feed7fd4befe92d475806","name":"STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv","type":"text/csv","lastModified":1635392907005.836,"size":65},{"id":"eab7ff75a06ef860c06fd888442fceb770b5d5aeac072902e370bc1c68d089985e99ef7ca16c98ab6759d8b6b263ece01005dd129f3b4f0b0810f5dbad04531c","href":"https://static.observableusercontent.com/files/eab7ff75a06ef860c06fd888442fceb770b5d5aeac072902e370bc1c68d089985e99ef7ca16c98ab6759d8b6b263ece01005dd129f3b4f0b0810f5dbad04531c","name":"visualLinear.png","type":"image/png","lastModified":1635398773886.675,"size":21750},{"id":"db56a7abc2737ce38ea3bbb4464b5659f81910f2c89f55bd8b6d881b2916ad1ed420d2f4408bfe328bc35d57a4055973a664ecedbd7e6f83e2719e9ceeec5b79","href":"https://static.observableusercontent.com/files/db56a7abc2737ce38ea3bbb4464b5659f81910f2c89f55bd8b6d881b2916ad1ed420d2f4408bfe328bc35d57a4055973a664ecedbd7e6f83e2719e9ceeec5b79","name":"visualRadial.png","type":"image/png","lastModified":1635398774680.561,"size":79313},{"id":"ac3a6f5994f1d83dc331169a1d33e3e4ea6fc7ed9a6913d8d21874b7524957d174b3ce548b4e022c4d03f7bc1822a09db2a9f456515cf171d4372d435fdb5006","href":"https://static.observableusercontent.com/files/ac3a6f5994f1d83dc331169a1d33e3e4ea6fc7ed9a6913d8d21874b7524957d174b3ce548b4e022c4d03f7bc1822a09db2a9f456515cf171d4372d435fdb5006","name":"STATEN_ISLAND_Num_Traffic_Accidents2017.csv","type":"text/csv","lastModified":1635392907005.836,"size":190}] 27:{"id":"d414b44e125a82b8","slug":"rotate-or-wrap/2","title":"Rotate or Wrap? Investigating cyclic time series readability","thumbnail":"d0cd8ad745ffe7935d3c19c4faff736f21d459dd7852238a8fb7d8519aaae5f9","access_level":"public","create_time":"$D2021-10-28T03:48:27.005Z","update_time":"$D2021-12-27T03:51:04.461Z","view_time":null,"first_public_time":"$D2021-10-28T06:37:14.419Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"be54816255dcd07b","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":"starter_2024","bio":"I am interested in Information visualisation, graph drawing and layout algorithms. I am also interested in full-stack software development & agile software development process."},"version":871,"publish_version":871,"role":null,"authored":false,"authors":[{"type":"individual","id":"2986ef7c11c54a76","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":null,"bio":"I am interested in Information visualisation, graph drawing and layout algorithms. I am also interested in full-stack software development & agile software development process."}],"members":[{"type":"individual","id":"2986ef7c11c54a76","login":"kun-ting","name":"Kun-Ting Chen","avatar_url":"https://avatars-next.observableusercontent.com/a10ea236a5655729b1e9ef3d57ad0e1d5f87e4086d7359d894dd2c907031fc6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rotate or Wrap? Investigating cyclic time series readability","cells":[{"id":0,"value":"md`# Rotate or Wrap? Investigating cyclic time series readability`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md` #### Cyclic time series - \nWe often see charts representing cycles of days and nights, seasons or years. An example include hourly traffic accidents in [STATEN ISLAND in New York City](https://www.kaggle.com/pavetr/nypdcollisions/version/1,2017) between 2014 and 2017 as shown below. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`${await FileAttachment(\"visualLinear.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"md`#### Visual cut - \nHowever, standard linear charts often arrange 11pm at the right end and 1am at the left end. This may make the inspection of the trend across the *\"visual cut\" from 11pm across the page to 1am* difficult. For example, *\"what happens after 11pm? Is the trend strictly monotonically decreasing from 11pm to 1am?\"* \n\nTo answer this question, a user may need to mentally join the bars from 11pm across the page to 1am, which may potentially lead to incorrect judgement. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"md` #### Polar chart - \nOne common way to avoid the visual cut is to arrange cyclic time series in polar charts. Polar charts represent time in a cycle, allowing for continuous exploration of trends and patterns in any part of the temporal data. This no longer shows the *visual cut*.\n\nHowever, [existing literature](https://www.researchgate.net/profile/Kun-Ting-Chen-3/publication/354944660_Rotate_or_Wrap_Interactive_Visualisations_of_Cyclical_Data_on_Cylindrical_or_Toroidal_Topologies/links/61584b2b4a82eb7cb5e469eb/Rotate-or-Wrap-Interactive-Visualisations-of-Cyclical-Data-on-Cylindrical-or-Toroidal-Topologies.pdf) found that polar charts are generally LESS EFFECTIVENESS than linear charts in terms of low-level data analysis tasks, such as identifying trends, comparing values, locating extrema and reading values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"md`${await FileAttachment(\"visualRadial.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"md` #### Wrap - \nWe introduce new interactions of cyclic time series, called [Cylindrical Wrapping](https://observablehq.com/@kun-ting/rotate-or-wrap) in linear and polar bar charts to work around their respective limitations. With interactive wrapping, a user can use mouse or touch interaction to drag the charts horizontally to look at the data out of the box. For example, one can move the diagram to look at 11pm and 1am together, while the wrapping is elsewhere in other hours. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"md` #### Rotate - \nWe implement a rotate gesture for polar charts. A user can rotate the charts to bring arbitrary bars to the centre for a more aligned comparison.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md` #### Rotate or Wrap? \nDoes such novel interaction provide any benefits to perception for tasks such as pairwise single value comparison, group value comparison, and trend identification?\n\nVisit our user evaluation comparing readability of real-world cyclic time series data in linear and polar charts, with or without interaction: [paper link](https://www.researchgate.net/profile/Kun-Ting-Chen-3/publication/354944660_Rotate_or_Wrap_Interactive_Visualisations_of_Cyclical_Data_on_Cylindrical_or_Toroidal_Topologies/links/61584b2b4a82eb7cb5e469eb/Rotate-or-Wrap-Interactive-Visualisations-of-Cyclical-Data-on-Cylindrical-or-Toroidal-Topologies.pdf).\n\nMore real-world examples are available: [Rotate or Wrap](https://observablehq.com/@kun-ting/rotate-or-wrap)!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md` #### Try Yourself: Drag the charts below (Wrap or Rotate) to answer this question: \n*\"what happens after 11pm? Is the trend strictly monotonically decreasing from 11pm to 1am?\"* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"visualLinear = {\n const svg = d3\n .select(DOM.svg(w, h))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n // .style(\"border\", \"2px solid black\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"visualRadial = {\n const svg = d3\n .select(DOM.svg(w, h))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"viewof datasetname = radio({\n title: 'Dataset',\n options: [\n {\n label: 'Average Rainfall',\n value: 'averagerainfall.csv'\n },\n {\n label:\n 'Daily New York City Aggregated Number Of Traffic Accidents in STATEN ISLAND in 2017',\n value: 'STATEN_ISLAND_Num_Traffic_Accidents2017.csv'\n },\n {\n label:\n 'Weekly New York City Aggregated Number Of Traffic Accidents in STATEN ISLAND in 2017',\n value: 'STATEN_ISLAND_Num_Traffic_Weekly_Accidents2017.csv'\n },\n {\n label: 'Random data',\n value: 'randomdailypatterns'\n }\n ],\n value: 'STATEN_ISLAND_Num_Traffic_Accidents2017.csv'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"md`Number of random sampling: ${numSampleDataPoints}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"viewof numSampleDataPoints = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`Random seed: ${prngSeed}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof prngSeed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md` #### Chart settings - \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof bEnableDashedLine = {\n let form = html`\n `;\n form.checkboxEnableDashedLine.checked = false;\n form.oninput = () => {\n form.value = form.checkboxEnableDashedLine.checked;\n };\n form.oninput();\n yield form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"viewof bEnableTickMarks = {\n let form = html`\n `;\n form.checkboxEnableTickMarks.checked = false;\n form.oninput = () => {\n form.value = form.checkboxEnableTickMarks.checked;\n };\n form.oninput();\n yield form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$29","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"inputdata = d3.csvParse(\n await FileAttachment(\"averagerainfall.csv\").text(),\n (d, _, columns) => {\n let total = 0;\n for (let i = 1; i < columns.length; ++i)\n total += d[columns[i]] = +d[columns[i]];\n d.total = total;\n return d;\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"angleBetweenPoints = (p1, p2) => {\n if (p1[0] == p2[0] && p1[1] == p2[1]) return Math.PI / 2;\n else return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"toDegrees = rad => {\n return rad * (180 / Math.PI);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"arc = d3\n .arc()\n .innerRadius(d => rScale(0))\n .outerRadius(d => rScale(d[1]))\n .startAngle(d => {\n // console.log(\"xScaleRadial(\"+d[0]+\")=\"+xScaleRadial(d[0]));\n return xScaleRadial(d[0]);\n })\n .endAngle(d => xScaleRadial(d[0]) + xScaleRadial.bandwidth())\n .padAngle(0.01)\n .padRadius(innerRadius)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"svgGroupRadial = {\n let svgGroup = svgsRadial\n .append('g')\n .attr('transform', 'translate(' + [w / 2, h / 2] + ')');\n\n svgGroup\n .append(\"def\")\n .append(\"path\")\n .attr(\"id\", \"label-path\")\n .attr(\n \"d\",\n \"m0 \" +\n -labelRadius +\n \" a\" +\n labelRadius +\n \" \" +\n labelRadius +\n \" 0 1,1 -0.01 0\"\n );\n return svgGroup;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"xAxisRadial = d3\n .axisLeft()\n .scale(xScaleRadial)\n .tickFormat((d, i) => {\n return d[4];\n })\n// .ticks(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"yAxisRadial = d3\n .axisLeft()\n .scale(yScaleRadial)\n .ticks(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xScaleRadial = d3\n .scaleBand()\n .domain(Array.from(dataset, d => d[0]))\n .range([0, 2 * Math.PI])\n .align(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"yScaleRadial = d3.scaleLinear()\n.domain([0, d3.max(dataset, function(d) { return d[1]; })])\n.range([outerRadius, padding]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"rScale = d3.scaleLinear()\n.domain([0, d3.max(dataset, function(d) { return d[1]; })])\n.range([innerRadius, outerRadius-padding+innerRadius]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"xAxisLinear = d3\n .axisBottom()\n .scale(xScaleLinear)\n // .ticks(5);\n .tickFormat((d, i) => {\n return dataset[i][2];\n })\n .tickValues(Array.from(dataset, d => d[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"yAxisLinear = d3\n .axisLeft()\n .scale(yScaleLinear)\n .ticks(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"xScaleLinear = d3\n .scaleBand()\n .domain(Array.from(dataset, x => x[0]))\n .range([padding, w - padding * 2])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"yScaleLinear = d3\n .scaleLinear()\n .domain([\n 0,\n d3.max(dataset, function(d) {\n return d[1];\n })\n ])\n .range([h - padding, padding])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"w = 800;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"h = 400;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"width = w - padding * 3 - paddingBtnBars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"paddingBtnBars = (w - padding * 3 - numDataPoints * xScaleLinear.bandwidth()) /\n (numDataPoints + 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"height = h - padding","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"shiftDistance = {\n let shiftDistance = [\n { x: -width, y: -height },\n { x: 0, y: -height },\n { x: width, y: -height },\n { x: -width, y: 0 }, //left\n { x: 0, y: 0 }, //centre\n { x: width, y: 0 }, //right\n { x: -width, y: height },\n { x: 0, y: height },\n { x: width, y: height }\n ];\n return shiftDistance;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"svgGroupLinear = svgsLinear\n .selectAll(\".clipPathGroup\")\n .data([{ x: 0, y: 0 }])\n .enter()\n .append(\"g\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"updateView = (offsetX, offsetY) => {\n for (let k = 0; k < 3; k++) {\n let bars = svgGroupLinear\n .selectAll(\".bar\" + k)\n .data(configuration.internalDataset);\n //update\n bars\n .attr(\"x\", function(d) {\n return d[2] + shiftDistance[3 + k].x;\n })\n .attr(\"y\", function(d) {\n return yScaleLinear(d[1]);\n });\n\n //enter\n bars\n .enter()\n .append(\"rect\")\n .attr(\"class\", \"bar\" + k)\n .attr(\"x\", function(d) {\n return d[2] + shiftDistance[3 + k].x;\n })\n .attr(\"y\", function(d) {\n return yScaleLinear(d[1]);\n })\n .attr(\"height\", d => yScaleLinear(0) - yScaleLinear(d[1]))\n .attr(\"width\", xScaleLinear.bandwidth());\n\n //exit\n bars.exit().remove();\n\n //update\n let xAxisView = svgsLinear.selectAll(\".xAxis\" + k);\n xAxisView.attr(\n \"transform\",\n \"translate(\" +\n (shiftDistance[3 + k].x + configuration.xAxisX) +\n \",\" +\n (h - padding) +\n \")\"\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"transformGroup = (\n bHorizontalWrappingConfig,\n bVerticalWrappingConfig,\n bDiagonalWrappingConfig,\n graphics,\n offsetX,\n offsetY,\n dataset\n) => {\n if (\n bDiagonalWrappingConfig != null &&\n bDiagonalWrappingConfig &&\n graphics.indexOf(\"matrix\") >= 0\n ) {\n } else if (\n bDiagonalWrappingConfig != null &&\n bDiagonalWrappingConfig &&\n graphics.indexOf(\"rockscissorpaper\") >= 0\n ) {\n } else {\n if (bHorizontalWrappingConfig != null && bHorizontalWrappingConfig) {\n for (let datapoint of dataset) {\n datapoint[2] += offsetX;\n }\n configuration.xAxisX += offsetX;\n }\n if (bVerticalWrappingConfig != null && bVerticalWrappingConfig);\n }\n\n updateView(offsetX, offsetY);\n\n if (configuration.xAxisX > width) {\n for (let datapoint of dataset) {\n datapoint[2] -= width;\n }\n configuration.xAxisX -= width;\n } else if (configuration.xAxisX < 0) {\n for (let datapoint of dataset) {\n datapoint[2] += width;\n }\n configuration.xAxisX += width;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"padding = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"innerRadius = 30;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"outerRadius = h / 2 - innerRadius;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"barHeight = outerRadius - padding + innerRadius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"labelRadius = barHeight * 1.025 + 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"configuration = {\n bEnableDashedLine;\n bEnableTickMarks;\n let configuration = new Object({\n dragStartX: 0,\n dragStartY: 0,\n xAxisX: 0,\n xAxisY: 0,\n angle: 0,\n internalDataset: []\n });\n if (dataset != null && dataset.length > 0) {\n //fill in the pixel position of data point\n dataset.forEach(datapoint => {\n configuration.internalDataset.push([\n datapoint[0],\n datapoint[1],\n xScaleLinear(datapoint[0]),\n 0\n ]);\n });\n }\n return configuration;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"svgsRadial = d3.select(visualRadial)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"svgsLinear = d3.select(visualLinear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"bHorizontalWrappingConfig = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"bVerticalWrappingConfig = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"bDiagonalWrappingConfig = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"graphics = \"barchart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Math.random = pseudorandomNumberGenerator;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"{\n //test pseudorandom number generator\n numDataPoints;\n // Create xmur3 state:\n let seedfunct = xmur3(\"\" + prngSeed);\n // Output four 32-bit hashes to provide the seed for sfc32.\n let rand = sfc32(seedfunct(), seedfunct(), seedfunct(), seedfunct());\n\n // Output one 32-bit hash to provide the seed for mulberry32.\n rand = mulberry32(seedfunct());\n mutable pseudorandomNumberGenerator = rand;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mutable pseudorandomNumberGenerator = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xmur3 = (str) => {\n for(var i = 0, h = 1779033703 ^ str.length; i < str.length; i++)\n h = Math.imul(h ^ str.charCodeAt(i), 3432918353),\n h = h << 13 | h >>> 19;\n return function() {\n h = Math.imul(h ^ h >>> 16, 2246822507);\n h = Math.imul(h ^ h >>> 13, 3266489909);\n return (h ^= h >>> 16) >>> 0;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"sfc32 = (a, b, c, d) => {\n return function() {\n a >>>= 0; b >>>= 0; c >>>= 0; d >>>= 0; \n var t = (a + b) | 0;\n a = b ^ b >>> 9;\n b = c + (c << 3) | 0;\n c = (c << 21 | c >>> 11);\n d = d + 1 | 0;\n t = t + d | 0;\n c = c + t | 0;\n return (t >>> 0) / 4294967296;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"mulberry32 = (a) => {\n return function() {\n var t = a += 0x6D2B79F5;\n t = Math.imul(t ^ t >>> 15, t | 1);\n t ^= t + Math.imul(t ^ t >>> 7, t | 61);\n return ((t ^ t >>> 14) >>> 0) / 4294967296;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1"}} 28:"$27:body"