30:Te95,class TimelineChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.selectedCountries = config["selectedCountries"]; this.selectedSentiments = config["selectedSentiments"]; this.countries = config["countries"]; this.sentiments = config["sentiments"]; this.dates = this.data.map((d) => parseDateString(d.key)); this.dateNumbers = this.dates.map((d) => this.convertDateToNumber(d)); this.setAxes(); } convertDateToNumber(date) { return date.year * 365 + date.month * 30 + date.week * 7; } setAxes() { this.sx = d3 .scaleLinear() .domain(d3.extent(this.dateNumbers)) .range([this.margin.left, this.width - this.margin.right]); this.sy = d3 .scaleLinear() .domain([0, 600]) .range([this.height - this.margin.bottom, this.margin.top]); this.sc = d3 .scaleOrdinal() .domain(this.countries) .range(["#7fc97f", "#beaed4", "#fdc086"]); } drawAxes() { const xaxis = d3.axisBottom(this.sx); this.svg .append("g") .attr("transform", `translate(0,${this.height - this.margin.bottom})`) .call(xaxis); const yaxis = d3.axisLeft(this.sy); this.svg .append("g") .attr("transform", `translate(${this.margin.left},0)`) .call(yaxis); } drawPaths() { for (const country of this.countries) { for (const sentiment of this.sentiments) { this.svg .append("g") .append("path") .datum( this.data.filter( (d) => d["国"] === country && d["選択肢"] === sentiment ) ) .attr( "d", d3 .line() .x((d) => this.sx(this.convertDateToNumber(parseDateString(d.key))) ) .y((d) => this.sy(d.value)) ) .attr("opacity", this.checkSelected(country, sentiment) ? 1 : 0.5) .attr("fill", "none") .attr("stroke-width", this.checkSelected(country, sentiment) ? 3 : 1) .attr("stroke", this.sc(country)) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this)) .on("mouseleave", _.partial(this.mouseleave, this)); } } } mouseover(thisClass, event, d) { thisClass.tooltip.show(event, d); } mousemove(thisClass, event, d) { thisClass.tooltip.setText(`${d[0]["選択肢"]} (${d[0]["国"]})`); thisClass.tooltip.move(event, d); } mouseleave(thisClass, event, d) { thisClass.tooltip.hide(event, d); } checkSelected(country, sentiment) { return ( this.selectedCountries.includes(country) && this.selectedSentiments.includes(sentiment) ); } drawPoints() { for (const country of this.countries) { for (const sentiment of this.sentiments) { this.svg .append("g") .selectAll("circle") .data( this.data.filter( (d) => d["国"] === country && d["選択肢"] === sentiment ) ) .join("circle") .attr("l", (d) => this.sx(this.convertDateToNumber(parseDateString(d.key))) ) .attr("cx", (d) => this.sx(this.convertDateToNumber(parseDateString(d.key))) ) .attr("cy", (d) => this.sy(d.value)) .attr("r", 2) .attr("opacity", (d) => (this.checkSelected(d) ? 1 : 0.5)) .attr("fill", "none") .attr("stroke", "#888"); } } } drawData() { this.drawPoints(); this.drawPaths(); } draw() { this.drawAxes(); this.drawData(); } }31:T170b,class CircularChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.country = config["country"]; this.sentiment = config["sentiment"]; this.dates = this.data.map((d) => parseDateString(d.key)); this.data = this.data .map((d) => { return { date: parseDateString(d["key"]), ...d }; }) .filter( (d) => d["国"] === this.country && d["選択肢"] === this.sentiment ); this.groups = d3.rollups( this.data, (v) => d3.mean(v, (d) => d.value), (d) => d.date.year, (d) => d.date.month ); this.setAxes(); } setAxes() { this.minDimension = d3.min([this.width, this.height]); this.sr = d3 .scaleLinear() .domain([2021, 2023]) .range([this.minDimension / 7, this.minDimension / 3]); this.sTheta = d3 .scaleLinear() .domain([0, 12]) .range([toRadians(-90), toRadians(270)]); this.sc = d3 .scaleLinear() .domain([ d3.max(this.data, (d) => d.value), d3.mean(this.data, (d) => d.value), d3.min(this.data, (d) => d.value) ]) .range(["#ef8a62", "#f7f7f7", "#67a9cf"]); this.sFontSize = d3.scaleLinear().domain([100, 800]).range([7, 10]); } mouseover(thisClass, event, d) { thisClass.tooltip.show(event, d); } mousemove(thisClass, event, d) { thisClass.tooltip.setText(`${d[0]["選択肢"]} (${d[0]["国"]})`); thisClass.tooltip.move(event, d); } mouseleave(thisClass, event, d) { thisClass.tooltip.hide(event, d); } checkSelected(country, sentiment) { return ( this.selectedCountries.includes(country) && this.selectedSentiments.includes(sentiment) ); } drawPoints() { for (const year of [2021, 2022, 2023]) { this.svg .append("g") .selectAll("circle") .data(this.groups.find((d) => d[0] === year)[1]) .join("circle") .attr("cx", (d) => this.coordinate(Math.cos, year, d[0])) .attr("cy", (d) => this.coordinate(Math.sin, year, d[0])) .attr("r", 0) .attr("opacity", 0) .attr("fill", (d) => this.sc(d[1])) .attr("stroke", "#888") .attr("transform", `translate(${this.width / 2},${this.height / 2})`) .on("mouseover", _.partial(this.mouseover, this)) .on("mousemove", _.partial(this.mousemove, this, year)) .on("mouseleave", _.partial(this.mouseleave, this)) .transition() .delay((d) => d[0] * 100 + (year - 2021) * 1000) .attr("opacity", 0.8) .attr("r", this.minDimension / 30); } } coordinate(triFunc, year, month) { return this.sr(year) * triFunc(this.sTheta(month)); } drawTitle() { this.svg .append("g") .append("text") .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", this.margin.top) .attr("x", this.margin.left) .attr("y", this.margin.top) .text(this.sentiment); this.svg .append("g") .append("text") .attr("text-anchor", "middle") .attr("fill", "#888") .attr("x", this.width / 2) .attr("y", this.height / 2) .attr("dy", 5) .text(getEmoticon(this.sentiment)); } drawBackgroundPies() { for (const year of [2021, 2022, 2023]) { this.svg .append("g") .append("path") .attr( "d", d3 .arc() .startAngle(toRadians(0)) .endAngle(toRadians(360)) .innerRadius(this.sr(year) - this.minDimension / 25) .outerRadius(this.sr(year) + this.minDimension / 25) ) .attr("transform", `translate(${this.width / 2},${this.height / 2})`) .attr("opacity", 0.3) .attr("fill", "#888"); } } drawYear() { this.svg .append("g") .selectAll("text") .data([2021, 2022, 2023]) .join("text") .attr("x", 0) .attr("y", (d) => -this.sr(d)) .attr("dy", -this.minDimension / 60) .attr("fill", "#888") .attr("transform", `translate(${this.width / 2},${this.height / 2})`) .attr("font-size", this.sFontSize(this.width)) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .text((d) => d); } drawMonth() { this.svg .append("g") .selectAll("text") .data(d3.range(1, 13)) .join("text") .attr("x", (d) => this.coordinate(Math.cos, 2023.7, d)) .attr("y", (d) => this.coordinate(Math.sin, 2023.7, d)) .attr("fill", "#333") .attr("transform", `translate(${this.width / 2},${this.height / 2})`) .attr("font-size", this.sFontSize(this.width)) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .text((d) => d + "月"); } mousemove(thisClass, year, event, d) { thisClass.tooltip.setText(`${d[1]}
(${year}年${d[0]}月)`); thisClass.tooltip.move(event, d); } drawDisclaimer() { this.svg .append("g") .append("text") .attr("x", this.width - this.margin.right) .attr("y", this.height) .attr("dy", -7) .attr("fill", "#888") .attr("text-anchor", "end") .attr("font-size", 6) .text("※色の変化は各選択肢における数値の変化を示すためのものです。"); this.svg .append("g") .append("text") .attr("x", this.width - this.margin.right) .attr("y", this.height) .attr("dy", 0) .attr("fill", "#888") .attr("text-anchor", "end") .attr("font-size", 6) .text("選択肢間の数値を比較するのには適していません。"); } drawData() { this.drawPoints(); } draw() { this.drawBackgroundPies(); this.drawData(); this.drawTitle(); this.drawDisclaimer(); this.drawYear(); this.drawMonth(); } }32:T9a4,

日本

インドネシア

台湾

33:T7bc,class CircularLegend extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.country = config["country"]; this.sentiment = config["sentiment"]; this.data = this.data .map((d) => { return { date: parseDateString(d["key"]), ...d }; }) .filter( (d) => d["国"] === this.country && d["選択肢"] === this.sentiment ); console.log(); this.setAxes(); } setAxes() { this.minDimension = d3.min([this.width, this.height]); this.sx = d3 .scaleLinear() .domain(d3.extent(this.data, (d) => d.value)) .range([this.margin.left, this.width - this.margin.right]); const max = d3.max(this.data, (d) => d.value); const min = d3.min(this.data, (d) => d.value); this.sc = d3 .scaleLinear() .domain([max, (max + min) / 2, min]) .range(["#ef8a62", "#f7f7f7", "#67a9cf"]); } drawLines() { this.svg .append("g") .selectAll("line") .data( d3.range( d3.min(this.data, (d) => d.value), d3.max(this.data, (d) => d.value) ) ) .join("line") .attr("x1", (d) => this.sx(d)) .attr("x2", (d) => this.sx(d)) .attr("y1", this.margin.top) .attr("y2", this.height - this.margin.bottom) .attr("stroke", (d) => this.sc(d)) .attr("stroke-width", 5); } drawTexts() { this.svg .append("g") .selectAll("text") .data([ d3.min(this.data, (d) => d.value), d3.max(this.data, (d) => d.value) ]) .join("text") .attr("x", (d) => this.sx(d)) .attr("y", this.margin.top) .attr("dy", 15) .attr("fill", "#333") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", (_, i) => (i === 0 ? "start" : "end")) .text((d) => d); } drawData() { this.drawLines(); this.drawTexts(); } draw() { this.drawData(); } }34:[{"id":"897ab56e0b0b59cd750a12e624ac787885eb8614aef2c1046f8542bd3259b699f9221e82fac19d1436a017161ca71117911508a073806f4637f45dab239f8f93","href":"https://static.observableusercontent.com/files/897ab56e0b0b59cd750a12e624ac787885eb8614aef2c1046f8542bd3259b699f9221e82fac19d1436a017161ca71117911508a073806f4637f45dab239f8f93","name":"asia-sentiment@1.csv","type":"text/csv","lastModified":1686845359827.914,"size":17545}] 2e:{"title":"アジア各国のこの1週間の気分","cells":[{"id":0,"value":"# アジア各国のこの1週間の気分","pinned":false,"hidden":false,"mode":"md"},{"id":574,"value":"[コンペURL](https://awrd.com/award/quick_data_design_challenge_2023)","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"## Charts","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"### Time Series","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"viewof countries = Inputs.checkbox(\n d3.union(asiaSentiment.map((d) => d[\"国\"])),\n { label: \"強調表示したい国\", value: [\"日本\"] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof sentiments = Inputs.checkbox(\n d3.union(asiaSentiment.map((d) => d[\"選択肢\"])),\n { label: \"強調表示したい気分\", value: [\"うれしかった\"] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"function drawTimelineChart(data, selector, config) {\n new TimelineChart(data, selector, config).draw()\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"drawTimelineChart(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n \"#timeline .chart\",\n {\n height: 500,\n width: 700,\n margin: { top: 10, bottom: 20, left: 30, right: 10 },\n selectedCountries: countries,\n selectedSentiments: sentiments,\n countries: d3.union(asiaSentiment.map((d) => d[\"国\"])),\n sentiments: d3.union(asiaSentiment.map((d) => d[\"選択肢\"]))\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"### Circular","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"viewof country = Inputs.radio(d3.union(asiaSentiment.map((d) => d[\"国\"])), {\n label: \"Select countries\",\n value: \"日本\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"viewof sentiment = Inputs.radio(\n d3.union(asiaSentiment.map((d) => d[\"選択肢\"])),\n { label: \"Select sentiment\", value: \"うれしかった\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"

${country}

\n","pinned":false,"hidden":false,"mode":"html"},{"id":194,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"function drawCircularChart(data, selector, config) {\n new CircularChart(data, selector, config).draw()\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"drawCircularChart(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n \"#example .chart\",\n {\n height: 600,\n width: 600,\n margin: { top: 10, bottom: 20, left: 30, right: 10 },\n country: country,\n sentiment: sentiment\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"### Small multiple","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":483,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"function drawCircularLegend(data, selector, config) {\n new CircularLegend(data, selector, config).draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"drawCircularChart(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n \"#japan .chart\",\n {\n height: 600,\n width: 600,\n margin: { top: 10, bottom: 20, left: 30, right: 10 },\n country: \"日本\",\n sentiment: \"腹が立った\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"drawCircularLegend(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n \"#japan .legend\",\n {\n height: 30,\n width: 600,\n margin: { top: 0, bottom: 0, left: 0, right: 0 },\n country: \"日本\",\n sentiment: \"腹が立った\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"{\n for (const country of getCountryList()) {\n for (const sentiment of getSentimentList()) {\n drawCircularChart(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n `#${country.en} .charts .${sentiment.en}`,\n {\n height: 200,\n width: 200,\n margin: { top: 10, bottom: 20, left: 30, right: 10 },\n country: country.ja,\n sentiment: sentiment.ja\n }\n );\n\n drawCircularLegend(\n asiaSentiment.map((d) => splitDictionary(d, [\"国\", \"選択肢\"])).flat(),\n `#${country.en} .charts .${sentiment.en}-legend`,\n {\n height: 20,\n width: 200,\n margin: { top: 0, bottom: 0, left: 10, right: 10 },\n\n country: country.ja,\n sentiment: sentiment.ja\n }\n );\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"function getCountryList() {\n return [\n { en: \"japan\", ja: \"日本\" },\n { en: \"taiwan\", ja: \"台湾\" },\n { en: \"indonesia\", ja: \"インドネシア\" }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"function getSentimentList() {\n return [\n { en: \"glad\", ja: \"うれしかった\" },\n { en: \"sad\", ja: \"悲しかった\" },\n { en: \"fun\", ja: \"楽しかった\" },\n { en: \"angry\", ja: \"腹が立った\" },\n { en: \"calm\", ja: \"落ち着いた\" },\n { en: \"melancholy\", ja: \"憂鬱だった\" },\n { en: \"excited\", ja: \"わくわくした\" },\n { en: \"worried\", ja: \"不安だった\" }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"function getEmoji(country) {\n return { 日本: \"🇯🇵\", インドネシア: \"🇮🇩\", 台湾: \"🇹🇼\" }[country];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"function getEmoticon(emotion) {\n return {\n うれしかった: \"😊\",\n 悲しかった: \"😢\",\n 楽しかった: \"🥳\",\n 腹が立った: \"😡\",\n 落ち着いた: \"😌\",\n 憂鬱だった: \"😔\",\n わくわくした: \"🤩\",\n 不安だった: \"😬\"\n }[emotion];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"function parseDateString(dateString) {\n // Extract the date string from the input object\n // Split the date string into components\n let [yearMonth, week] = dateString.split(\"_\");\n let [year, month] = yearMonth.split(\"/\");\n\n // Convert the components into numbers\n year = parseInt(year) + 2000; // Assuming the year is in the 21st century\n month = parseInt(month);\n week = parseInt(week.slice(4)); // Remove 'Week' from the string\n\n // Return parsed date components\n return { year, month, week };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function extractDateComponents(inputObj) {\n // Get the parsed date components\n let dateComponents = parseDateString(inputObj[\"key\"]);\n\n // Construct the output object\n let output = {\n ...inputObj,\n ...dateComponents\n };\n\n // Remove the original 'key' property\n delete output[\"key\"];\n\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"function toRadians(degrees) {\n return degrees * Math.PI / 180;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"import { GeneralChart } from \"@gshirato/chart-class\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"import { splitDictionary } from \"@gshirato/j-league-pl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"asiaSentiment = await FileAttachment(\"asia-sentiment@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}