2f:T7ee,function koizumiChart(data) { // === データ用意 ============================================================================== const dataOfDates = format_data(data); const dataOfDatesWithVariety = Array.from(dataOfDates, ([date, dateData]) => { return Array.from(dateData.drinkCounts).length + 2; }); // === 定数用意　============================================================================== const average = getAverageOfList(dataOfDatesWithVariety); const max_R_count = Math.max(...dataOfDatesWithVariety); const max_R_interval = height / (R_interval_Scale( dif_scale(getDifOfMinAndMax(dataOfDatesWithVariety)) * average ) * max_R_count); const name = data[0].person; const seed_0 = makeSeedFromName(name, 0); const seed_1 = makeSeedFromName(name, 1); const max_R = max_R_interval * max_R_count; const pos_and_R_interval = make_pos_list( max_R_interval, dataOfDatesWithVariety, seed_0, seed_1 ); const pos_list = pos_and_R_interval.pos_list; const R_interval = pos_and_R_interval.R_interval; // === svg用意　============================================================================== const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); const dayG = svg .append("g") .selectAll("g") .data(dataOfDates) .join("g") .attr("class", "day") .attr( "transform", (_, i) => `translate(${pos_list[i].x}, ${pos_list[i].y})` ); const patternG = dayG .append("g") .selectAll("g") .data((d) => d[1].drinkCounts) .join("g") .attr("class", "patterns"); patternG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_pattern, R_interval); }); const temperatureG = dayG .append("g") .selectAll("g") .data((d) => d[1].drinks) .join("g") .attr("class", "temperatures"); temperatureG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_temperature, R_interval); }); return svg.node(); }30:T1c77,koizumiLegend = { const R_interval = height / 50; const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); // === drink legend ================================================================= const drink_drink_legendG = svg .append("g") .attr("class", "drink_drink_legend"); drink_drink_legendG .append("text") .attr("fill", "black") .attr("x", legend_pos_xScale(1)) .attr("y", legend_pos_yScale(1)) .text("Drink patterns") .attr("font-size", `${width / 50}px`) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle"); const patternsG = svg .append("g") .attr("class", "patterns") .selectAll("g") .data(pattern_legend) .join("g") .attr("class", "pattern") .attr("transform", (d, i) => `translate(${d[0].x}, ${d[0].y})`); const patternG = patternsG .selectAll("g") .data((d) => d[1]) .join("g"); patternG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_pattern, R_interval); }); patternsG .append("text") .attr("fill", "black") .text((d) => d[2].pattern_name) .attr("font-size", `${width / 80}px`) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle"); // === hour legend ========================================================================== const hourG = svg .append("g") .attr("class", "hour") .attr( "transform", `translate(${-legend_pos_xScale(4.5)}, ${legend_pos_yScale(1)})` ); hourG .append("text") .attr("fill", "black") .text("24hour") .attr("font-size", `${width / 50}px`) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle"); const ArrowG = hourG.append("g").attr("class", "arrow"); const hour_R = R_interval * 4; ArrowG.append("path") .attr( "d", d3.arc()({ innerRadius: hour_R - R_interval * 0.1, outerRadius: hour_R + R_interval * 0.1, startAngle: radianScale(90 + 10), endAngle: radianScale(90 * 5 - 10) }) ) .attr("fill", "black"); const arrow_size = (R_interval * R_interval) / 2; ArrowG.append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size(arrow_size)) .attr( "transform", `translate(${-arrow_size / 20},${-hour_R + R_interval * 0.05}) rotate(83)` ) .attr("fill", "black"); ArrowG.attr("transform", "rotate(-10)"); // === temperature legend ======================================================================== const temperature_legendG = svg .append("g") .attr("class", "temperature_legend"); temperature_legendG .append("text") .attr("fill", "black") .attr("x", -legend_pos_xScale(1.5)) .attr("y", legend_pos_yScale(0.5)) .text("Temperature patterns") .attr("font-size", `${width / 50}px`) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle"); const temperaturesG = svg .append("g") .attr("class", "temperatures") .selectAll("g") .data(temperature_legend) .join("g") .attr("class", "temperature") .attr("transform", (d, i) => `translate(${d[0].x}, ${d[0].y})`); const temperatureG = temperaturesG .append("g") .selectAll("g") .data((d) => d[1]) .join("g"); temperatureG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_temperature, R_interval * 4); }); temperaturesG .selectAll("text") .data((d) => d[2].temperature_name) .join("text") .attr( "transform", (_, i) => `translate(0, ${width / 30 + (i * width) / 80})` ) .attr("fill", "black") .text((d) => d) .style("white-space", "pre") .attr("font-size", `${width / 80}px`) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle"); // === data legend ======================================================================== const data_legendG = svg.append("g").attr("class", "data_legend"); data_legendG .append("text") .attr("fill", "black") .attr("x", legend_pos_xScale(7)) .attr("y", legend_pos_yScale(2.25)) .text("Sample data") .attr("font-size", `${width / 50}px`) .attr("text-anchor", "start") .attr("dominant-baseline", "middle"); const tableG = data_legendG.append("g").attr("class", "table"); for (let i = 0; i < 4; ++i) { for (let j = 0; j < 2; ++j) { draw_short_line( tableG, R_interval * 3, legend_pos_xScale((i * 1.75) / 2 + 7 + j * 2.7), legend_pos_yScale(2.6), 180, legend_pos_yScale(7 * 0.25 + 2.6) - legend_pos_yScale(2.6) ); } } for (let i = 0; i < 8; ++i) { draw_short_line( tableG, R_interval * 3, legend_pos_xScale(7), legend_pos_yScale(i * 0.25 + 2.6), 90, legend_pos_xScale((3 * 1.75) / 2 + 9.7) - legend_pos_xScale(7) ); } const data_legend_text = [ ["Time", "Drink", "Temperature"], ["Time", "Drink", "Temperature"] ]; const data_legend_textG = data_legendG .append("g") .attr("class", "data_legend_text") .selectAll("g") .data(data_legend_text) .join("g") .attr( "transform", (_, i) => `translate(${legend_pos_xScale(13.18 + i * 2.7)}, ${legend_pos_yScale( 2.75 )})` ); data_legend_textG .append("g") .selectAll("text") .data((d) => d) .join("text") .attr("fill", "black") .attr("x", (_, i) => legend_pos_xScale((i * 1.75) / 2)) .attr("y", 0) .text((d) => d) .attr("font-size", `${width / 100}px`) .attr("font-weight", "bold") .attr("text-anchor", "start") .attr("dominant-baseline", "middle"); const sample_dataG = data_legendG .append("g") .attr("class", "sample_data") .selectAll("g") .data(sample_data) .join("g") .attr( "transform", (_, i) => `translate(${legend_pos_xScale(13.18 + (i >= 6 ? 0 : 1) * 2.7)}, ${legend_pos_yScale(3 + (i >= 6 ? i - 6 : i) * 0.25)})` ); sample_dataG .append("g") .selectAll("text") .data((d) => d) .join("text") .attr("fill", "black") .attr("x", (_, i) => legend_pos_xScale((i * 1.75) / 2)) .attr("y", 0) .text((d) => d) .attr("font-size", `${width / 90}px`) .attr("text-anchor", "start") .attr("dominant-baseline", "middle"); const formatted_sample_data = transform_data(sample_data); const sample_drawingG = data_legendG .append("g") .attr("class", "sample_drawing") .attr( "transform", `translate(${legend_pos_xScale(9.7)}, ${legend_pos_yScale(6)})` ); const sample_drawing_patternG = sample_drawingG .append("g") .attr("class", "sample_drawing_pattern") .selectAll("g") .data(formatted_sample_data.drinkCounts) .join("g"); sample_drawing_patternG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_pattern, R_interval); }); const sample_drawing_temperatureG = sample_drawingG .append("g") .attr("class", "sample_drawing_temperatureG") .selectAll("g") .data(formatted_sample_data.drinks) .join("g"); sample_drawing_temperatureG.each((d, i, nodes) => { d3.select(nodes[i]).call(draw_temperature, R_interval); }); return svg.node(); }31:T7da,pattern_legend = [ [ { x: legend_pos_xScale(3), y: legend_pos_yScale(1) }, [ { drink: "水", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Water" } ], [ { x: legend_pos_xScale(5), y: legend_pos_yScale(1) }, [ { drink: "コーヒー", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Coffee" } ], [ { x: legend_pos_xScale(1), y: legend_pos_yScale(3) }, [ { drink: "牛乳", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Milk" } ], [ { x: legend_pos_xScale(3), y: legend_pos_yScale(3) }, [ { drink: "ラテ", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Latte" } ], [ { x: legend_pos_xScale(5), y: legend_pos_yScale(3) }, [ { drink: "ココア", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Cocoa" } ], [ { x: legend_pos_xScale(1), y: legend_pos_yScale(5) }, [ { drink: "茶", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Tea" } ], [ { x: legend_pos_xScale(3), y: legend_pos_yScale(5) }, [ { drink: "ミルクティー", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Milk tea" } ], [ { x: legend_pos_xScale(5), y: legend_pos_yScale(5) }, [ { drink: "炭酸", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Soda" } ], [ { x: legend_pos_xScale(1), y: legend_pos_yScale(7) }, [ { drink: "酒", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Alcohol" } ], [ { x: legend_pos_xScale(3), y: legend_pos_yScale(7) }, [ { drink: "エナドリ", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Energy drink" } ], [ { x: legend_pos_xScale(5), y: legend_pos_yScale(7) }, [ { drink: "ジュース", rank: 3 }, { drink: "水", rank: 1 } ], { pattern_name: "Juice" } ] ]32:Taa8,function format_data(data) { const unifiedData = data.map((record) => { let newDrink = ""; if (/オレ/.test(record.drink) || /ラテ/.test(record.drink)) { newDrink = "ラテ"; } else if (/乳/.test(record.drink) || /ヨーグルト/.test(record.drink) || /ラッシー/.test(record.drink)) { newDrink = "牛乳"; } else if (/茶/.test(record.drink)) { newDrink = "茶"; } else if (record.drink === "炭酸" || record.drink === "コーラ" || record.drink === "ドクペ") { newDrink = "炭酸"; } else if (record.drink === "レッドブル" || record.drink === "エナドリ") { newDrink = "エナドリ"; } else if (/酒/.test(record.drink) || /サワー/.test(record.drink)) { newDrink = "酒"; } else { newDrink = record.drink; } return { ...record, drink: newDrink, }; }); const dataWithDayMsec = unifiedData.map((d) => ({ dateOnly: new Date( Date.UTC( d.date.getUTCFullYear(), d.date.getUTCMonth(), d.date.getUTCDate() ) ), drink: d.drink, temperature: d.temperature, msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000, })); const dataOfDates = new Map(); dataWithDayMsec.forEach((record) => { const dateKey = record.dateOnly.toISOString().split('T')[0]; if (!dataOfDates.has(dateKey)) { dataOfDates.set(dateKey, { drinkCounts: new Map(), drinks: [], }); } const dateGroup = dataOfDates.get(dateKey); const drinkKey = record.drink; const drinkCount = dateGroup.drinkCounts.get(drinkKey) || 0; dateGroup.drinkCounts.set(drinkKey, drinkCount + 1); dateGroup.drinks.push({ drink: drinkKey, rank: 0, temperature: record.temperature, msec: record.msec, }); }); const result = Array.from(dataOfDates, ([date, dateGroup]) => { const countRanksArray = calculateRanks(dateGroup.drinkCounts); const sortedCounts = Array.from(countRanksArray).sort((a, b) => b.rank - a.rank); const countRanks = new Map(sortedCounts.map(({ drink, rank }) => [drink, rank])); const rankedDrinks = dateGroup.drinks.map((drinkData) => ({ ...drinkData, rank: countRanks.get(drinkData.drink) || 0, count: dateGroup.drinkCounts.get(drinkData.drink) || 0, })); return { date, drinkCounts: sortedCounts, drinks: rankedDrinks, }; }); const resultMap = new Map(result.map(({ date, ...rest }) => [date, rest])); const sortedArray = Array.from(resultMap).sort((a, b) => { return b[1].drinkCounts.length - a[1].drinkCounts.length; }); return new Map(sortedArray); }33:T94a,function make_pos_list(R_interval, dataOfDatesWithVariety, seed_0, seed_1) { let tmp_R_interval = R_interval; const while_loop_limit = 30; const source_0 = d3.randomLcg(seed_0); const source_1 = d3.randomLcg(seed_1); let pos_list = Array(dataOfDatesWithVariety.length).fill({ x: 0, y: 0 }); let random_list_length_list = Array(dataOfDatesWithVariety.length).fill(0); let distanceBool_list = Array(dataOfDatesWithVariety.length).fill(false); for (let i = 0; i < dataOfDatesWithVariety.length; i++) { const randomToWidthScale = make_randomToPosScale( R_interval, dataOfDatesWithVariety, width, i ); const randomToHeightScale = make_randomToPosScale( R_interval, dataOfDatesWithVariety, height, i ); const R = tmp_R_interval * dataOfDatesWithVariety[i]; let random_list_length = random_list_length_list[i]; while (!distanceBool_list[i] && random_list_length < while_loop_limit) { random_list_length += 1; const randomListForX = Array.from( { length: random_list_length }, source_0 ); const randomListForY = Array.from( { length: random_list_length }, source_1 ); const temp_pos = { x: randomToWidthScale(randomListForX[random_list_length - 1]), y: randomToHeightScale(randomListForY[random_list_length - 1]) }; distanceBool_list[i] = true; for (let j = 0; j < i; j++) { if ( calculateDistance(temp_pos, pos_list[j]) < (dataOfDatesWithVariety[i] + dataOfDatesWithVariety[j] + 1) * tmp_R_interval ) { distanceBool_list[i] = false; break; } } if (distanceBool_list[i]) { pos_list[i] = { ...temp_pos }; random_list_length_list[i] = random_list_length; break; } } if (random_list_length >= while_loop_limit) { random_list_length_list[i] = 0; if ( i == dataOfDatesWithVariety.length - 1 || random_list_length_list[i - 1] >= while_loop_limit - 1 ) { tmp_R_interval *= 0.99; random_list_length_list = Array(dataOfDatesWithVariety.length).fill(0); i = -1; } else { random_list_length_list[i - 1] += 1; i -= 2; } } } return { pos_list: pos_list, R_interval: tmp_R_interval }; }34:T44b,function draw_mark(selection, R_count, R_interval, marks_data) { const R = R_count * R_interval; const lineLength = shortlinelengthScale(R_interval); const mean_r = R - R_interval / 2; const deviation = deviationScale(R_interval); const markCount = markCountScale(R_count); const seed = makeSeedFromName(name, 0); for (let i = 0; i < markCount; ++i) { for ( let marks_data_index = 0; marks_data_index < marks_data.length; ++marks_data_index ) { const xPos = d3.randomNormal(mean_r * Math.cos(i), deviation)(); const yPos = d3.randomNormal(mean_r * Math.sin(i), deviation)(); const mark_data_list = marks_data[marks_data_index]; for ( let mark_data_index = 0; mark_data_index < mark_data_list.length; ++mark_data_index ) { const angle = parseInt(mark_data_list[mark_data_index]["angle"]); const length = lineLength * parseInt(mark_data_list[mark_data_index]["length_ratio"]); draw_short_line(selection, R_interval, xPos, yPos, angle, length); } } } }35:T4c3,function soda_pattern(selection, R_count, R_interval){ // 炭酸系 const R = R_count * R_interval; const deviation = deviationScale(R_interval); const mean_r = R - R_interval / 2; const clip_id = DOM.uid("clip"); draw_circle(selection, R_interval, "g", "white", R); const patternG = selection .append("g") .attr("clip-path", `url(#${clip_id.id})`); draw_circle(patternG, R_interval, clip_id.id, "white", R); const rScale = d3 .scaleSqrt() .domain([R, - R]) .range([R_interval / 100, R_interval / 15]); const bubbleScale = d3 .scaleSqrt() .domain([0, 10]) .range([0, 800]) const bubbleCount = bubbleScale(R_count); patternG.selectAll("circle") .data(d3.range(bubbleCount)) .enter() .append("circle") .attr("cx", (_, i) => d3.randomNormal(mean_r * Math.cos(i), deviation)()) .attr("cy", (_, i) => d3.randomNormal(mean_r * Math.sin(i), deviation)()) .attr("r", function() { const bubble_r = rScale(d3.select(this).attr("cy")); if(bubble_r < 0){ return 0; }else{ return bubble_r; } }) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", strokeweightScale(R_interval)); }36:T426,function juice_pattern(selection, R_count, R_interval) { // ジュース系兼その他 const R = R_count * R_interval; const wave_interval = R_interval / 8; const wave_count = R / wave_interval; const clip_id = DOM.uid("clip"); draw_circle(selection, R_interval, "g", "white", R); const patternG = selection .append("g") .attr("clip-path", `url(#${clip_id.id})`); draw_circle(patternG, R_interval, clip_id.id, "white", R); const amplitude = 2; // 波の振幅 const frequency = 0.15; // 波の周波数 const yScale = d3 .scaleLinear() .domain([0, wave_count]) .range([-(R + amplitude), R + amplitude]); function draw_wave(y) { const points = d3 .range(-R, R, 1) .map((x) => [x, y + amplitude * Math.sin(frequency * x)]); patternG .append("path") .datum(points) .attr("d", d3.line()) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", strokeweightScale(R_interval)); } for (let y = 0; y < wave_count; ++y) { draw_wave(yScale(y)); } }37:[] 2d:{"title":"Drink galaxy","cells":[{"id":0,"value":"# Drink galaxy","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"format_data(dataOfPerson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"koizumiChart(dataOfPerson);","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"transform_data(sample_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"## const","pinned":false,"hidden":false,"mode":"md"},{"id":1399,"value":"height = width * 150 / 215;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"margin = ({\n top: height / 40,\n bottom: height / 40,\n left: width / 40,\n xMiddle: width / 80,\n right: width / 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"temperature_legend = [\n [\n { x: -legend_pos_xScale(0.5), y: legend_pos_yScale(1) },\n [{ drink: \"水\", rank: -2, temperature: \"つめたい\", msec: 0 }],\n { temperature_name: [\"Cold\", \"\"] }\n ],\n\n [\n { x: -legend_pos_xScale(1.5), y: legend_pos_yScale(1) },\n [{ drink: \"水\", rank: -2, temperature: \"常温\", msec: 0 }],\n { temperature_name: [\"Room\", \"temperature\"] }\n ],\n\n [\n { x: -legend_pos_xScale(2.5), y: legend_pos_yScale(1) },\n [{ drink: \"水\", rank: -2, temperature: \"あたたかい\", msec: 0 }],\n { temperature_name: [\"Hot\", \"\"] }\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"sample_data = [\n [\"07:30\", \"water\", \"cold\"],\n [\"07:50\", \"smoothie\", \"cold\"],\n [\"09:20\", \"tea\", \"room temp.\"],\n [\"10:00\", \"tea\", \"room temp.\"],\n [\"12:15\", \"tea\", \"room temp.\"],\n [\"14:10\", \"caffee\", \"hot\"],\n [\"15:20\", \"milk tea\", \"hot\"],\n [\"17:05\", \"tea\", \"room temp.\"],\n [\"18:20\", \"water\", \"cold\"],\n [\"20:45\", \"alchole\", \"cold\"],\n [\"21:30\", \"tea\", \"cold\"],\n [\"22:50\", \"water\", \"hot\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"## scales","pinned":false,"hidden":false,"mode":"md"},{"id":1640,"value":"legend_pos_xScale = d3\n .scaleLinear()\n .domain([0, 6])\n .range([-width / 2 + margin.right, -margin.xMiddle])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1643,"value":"legend_pos_yScale = d3\n .scaleLinear()\n .domain([0, 8])\n .range([-height / 2 + margin.top, height / 2 - margin.bottom]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"angleScale = d3\n .scaleUtc()\n .domain([0, 24 * 60 * 60 * 1000]) // 24 hours\n .range([0, 360]); // 一周","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"radianScale = d3\n .scaleLinear()\n .domain([0, 180])\n .range([-Math.PI / 2, Math.PI / 2]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"shortlinelengthScale = d3\n .scaleLinear()\n .domain([0,4])\n .range([0,1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"strokeweightScale = d3\n .scaleLinear()\n .domain([0, 40])\n .range([0.1, 1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"deviationScale = d3.scaleLinear().domain([0, 25]).range([0, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"markCountScale = d3.scaleSqrt().domain([0, 10]).range([0, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"dif_scale = d3\n .scalePow()\n .domain([1, 5])\n .range([10, 45]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"R_interval_Scale = d3\n .scalePow()\n .domain([20, 450])\n .range([4.7, 2.6]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"## tools","pinned":false,"hidden":false,"mode":"md"},{"id":2143,"value":"function convert_to_milliseconds(time) {\n const [hours, minutes] = time.split(\":\").map(Number);\n return hours * 60 * 60 * 1000 + minutes * 60 * 1000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"function transform_data(data) {\n // グループ化と集計\n const groupedData = d3.group(data, (d) => d[1]);\n\n // 集計データを配列に変換\n const drinkCounts = Array.from(groupedData, ([drink, drinks]) => ({\n drink,\n count: drinks.length,\n rank: 0 // 順位は後で計算\n }));\n\n // 順位を計算\n drinkCounts.sort((a, b) => a.count - b.count);\n drinkCounts.forEach((drink, index) => {\n drink.rank = index + 1;\n });\n\n // drinkCountsを逆順にする\n drinkCounts.reverse();\n\n // 最終的なデータ構造の作成\n const result = {\n drinkCounts: drinkCounts,\n drinks: data.map((d) => ({\n drink: d[1],\n rank: drinkCounts.find((drink) => drink.drink === d[1]).rank,\n temperature: d[2],\n msec: convert_to_milliseconds(d[0]),\n count: drinkCounts.find((drink) => drink.drink === d[1]).count\n }))\n };\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"function calculateRanks(drinkCounts) {\n const sortedCounts = Array.from(drinkCounts).sort((a, b) => a[1] - b[1]);\n const rankMap = new Map(sortedCounts.map(([drink, count], index) => [drink, index + 1]));\n return Array.from(drinkCounts, ([drink, count]) => ({ drink, count, rank: rankMap.get(drink) }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"function makeSeedFromName(name, dirction) {\n let seed = \"\";\n for (let i = 0; i < name.length; i++) {\n if(i % 2 == dirction){\n seed += name.charCodeAt(i).toString();\n }\n }\n return seed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"function sumInRange(numbers, start, end) {\n const rangeNumbers = numbers.slice(start - 1, end);\n const total = rangeNumbers.reduce((acc, num) => acc + num, 0);\n return total;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"function getDifOfMinAndMax(list) {\n return Math.max(...list) - Math.min(...list);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"function getAverageOfList(list) {\n let total = 0;\n for (const value of list) {\n total += value;\n }\n return total / list.length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"function calculateDistance(pos1, pos2) {\n const dx = pos2.x - pos1.x;\n const dy = pos2.y - pos1.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n return distance;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"function make_randomToPosScale(R_interval, dataOfDatesWithVariety, range, i){\n const R = R_interval * dataOfDatesWithVariety[i];\n const posScale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([-(range / 2 - R * 1.1), range / 2 - R * 1.1]);\n return posScale;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"pattern_map = new Map([\n [\"水\", water_pattern],\n [\"water\", water_pattern],\n [\"コーヒー\", coffee_pattern],\n [\"caffee\", coffee_pattern],\n [\"牛乳\", milk_pattern],\n [\"ラテ\", latte_pattern],\n [\"ココア\", cocoa_pattern],\n [\"茶\", tea_pattern],\n [\"tea\", tea_pattern],\n [\"ミルクティー\", milktea_pattern],\n [\"milk tea\", milktea_pattern],\n [\"炭酸\", soda_pattern],\n [\"酒\", alcohol_pattern],\n [\"alchole\", alcohol_pattern],\n [\"エナドリ\", energydrink_pattern],\n [\"ジュース\", juice_pattern]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"## draw tools","pinned":false,"hidden":false,"mode":"md"},{"id":1462,"value":"function draw_grid(selection, R_count, R_interval, fill_opacity_1, fill_opacity_2) {\n const R = R_count * R_interval;\n R_count *= 2;\n selection.selectAll(\"rect\")\n .data(d3.range(Math.pow(R_count, 2)))\n .join(\"rect\")\n .attr(\"x\", (d, i) => (Math.floor(i % (R_count)) * R_interval - R))\n .attr(\"y\", (d, i) => (Math.floor(i / (R_count)) * R_interval - R))\n .attr(\"width\", R_interval)\n .attr(\"height\", R_interval)\n .attr(\"fill\", \"white\")\n .attr(\"fill-opacity\", (d, i) => (Math.floor(i / R_count) + i % R_count) % 2 === 0 ? fill_opacity_1 : fill_opacity_2)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", strokeweightScale(R_interval));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"function draw_circle(selection, R_interval, id, fillColor, R) {\n selection.append(id == \"g\" ? \"g\" : \"clipPath\")\n .attr(\"id\", id)\n .append(\"circle\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"r\", R)\n .attr(\"fill\", fillColor)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", strokeweightScale(R_interval));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"function draw_long_line(selection, R_interval, select_name, R, angle) {\n const line_interval = R_interval / 3;\n selection.selectAll(select_name)\n .data(d3.range(-R, R, line_interval))\n .join(\"line\")\n .attr(\"class\", \"background\")\n .attr(\"x1\", -R)\n .attr(\"y1\", d => d)\n .attr(\"x2\", R)\n .attr(\"y2\", d => d)\n .attr(\"transform\", `rotate(${angle}, 0, 0)`) // 45度回転\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", strokeweightScale(R_interval));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"function draw_short_line(selection, R_interval, xPos, yPos, angle, length) {\n selection.append(\"line\")\n .attr(\"x1\", xPos)\n .attr(\"y1\", yPos)\n .attr(\"x2\", xPos + length * Math.cos(radianScale(angle)))\n .attr(\"y2\", yPos + length * Math.sin(radianScale(angle)))\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", strokeweightScale(R_interval));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"function draw_pattern(selection, R_interval) {\n const drink = selection.datum().drink;\n const R_count = selection.datum().rank + 2;\n const drawPatternFunction = pattern_map.get(pattern_map.has(drink) ? drink : \"ジュース\");\n \n selection.call(drawPatternFunction, R_count, R_interval);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"function draw_temperature(selection, R_interval) {\n const msec = selection.datum().msec;\n const temperature = selection.datum().temperature;\n const R_count = selection.datum().rank + 2;\n const R = R_count * R_interval;\n const x = R * Math.cos(radianScale(angleScale(msec)));\n const y = R * Math.sin(radianScale(angleScale(msec)));\n const temperatureG = selection\n .append(\"g\")\n .attr(\"transform\", `translate(${x}, ${y})`);\n const background_fillColor =\n temperature == \"つめたい\" || temperature == \"cold\" ? \"black\" : \"white\";\n draw_circle(\n temperatureG,\n R_interval,\n \"g\",\n background_fillColor,\n R_interval / 4\n );\n if (temperature == \"常温\" || temperature == \"room temp.\") {\n draw_circle(temperatureG, R_interval, \"g\", \"black\", R_interval / 12);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"## patterns","pinned":false,"hidden":false,"mode":"md"},{"id":1485,"value":"function water_pattern(selection, R_count, R_interval){ // 水\n const R = R_count * R_interval;\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"function coffee_pattern(selection, R_count, R_interval){ // コーヒー\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n draw_long_line(patternG, R_interval, \"line-45\", R, -45);\n draw_grid(patternG, R_count, R_interval, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"function milk_pattern(selection, R_count, R_interval){ // 牛乳系\n const R = R_count * R_interval;\n const width = R * R_interval;\n const height = R * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n draw_grid(patternG, R_count, R_interval, 1, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"function latte_pattern(selection, R_count, R_interval){ // ラテ系\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n coffee_pattern(patternG, R_count, R_interval);\n draw_grid(patternG, R_count, R_interval, 0, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1497,"value":"function cocoa_pattern(selection, R_count, R_interval){ // ココア\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n draw_long_line(patternG, R_interval, \"line-45\", R, -45);\n draw_long_line(patternG, R_interval, \"line45\", R, 45);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"function tea_pattern(selection, R_count, R_interval){ // 茶系\n const R = R_count * R_interval;\n const mean_r = R - R_interval / 2;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n const marks_data = [\n [{\"angle\": 45,　\"length_ratio\": 1}],\n [{\"angle\": -45,　\"length_ratio\": 1}]\n ];\n draw_mark(patternG, R_count, R_interval, marks_data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"function milktea_pattern(selection, R_count, R_interval) {\n // ミルクティー\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n tea_pattern(patternG, R_count, R_interval);\n draw_grid(patternG, R_count, R_interval, 0, 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"function alcohol_pattern(selection, R_count, R_interval) {\n // 酒系\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n const marks_data = [\n [\n { angle: 0, length_ratio: 1 },\n { angle: 30, length_ratio: 1 },\n { angle: -30, length_ratio: 1 },\n { angle: 180, length_ratio: 1 }\n ]\n ];\n draw_mark(patternG, R_count, R_interval, marks_data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"function energydrink_pattern(selection, R_count, R_interval){ // エナジードリンク系\n const R = R_count * R_interval;\n const clip_id = DOM.uid(\"clip\");\n draw_circle(selection, R_interval, \"g\", \"white\", R);\n const patternG = selection\n .append(\"g\")\n .attr(\"clip-path\", `url(#${clip_id.id})`);\n draw_circle(patternG, R_interval, clip_id.id, \"white\", R);\n const marks_data = [[\n {\"angle\": 180,　\"length_ratio\": 2},\n {\"angle\": 150,　\"length_ratio\": 1},\n {\"angle\": -150, \"length_ratio\": 1}\n ]];\n draw_mark(patternG, R_count, R_interval, marks_data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}