Published
Edited
Jan 14, 2021
addAnnotations = function() {
const annotations = [{
id : data2[0].title,
note : {
label : data2[0].contents,
title : data2[0].title
},
x: x(data2[0].date) + x.bandwidth(),
y: y(data.filter(d => data2[0].date < d.date)[0].open),
dx : -100,
dy : 0,
subject: {
radius: 15,
radiusPadding: 0
},
type: d3_annotation.annotationCalloutCircle
}, {
id : data2[1].title,
note : {
label : data2[1].contents,
title : data2[1].title
},
x: x(data2[1].date) + x.bandwidth(),
y: y(data.filter(d => data2[1].date < d.date)[0].open),
dx : -100,
dy : -180,
subject: {
radius: 15,
radiusPadding: 0
},
type: d3_annotation.annotationCalloutCircle
}, {
id : data2[2].title,
note : {
label : data2[2].contents,
title : data2[2].title
},
x: x(data2[2].date) + x.bandwidth(),
y: y(data.filter(d => data2[2].date < d.date)[0].open),
dx : -100,
dy : -75,
subject: {
radius: 15,
radiusPadding: 0
},
type: d3_annotation.annotationCalloutCircle
}, {
id : data2[3].title,
note : {
label : data2[3].contents,
title : data2[3].title
},
x: x(data2[3].date) + x.bandwidth(),
y: y(data.filter(d => data2[3].date < d.date)[0].open),
dx : -160,
dy : -55,
subject: {
radius: 15,
radiusPadding: 0
},
type: d3_annotation.annotationCalloutCircle
},
].map(function(d) {
d.color = "#E8336D";
return d;
});
chart; // reactive hack to force annotations to render whenever the chart is redrawn
const makeAnnotations = d3_annotation
.annotation()
.type(d3_annotation.annotationLabel)
.annotations(annotations);
const annotate = d3.select(chart)
.append("g")
.attr("class", "annotation-group")
.call(makeAnnotations);
return annotate;
}
x = d3.scaleBand()
.domain(d3.utcDay
.range(data[0].date, +data[data.length - 1].date + 1)
.filter(d => d.getUTCDay() !== 0 && d.getUTCDay() !== 6))
.range([margin.left, width - margin.right])
.padding(0.2)
data2 = d3.tsvParse(parseMe2, d => {
return {
date : d3.utcParse('%Y.%m.%d')(d['Date']),
title : d['Title'],
contents : d['Contents'],
link : d['Link']
};
})
parseMe2 = `Date\tTitle\tContents\tLink
2020.11.26\t전환청구권행사 (제14회차)\t-발행주식총수 대비(%) 2.06\thttp://dart.fss.or.kr/dsaf001/main.do?rcpNo=20201126900527
2020.11.06\t전환청구권행사 (제14회차)\t-발행주식총수 대비(%) 1.07\thttp://dart.fss.or.kr/dsaf001/main.do?rcpNo=20201106900348
2020.11.04\t전환청구권행사 (제14회차)\t-발행주식총수 대비(%) 3.63\thttp://dart.fss.or.kr/dsaf001/main.do?rcpNo=20201104900466
2020.10.22\t주요사항보고서(전환사채권발행결정)\t주식총수 대비 비율(%) 5.27\thttp://dart.fss.or.kr/dsaf001/main.do?rcpNo=20201022000322
2020.11.26\t증권발행결과(자율공시) (제15회차 CB)\t제15회 무기명식 무보증 사모 전환사채 - 전환가액은 832원이며, 전환발행가능 예정 주식수는 12,019,230주 입니다.\thttp://dart.fss.or.kr/dsaf001/main.do?rcpNo=20201126900316
`
md`https://observablehq.com/@hydrosquall/d3-annotation-with-d3-line-chart`
md`https://observablehq.com/@d3/candlestick-chart`
d3_annotation = require("d3-svg-annotation")
d3 = require("d3@5")
import { checkbox } from "@jashkenas/inputs"
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.
