width = 600
render_linechart = function(data, xAxis, yAxis, lineFunction, debug) {
/* Return a DOM node with containing a line chart.
Arguments:
data: a list of data objects (dictionaries or iterables)
xAxis: a d3.axis
yAxis: a d3.axis
lineFunction: a function used to extract values from each datapoint and render line segments.
debug: variable that forces the chart to redraw every time this step reruns
*/
const svg = d3.select(DOM.svg(width, height));
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#292D3E");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#F08C8C") // Enigma Blue
.attr("stroke-width", 3)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineFunction)
svg.append("text")
.attr("class", "title")
.attr("font-size", "12px")
.attr("transform",
"translate(" + (width - margin.right) + " ," +
(margin.top + 10) + ")")
.style("text-anchor", "end")
.text("시간에 따른 ivote 구글 트렌드 관심도");
return svg.node();
}
labelAnnotations = {
return [{
id: "Lippman",
// If you don't provide a custom "type" attribute in your options dictionary, ,
// the default type in the getAnnotations function will be used.
note: {
label: "2015 영국 총선",
title: "2015-03",
wrap: 200 // 가로길이
},
data: {date: new Date("2015-03-01"), value: 100 }, //해당되는 데이터
className: "show-bg",
dx: 50, //보정값
dy: 50,
type: d3.annotationCustomType(
d3.annotationLabel,
{"className":"custom",
"connector":{"end":"dot",
"type":"elbow"},
"note":{"align":"dynamic",
"orientation":"leftRight",
"lineType":"horizontal"}})
},
{
id: "india",
// If you don't provide a custom "type" attribute in your options dictionary, ,
// the default type in the getAnnotations function will be used.
note: {
label: "2019 인도 총선",
title: "2019-04",
wrap: 200 // 가로길이
},
data: {date: new Date("2019-03-01"), value: 80 }, //해당되는 데이터
className: "show-bg",
dx: -60, //보정값
dy: 50,
type: d3.annotationCustomType(
d3.annotationLabel,
{"className":"custom",
"connector":{"end":"dot",
"type":"elbow"},
"note":{"align":"dynamic",
"orientation":"leftRight",
"lineType":"horizontal"}})
},
{
id: "korea",
// If you don't provide a custom "type" attribute in your options dictionary, ,
// the default type in the getAnnotations function will be used.
note: {
label: "2018 대한민국 지방선거",
title: "2018-06",
wrap: 200 // 가로길이
},
data: {date: new Date("2018-06-01"), value: 1 }, //해당되는 데이터
className: "show-bg",
dx: -30, //보정값
dy: -50,
type: d3.annotationCustomType(
d3.annotationLabel,
{"className":"custom",
"connector":{"end":"dot",
"type":"elbow"},
"note":{"align":"dynamic",
"orientation":"leftRight",
"lineType":"horizontal"}})
},
]
}
// I used 4 of the 8 annotation types, be sure to see the other 4 options when building your own!
// http://d3-annotation.susielu.com/#types
parseTime = d3.isoParse
formatTime = d3.isoFormat
margin = ({top: 20, right: 30, bottom: 30, left: 40})
x = d3.scaleTime()
.domain(d3.extent(data, d => new Date(d.date))) //new Date 해줘야 string이 아니라 날짜로 제대로 계산됨
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => parseInt(d.value))]) // parseInt ㅎㅐ줘야 정수 제대로 계산
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("class", "x-axis")
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.attr("class", "y-axis")
.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));
// Helper function for creating a line in D3 v4
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(new Date(d.date))) //new Date 해줘야 string이 아니라 날짜로 제대로 계산됨
.y(d => y(parseInt(d.value)))
d3_base = require("https://d3js.org/d3.v4.min.js")
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.
