Published
Edited
Feb 21, 2020
chart = {
// Main SVG
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// All Streams
const streams = svg.append("g")
.attr("class", "streams");
// Array of all individual streams
const s = streams.selectAll("path").data(series)
.join("path")
.attr("class", "stream")
.attr("fill", d => color(d.key))
.attr("d", area)
.append("title")
.text(d => d.key);
// Axes
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0)
.attr("x", -height/2)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Minutes");
return svg.node();
}
data = { const data = [
{'day': 'Sunday', 'Interactive Visualization': 0, 'Chinese II': 10, 'RCOS': 15, 'Ethics': 0},
{'day': 'Monday', 'Interactive Visualization': 0, 'Chinese II': 20, 'RCOS': 0, 'Ethics': 35},
{'day': 'Tuesday', 'Interactive Visualization': 60, 'Chinese II': 40, 'RCOS': 0, 'Ethics': 0},
{'day': 'Wednesday', 'Interactive Visualization': 20, 'Chinese II': 60, 'RCOS': 0, 'Ethics': 50},
{'day': 'Thursday', 'Interactive Visualization': 200, 'Chinese II': 20, 'RCOS': 0, 'Ethics': 30},
{'day': 'Friday', 'Interactive Visualization': 45, 'Chinese II': 10, 'RCOS': 100, 'Ethics': 0},
{'day': 'Saturday', 'Interactive Visualization': 0, 'Chinese II': 35, 'RCOS': 0, 'Ethics': 0},
]
data.columns = ['day', 'Interactive Visualization', 'Chinese II', 'RCOS', 'Ethics']
return data
}
series = d3.stack()
.keys(data.columns.slice(1))
.offset(d3.stackOffsetWiggle)
//.order(d3.stackOrderInsideOut)
(data)
.map(d => (d.forEach(v => v.key = d.key), d))
area = d3.area()
.x(d => x(d.data.day))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
x = d3.scalePoint()
.domain(data.map(d => d.day))
.range([margin.left, width-margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([-180, 180]) // shared scale between the two teammates
// d3.min(series, d => d3.min(d, d => d[0])), // Min of all y0 for all series
// d3.max(series, d => d3.max(d, d => d[1])) // Max of all y1 for all series
// ])
.range([height - margin.bottom, margin.top]) // Recall (0, 0) is top left
color = d3.scaleOrdinal()
.domain(series.map(d => d.key))
.range(d3.schemeTableau10)
xAxis = g => g
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
// .call(g => g.selectAll(".domain").remove()) //Gets rid of border line
yAxis = g => {
let h = g.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickValues(d3.range(-180, 181, 30)));
h.selectAll("text").nodes().forEach(elem => elem.innerHTML = Math.abs(elem.innerHTML));
return h
}
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.
