3e:null 3f:["$","title",null,{"children":"資料視覺化專題 - 能源視覺化 | othsueh's Workspace | Observable"}] 45:T2194,renew_energy = { const total = {width: 1200, height: 500}; const lineChart = {width: 650, height: 410}; const lineChartMargin = { top: 20, right: 60, bottom: 40, left: 30 }; const donutChart = {width: 350, height: 350}; const donutChartMargin = { top: 20, right: 60, bottom: 40, left: 60 }; const svg = SimpleSvg({ width: total.width, height: total.height, id: "renew" }) const color = d3.scaleOrdinal(d3.schemePastel2).domain(["hydroelectric", "geothermal", "solar", "wind", "biomass", "waste"]); const lineChargroup = svg.append("g") .attr("transform",`translate(${lineChartMargin.left},${lineChartMargin.top})`) const donuChargroup = svg.append("g") .attr("transform",`translate(${lineChart.width},${donutChartMargin.top})`) const legendGroup = svg.append("g") .attr("transform", `translate(${width - (lineChartMargin.right + donutChartMargin.right + 60)}, ${lineChartMargin.top})`) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "end") const stack = d3.stack() .keys(["hydroelectric", "geothermal", "solar", "wind", "biomass", "waste"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const series = stack(renew); const x = d3.scaleLinear() .domain(d3.extent(renew, d => d.time)) .range([lineChartMargin.left, lineChart.width - lineChartMargin.right]); const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .range([lineChart.height - lineChartMargin.bottom, lineChartMargin.top]); const area = d3.area() .x(d => x(d.data.time)) .y0(d => y(d[0])) .y1(d => y(d[1])); lineChargroup.selectAll("path") .data(series) .join("path") .attr("fill", ({ key }) => color(key)) .attr("d", area); lineChargroup.append("g") .attr("transform", `translate(0,${lineChart.height - lineChartMargin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); lineChargroup.append("g") .attr("transform", `translate(${lineChartMargin.left},0)`) .call(d3.axisLeft(y)); lineChargroup.append("text") .attr("x", lineChart.width/2) .attr("y", lineChart.height) .attr("text-anchor", "middle") .text("time"); lineChargroup.append("text") .attr("transform", "rotate(-90)") .attr("x", -lineChart.height/2) .attr("y", lineChartMargin.left - 45) .attr("text-anchor", "middle") .text("Device capacity (MW)"); let filterdata = renew.find(d=> d.time == 91); let renew_year = [{category: "hydroelectric", value:0}, {category: "geothermal", value:0}, {category: "solar", value:0}, {category: "wind", value:0}, {category: "biomass", value:0}, {category: "waste", value:0}]; renew_year.forEach(entry => { if (filterdata.hasOwnProperty(entry.category)) { entry.value = filterdata[entry.category]; }}); let renew_year_sum = 0; renew_year.forEach(d => { renew_year_sum += d.value; }) const renew_year_normalized = renew_year; renew_year_normalized.forEach(d=> { d.value = d.value / renew_year_sum; }) const radius = Math.min(donutChart.width, donutChart.height) / 2; const pie = d3.pie().value(d => d.value); const arc = d3.arc() .innerRadius(radius * 0.5) .outerRadius(radius * 0.8); donuChargroup.selectAll('arc') .data(pie(renew_year)) .join('g') .append('path') .attr('d', arc) .attr('fill', d => color(d.data.category)) .attr("stroke", "white") .attr("transform", `translate(${donutChart.width / 2}, ${donutChart.height / 2})`); const donutext = donuChargroup.append("text") .attr("x", donutChart.width/2) .attr("y", donutChart.height/2) .attr("text-anchor", "middle") .style("font-size", "1.5em") .style("dominant-baseline", "middle") .html(function() { return "Total" + "" + renew_year_sum.toFixed(1) + "" + "MW"; }); const legend = legendGroup.selectAll("g") .data(renew_year_normalized) .join("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) legend.append("rect") .attr("x", 5) .attr("y", 300) .attr("width", 19) .attr("height", 19) .attr("fill", d => color(d.category)) legend.append("text") .attr("x", 28) .attr("y", 310) .attr("text-anchor", "start") .attr("dy", "0.32em") .text(d => (d.category + " : " + (d.value*100).toFixed(1) + "%")); const title = svg.append("text") .attr("x", width/2) .attr("y", lineChartMargin.top) .attr("text-anchor", "middle") .attr("font-size", 20) .text(`Renewable Energy Device Capacity of ${renew[0].year} ${renew[0].quarter}`); const brushWidth = x(renew[1].time) - x(renew[0].time); // Width of one unit on the x-axis const brush = d3.brushX() .extent([[lineChartMargin.left, 0], [lineChart.width - lineChartMargin.right, lineChart.height - lineChartMargin.bottom]]) .on("brush end", brushed); // Initial brush position const defaultPosition = [lineChartMargin.left, lineChartMargin.left + brushWidth]; lineChargroup.append("g") .attr("class", "brush") .call(brush) .call(brush.move, defaultPosition); function brushed(event) { if (!event.sourceEvent) return; // Only respond to event triggers, not programmatic changes let selection = event.selection || defaultPosition; // Update the brush position on click outside the brush if (event.type === "end") { const [mouseX] = d3.pointer(event.sourceEvent, this); updateBrushAndLog(mouseX); }} function updateBrushAndLog(mouseX) { const start = Math.max(lineChartMargin.left, Math.min(lineChart.width - lineChartMargin.right - brushWidth, mouseX - brushWidth / 2)); const end = start + brushWidth; // Move the brush lineChargroup.select(".brush").transition().call(brush.move, [start, end]); // Calculate and log the data for the new brush position const xPos = x.invert(start + brushWidth / 2); const closest = renew.reduce((a, b) => Math.abs(b.time - xPos) < Math.abs(a.time - xPos) ? b : a); updateDonutChartAndLegend(closest); } lineChargroup.on("click", function(event) { const [mouseX] = d3.pointer(event); updateBrushAndLog(mouseX); }); function updateDonutChartAndLegend(closest) { // Update filterdata based on closest data point filterdata = closest; // Recalculate renew_year values based on new filterdata renew_year.forEach(entry => { if (filterdata.hasOwnProperty(entry.category)) { entry.value = filterdata[entry.category]; } }); renew_year_sum = d3.sum(renew_year, d => d.value); renew_year_normalized.forEach(d => { d.value = d.value / renew_year_sum; }); //Redraw the donut chart const pieData = pie(renew_year_normalized); donuChargroup.selectAll('arc') .data(pieData) .join('g') .append('path') .attr('d', arc) .attr('fill', d => color(d.data.category)) .attr("stroke", "white") .attr("transform", `translate(${donutChart.width / 2}, ${donutChart.height / 2})`); donutext .html(function() { return "Total" + "" + renew_year_sum.toFixed(1) + "" + "MW"; }); legend.selectAll("text") .attr("x", 28) .attr("y", 310) .attr("text-anchor", "start") .attr("dy", "0.32em") .text(d => (d.category + " : " + (d.value*100).toFixed(1) + "%")); title.text(`Renewable Energy Device Capacity of ${filterdata.year} ${filterdata.quarter}`); } return svg.node(); }46:T2190,hist_energy = { const total = {width: 1200, height: 500}; const lineChart = {width: 650, height: 410}; const lineChartMargin = { top: 20, right: 60, bottom: 40, left: 30 }; const donutChart = {width: 350, height: 350}; const donutChartMargin = { top: 20, right: 60, bottom: 40, left: 60 }; const svg = SimpleSvg({ width: total.width, height: total.height, id: "hist" }) const color = d3.scaleOrdinal(d3.schemePastel2).domain(["renewable", "coal", "fuel", "gas", "cogeneration", "pumped", "nuclear"]); const lineChargroup = svg.append("g") .attr("transform",`translate(${lineChartMargin.left},${lineChartMargin.top})`) const donuChargroup = svg.append("g") .attr("transform",`translate(${lineChart.width},${donutChartMargin.top})`) const legendGroup = svg.append("g") .attr("transform", `translate(${width - (lineChartMargin.right + donutChartMargin.right + 60)}, ${lineChartMargin.top})`) .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "end") const stack = d3.stack() .keys(["renewable", "coal", "fuel", "gas", "cogeneration", "pumped", "nuclear"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const series = stack(hist); const x = d3.scaleLinear() .domain(d3.extent(hist, d => d.year)) .range([lineChartMargin.left, lineChart.width - lineChartMargin.right]); const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .range([lineChart.height - lineChartMargin.bottom, lineChartMargin.top]); const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])); lineChargroup.selectAll("path") .data(series) .join("path") .attr("fill", ({ key }) => color(key)) .attr("d", area); const xAxis = d3.axisBottom(x) .tickFormat(d3.format("d")); lineChargroup.append("g") .attr("transform", `translate(0,${lineChart.height - lineChartMargin.bottom})`) .call(xAxis); lineChargroup.append("g") .attr("transform", `translate(${lineChartMargin.left},0)`) .call(d3.axisLeft(y)); lineChargroup.append("text") .attr("x", lineChart.width/2) .attr("y", lineChart.height) .attr("text-anchor", "middle") .text("time"); lineChargroup.append("text") .attr("transform", "rotate(-90)") .attr("x", -lineChart.height/2) .attr("y", lineChartMargin.left - 45) .attr("text-anchor", "middle") .text("Energy (0.1TWh)"); let filterdata = hist.find(d=> d.year == 2022); let hist_year = [{category: "renewable", value:0}, {category: "coal", value:0}, {category: "fuel", value:0}, {category: "gas", value:0}, {category: "cogeneration", value:0}, {category: "pumped", value:0}, {category: "nuclear", value:0}]; hist_year.forEach(entry => { if (filterdata.hasOwnProperty(entry.category)) { entry.value = filterdata[entry.category]; }}); let hist_year_sum = 0; hist_year.forEach(d => { hist_year_sum += d.value; }) const hist_year_normalized = hist_year; hist_year_normalized.forEach(d=> { d.value = d.value / hist_year_sum; }) const radius = Math.min(donutChart.width, donutChart.height) / 2; const pie = d3.pie().value(d => d.value); const arc = d3.arc() .innerRadius(radius * 0.5) .outerRadius(radius * 0.8); donuChargroup.selectAll('arc') .data(pie(hist_year)) .join('g') .append('path') .attr('d', arc) .attr('fill', d => color(d.data.category)) .attr("stroke", "white") .attr("transform", `translate(${donutChart.width / 2}, ${donutChart.height / 2})`); const donutext = donuChargroup.append("text") .attr("x", donutChart.width/2) .attr("y", donutChart.height/2) .attr("text-anchor", "middle") .style("font-size", "1.5em") .style("dominant-baseline", "middle") .html(function() { return "Total" + "" + (hist_year_sum*0.1).toFixed(1) + "" + "TWh"; }); const legend = legendGroup.selectAll("g") .data(hist_year_normalized) .join("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) legend.append("rect") .attr("x", 5) .attr("y", 300) .attr("width", 19) .attr("height", 19) .attr("fill", d => color(d.category)) legend.append("text") .attr("x", 28) .attr("y", 310) .attr("text-anchor", "start") .attr("dy", "0.32em") .text(d => (d.category + " : " + (d.value*100).toFixed(1) + "%")); const title = svg.append("text") .attr("x", width/2) .attr("y", lineChartMargin.top) .attr("text-anchor", "middle") .attr("font-size", 20) .text(`Power generation and purchase of ${2022}`); const brushWidth = x(hist[1].year) - x(hist[0].year); // Width of one unit on the x-axis const brush = d3.brushX() .extent([[lineChartMargin.left, 0], [lineChart.width - lineChartMargin.right, lineChart.height - lineChartMargin.bottom]]) .on("brush end", brushed); // Initial brush position const defaultPosition = [lineChartMargin.left, lineChartMargin.left + brushWidth]; lineChargroup.append("g") .attr("class", "brush") .call(brush) .call(brush.move, defaultPosition); function brushed(event) { if (!event.sourceEvent) return; // Only respond to event triggers, not programmatic changes let selection = event.selection || defaultPosition; // Update the brush position on click outside the brush if (event.type === "end") { const [mouseX] = d3.pointer(event.sourceEvent, this); updateBrushAndLog(mouseX); }} function updateBrushAndLog(mouseX) { const start = Math.max(lineChartMargin.left, Math.min(lineChart.width - lineChartMargin.right - brushWidth, mouseX - brushWidth / 2)); const end = start + brushWidth; // Move the brush lineChargroup.select(".brush").transition().call(brush.move, [start, end]); // Calculate and log the data for the new brush position const xPos = x.invert(start + brushWidth / 2); const closest = hist.reduce((a, b) => Math.abs(b.year - xPos) < Math.abs(a.year - xPos) ? b : a); updateDonutChartAndLegend(closest); } lineChargroup.on("click", function(event) { const [mouseX] = d3.pointer(event); updateBrushAndLog(mouseX); }); function updateDonutChartAndLegend(closest) { // Update filterdata based on closest data point filterdata = closest; // Recalculate renew_year values based on new filterdata hist_year.forEach(entry => { if (filterdata.hasOwnProperty(entry.category)) { entry.value = filterdata[entry.category]; } }); hist_year_sum = d3.sum(hist_year, d => d.value); hist_year_normalized.forEach(d => { d.value = d.value / hist_year_sum; }); //Redraw the donut chart const pieData = pie(hist_year_normalized); donuChargroup.selectAll('arc') .data(pieData) .join('g') .append('path') .attr('d', arc) .attr('fill', d => color(d.data.category)) .attr("stroke", "white") .attr("transform", `translate(${donutChart.width / 2}, ${donutChart.height / 2})`); donutext .html(function() { return "Total" + "" + (hist_year_sum*0.1).toFixed(1) + "" + "TWh"; }); legend.selectAll("text") .attr("x", 28) .attr("y", 310) .attr("text-anchor", "start") .attr("dy", "0.32em") .text(d => (d.category + " : " + (d.value*100).toFixed(1) + "%")); title.text(`Power generation and purchase of ${filterdata.year}`); } return svg.node(); }47:Tcc9,function InputToChart(energy){ const data = total.find(d=> d.name === energy).data; const graph = {width: 1000, height: 500}; const margin = { top: 60, right: 60, bottom: 40, left: 60 }; const innerWidth = graph.width - margin.left - margin.right; const innerHeight = graph.height - margin.top - margin.bottom; const svg = SimpleSvg({ width: graph.width, height: graph.height, id: "EnergyInput" }) const normalStack = svg.append("g") .attr("transform",`translate(${margin.left},${margin.top})`) for (let i = 0; i < data.length; i++) { let sum = 0; for (let j = 0; j < data.columns.length; j++) { if (data.columns[j] == "Year") { continue; } let tmp = data[i][data.columns[j]]; sum += tmp; } data[i]["total"] = sum; } const keys = data.columns.slice(1); const stack = d3.stack().keys(keys)(data); stack.forEach(d => { d.forEach(part => { part[0] = part[0] / part.data.total; part[1] = part[1] / part.data.total; }); }); const xScale = d3.scaleBand() .domain(data.map(d => d.Year)) .range([0, innerWidth - 40]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, 1]) .range([innerHeight, 0]); const colorScale = d3.scaleOrdinal(d3.schemeTableau10); const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d")); const yAxis = d3.axisLeft(yScale).tickFormat(d3.format(".0%")); normalStack.selectAll("g") .data(stack) .enter().append("g") .attr("fill", d => colorScale(d.key)) .selectAll("rect") .data(d => d) .enter().append("rect") .attr("x", d => xScale(d.data.Year)) .attr("y", d => yScale(d[1])) .attr("height", d => yScale(d[0]) - yScale(d[1])) .attr("width", xScale.bandwidth()); normalStack.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(xAxis); normalStack.append("g") .attr("transform", `translate(0,0)`) .call(yAxis); normalStack.append("text") .attr("x", innerWidth / 2) .attr("y", graph.height-margin.bottom) .attr("text-anchor", "middle") .text("Year"); normalStack.append("text") .attr("x", -graph.height / 2 + margin.bottom) .attr("y", -margin.left+10) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .text(`${energy} Import Normalized (${energy === "Oil" ? "Thousand Barrels" : "Kilo tons"})`); svg.append("text") .attr("x", innerWidth / 2+margin.left) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", 20) .text(`${energy} Import Over 91 ~ 111 year`); const legend = svg.append("g") .attr("transform", "translate(" + (innerWidth - margin.right) + "," + (innerHeight - 100) + ")") // .selectAll("g") .data(keys.slice().reverse()) .enter().append("g") .attr("transform", (d, i) => "translate(0," + i * 20 + ")"); legend.append("rect") .attr("x", 110) .attr("y", -120) .attr("width", 18) .attr("height", 18) .attr("fill", colorScale); legend.append("text") .attr("x", 130) .attr("y", -110) .attr("dy", "0.35em") .text(d => d); return svg.node(); }48:[{"id":"15da16715c717d3bd0f95732de53b88b8456df10eda071d3dfa9bf8d01bb114e60810fbef5d3283d55559c248e00f5ad60b0768871a8d4faaece02549acfbb4c","href":"https://static.observableusercontent.com/files/15da16715c717d3bd0f95732de53b88b8456df10eda071d3dfa9bf8d01bb114e60810fbef5d3283d55559c248e00f5ad60b0768871a8d4faaece02549acfbb4c","name":"renew_energy.csv","type":"text/csv","lastModified":1702606778017.398,"size":2363},{"id":"e8efdea01f450415461e866525153404613428848d8fa60722bbd0172a5032eb6fc114b1732136b8b8aeebdf50cdbfb6abe724f2a16a74c17c688029df796436","href":"https://static.observableusercontent.com/files/e8efdea01f450415461e866525153404613428848d8fa60722bbd0172a5032eb6fc114b1732136b8b8aeebdf50cdbfb6abe724f2a16a74c17c688029df796436","name":"oil_input.csv","type":"text/csv","lastModified":1702540477541.614,"size":1340},{"id":"6f2a54074193ad1bd3443444c64590f5ef8e82df3feaaea3ee2c06385dd93def277b7f08713d5a95b4eea92197d7126af07834f5805095ba332b41624d5b6da3","href":"https://static.observableusercontent.com/files/6f2a54074193ad1bd3443444c64590f5ef8e82df3feaaea3ee2c06385dd93def277b7f08713d5a95b4eea92197d7126af07834f5805095ba332b41624d5b6da3","name":"gas_input.csv","type":"text/csv","lastModified":1702543644323.204,"size":1386},{"id":"74ab1d9a5b850744f40ed23e991d2e58ee49c8be5c80b8183010a3553dc0a12dbef05833ed564a6f1bda9521e078e5087e2407dba6db09653a92e0163ea4dfd3","href":"https://static.observableusercontent.com/files/74ab1d9a5b850744f40ed23e991d2e58ee49c8be5c80b8183010a3553dc0a12dbef05833ed564a6f1bda9521e078e5087e2407dba6db09653a92e0163ea4dfd3","name":"coal_input.csv","type":"text/csv","lastModified":1702544656919.973,"size":1509},{"id":"afee409fbbe192837628a70442191156af03ad8a6fca973b753142dc88cb800ffdabbeb271dcaa159fb1c622d0cf0824a478c2b2f080a93eea93ba03a1640564","href":"https://static.observableusercontent.com/files/afee409fbbe192837628a70442191156af03ad8a6fca973b753142dc88cb800ffdabbeb271dcaa159fb1c622d0cf0824a478c2b2f080a93eea93ba03a1640564","name":"hisory_generate.csv","type":"text/csv","lastModified":1702555447577.872,"size":1132}] 43:{"id":"01843568387a3f48","slug":null,"title":"資料視覺化專題 - 能源視覺化","thumbnail":"c1c2262d6674d8a6c8d11da89268430387d3ee5f278f347ad6596f3524df2a8d","access_level":"public","create_time":"$D2023-12-11T14:44:37.423Z","update_time":"$D2023-12-20T14:00:31.295Z","view_time":null,"first_public_time":"$D2023-12-11T14:44:37.423Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3d4c9a6e07767495","login":"othsueh-ws","name":"othsueh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a08e3f15759b90a5d6e884b6a3c12940fd01e07ae774a824117ab30e7dbfde0b","tier":"starter_2024","bio":"","following":false},"version":738,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"da28203bf4a33713","login":"othsueh","name":"othsueh","avatar_url":"https://avatars-next.observableusercontent.com/783ba76c54657d8a80c42763eea2506840e79eaef5d084f4b34e401cd0521fd8","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"da28203bf4a33713","login":"othsueh","name":"othsueh","avatar_url":"https://avatars-next.observableusercontent.com/783ba76c54657d8a80c42763eea2506840e79eaef5d084f4b34e401cd0521fd8","tier":null,"role":"editor"},{"type":"team","id":"3d4c9a6e07767495","login":"othsueh-ws","name":"othsueh's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a08e3f15759b90a5d6e884b6a3c12940fd01e07ae774a824117ab30e7dbfde0b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"資料視覺化專題 - 能源視覺化","cells":[{"id":0,"value":"# 資料視覺化專題 - 能源視覺化","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"## View 1\nUse the brush on line chart to see data of every year and season.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"## View 2\nUse the brush on line chart to see data of every year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"## View 3\nUse the drop box to see source import percentage.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":626,"value":"viewof input = Inputs.select(total.map(d=>d.name), {label: \"Select Energy type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"EnergyInput = InputToChart(input);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"### File Processing of Vis1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"data1 = FileAttachment(\"renew_energy.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"parseTime = (timeString) => {\n // 根据 'Q' 分割时间字符串，提取年份和季度\n const [year, quarter] = String(timeString).split('Q');\n // 将字符串转换为数值，假设一年有四个季度\n return parseInt(year)+ (parseInt(quarter)-1) / 4;\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"renew = data1.map(item=>{\n let seasonMapping = {\n \"Q1\": \"Season one\",\n \"Q2\": \"Season two\",\n \"Q3\": \"Season three\",\n \"Q4\": \"Season four\"\n };\n item.quarter = seasonMapping[String(item.time).slice(-2)]\n item.time = parseTime(item.time);\n item.year = ~~(item.time)+1911;\n \n return item\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"### File Processing of Vis2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"hist = FileAttachment(\"hisory_generate.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"### File Processing of Vis3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":614,"value":"oil = FileAttachment(\"oil_input.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"gas = FileAttachment(\"gas_input.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"coal = FileAttachment(\"coal_input.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"total = [\n { name: \"Coal\", data: coal },\n { name: \"Oil\", data: oil },\n { name: \"Gas\", data: gas }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"import {SimpleSvg} from \"97376f41d8924520\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"