Published
Edited
Dec 4, 2018
chart = {
const svg = d3.select(DOM.svg(width, height));
const formatTime = d3.timeFormat("%Y");
const xAxis = d3.axisBottom()
.scale(t_xScale)
.ticks(15)
.tickFormat(formatTime); // use our custom format
svg.append("g")
.call(yAxis);
const path = svg.append("g")
.attr("fill", "none")
.selectAll("path")
.data(data.series)
.enter().append("path")
.style("mix-blend-mode", "multiply")
.attr("d", d => line(d.values));
path.attr("stroke", (d,i)=>color(i+1))
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
svg.call(hover, path);
const bubble_data = bubbleData;
// const line_data = songData;
const [bubbleStartDate, bubbleEndDate] = d3.extent(bubble_data, d => d.year);
// const [lineStartDate, lineEndDate] = d3.extent(line_data, d => d.date);
// const [trendStartDate, trendEndDate] = d3.extent(trendData, d => d.date);
// const xScale = d3.scaleTime()
// // extend the domain with 1 day at each side
// // .domain([d3.timeDay.offset(startDate, -1150), d3.timeDay.offset(endDate, 80)])
// .domain([d3.timeDay.offset(bubbleStartDate, -30), d3.timeDay.offset(bubbleEndDate, 30)])
// .range([padding.left, width - padding.right])
const tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("background", "#fff")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
svg.selectAll("circle1")
.data(bubble_data)
.enter()
.append("circle")
.attr("cx", d => t_xScale(d.date))
.attr("cy", height-timeline_offset)
.attr("r", 6)
// .style("stroke", d => "#000")
.attr("fill", bubble_color)
.attr("stroke", bubble_border_color)
.style("stroke-opacity", 1)
.style("fill-opacity", 0.55)
.on("mouseover", d => {
var circle_category = d.category;
var circle_event = d.event
var circle_title = d.search_term;
var circle_year = d.year;
var url = d.media;
tooltip.html("");
tooltip.style("visibility", "visible")
.style("border", "4px solid" + bubble_color)
tooltip.append("div")
.text(d => circle_year)
.style("font-family", "sans-serif")
.style("font-size", "12px")
//.style("color", "#fff")
.style("color", "#000")
.style("background", bubble_color);
tooltip.append("div")
.text(d => circle_title)
.style("font-family", "sans-serif")
.style("font-size", "14px")
.style("color", "#fff")
//.style("color", "#0000")
.style("background", "#000000");
//fixing color
// .style("background", bubble_color);
tooltip.append("div")
.text(d => circle_event)
.style("font-family", "sans-serif")
.style("font-size", "11px")
.style("color", "#000")
.style("background", bubble_color);
tooltip.append('<img src="{media}" />')
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY+20) + "px").style("left", (d3.event.pageX-100) + "px");
})
.on("mouseout", function(d) {
tooltip.style("visibility", "hidden");
})
.on("click", function(d) {
tooltip.style("visibility", "shown");
});
//************************************************************************************************
//********************************************TIMELINE********************************************
//************************************************************************************************
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height-timeline_offset-30})`)
.call(xAxis)
.selectAll("text").remove() // rotate the axis labels
svg.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${padding.left}, 0)`)
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height-timeline_offset})`)
.call(xAxis)
.selectAll("text") // rotate the axis labels
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
svg.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${padding.left}, 0)`)
return svg.node();
}
y = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
.range([height-timeline_offset - margin.bottom, margin.top-1000])
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))
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.
