Published
Edited
Aug 24, 2020
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("path")
.data(series)
.join("path")
.attr("fill", ({key}) => color(key))
.attr("d", area)
.append("title")
.text(({key}) => key);
svg.append("p")
.text("안녕하세요" + document.getElementById('obstest').innerText); //연결 테스트, 오류나도 외부에선 작동하는것 확인
// .text("안녕하세요"); //연결 테스트 안할때 용도
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
data = Object.assign(d3.csvParse(await FileAttachment("danTDM-subemojis@3.csv").text(), d3.autoType), {y: "Emoji frequency"})
// data = newJSON;
// 샘플 데이터 자르기
sampleData = d3.csvParse(await FileAttachment("danTDM-subemojis@3.csv").text(), d3.autoType).slice(10, 20)
// date만 출력하여 샘플 데이터 테스트해보기
console.log(sampleData[0].date);
// 초기화
newJSON = [];
// 샘플 데이터에서 key가 0인 값들 자르기 (이모지 결과값이 0으로 나오는것들 모두 삭제)
{
let resultJSON = [];
for(let i in sampleData){
for(let key in sampleData[i]) {
if(sampleData[i][key] > 0) {
resultJSON[key] = sampleData[i][key];
}
}
newJSON[i] = resultJSON
resultJSON = []
}
}
// 가공된 데이터 자르기
console.log(newJSON);
//refresh chart every 1 seconds
refresh = {
while (true) {
//이부분에 데이터 업데이트
//차트 업데이트
yield Promises.delay(3000, chart);
}
}
// 가공된 데이터로 기존 데이터 업데이트
series = d3.stack().keys(data.columns.slice(1))(data)
console.log(data.columns.slice(1))
area = d3.area()
.x(d => x(new Date("1970-01-01 00:00").setSeconds(d.data.date)))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
// // 전체
// x = d3.scaleTime()
// .domain([new Date("1970-01-01 0:00"), new Date("1970-01-01 0:00").setSeconds(data[489].date)])
// .range([margin.left, width - margin.right])
// .nice()
// 5분 ~ 10분대
x = d3.scaleTime()
.domain([new Date("1970-01-01 0:05"), new Date("1970-01-01 0:10")])
.range([margin.left, width - margin.right])
.nice()
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])
// 데이터가 0인 column은 자동으로 없애줌
columns = data.columns.slice(1)
console.log(Object.entries(data))
color = d3.scaleOrdinal()
.domain(columns)
.range(d3.schemeCategory10)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
height = 500
margin = ({top: 20, right: 30, bottom: 30, left: 40})
d3 = require("d3@5")
import {swatches} from "@d3/color-legend"
import {log, logTable} from '@sorig/console-log-without-leaving-your-notebook'
startSecond = new Date("1970-01-01 0:00").getSeconds()
console.log(new Date("1970-01-01 00:00").setSeconds(data[153].date))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
