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/8) + " ," +
(margin.top + 10) + ")")
.style("text-anchor", "start")
.text("시간에 따른 #trashtagchallenge 구글 트렌드 관심도");
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: "Laura Lippman의 노메이크업 셀피 게시",
// title: "2014-03",
// wrap: 320 // 가로길이
// },
// data: {date: new Date("2014-03-01"), value: 52 }, //해당되는 데이터
// className: "show-bg",
// dx: 240, //보정값
// dy: -20,
// 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.
