chosen_date = "2017-05-13"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
chart = {
const years = d3.nest()
.key(d => d.date.getFullYear())
.entries(data)
.reverse();
// const years = [2016];
// var chosen_date = "2017-05-13";
// var dataFiltered2 = nested.filter(function (d) { return d.key === chosen_date });
const svg = d3.select(DOM.svg(width, height + 300))
.style("font", "10px sans-serif")
.style("width", "100%")
.style("height", "auto");
var dataFiltered = years.filter(function (d) { return d.key === chosen_year.toString() })
console.log("DF: ", dataFiltered);
// console.log(years);
console.log("DF:: ", dataFiltered);
const year = svg.selectAll("g")
.data(dataFiltered)
.enter().append("g")
.attr("transform", (d, i) => `translate(40,${height * i + cellSize * 1.5})`);
year.append("text")
.attr("x", -5)
.attr("y", -5)
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(d => d.key);
year.append("g")
.attr("text-anchor", "end")
.selectAll("text")
.data((weekday === "weekday" ? d3.range(2, 7) : d3.range(7)).map(i => new Date(2017, 0, i)))
.enter().append("text")
.attr("x", -5)
.attr("y", d => (countDay(d) + 0.5) * cellSize)
.attr("dy", "0.31em")
.text(formatDay);
// var chosen_date = "2017-03-01";
var dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date })[0].values;
console.log("DF3: ", dataFiltered3);
year.append("g")
.selectAll("rect")
.data(d => d.values)
.enter().append("rect")
.attr("width", cellSize - 1)
.attr("height", cellSize - 1)
.attr("x", d => timeWeek.count(d3.timeYear(d.date), d.date) * cellSize + 0.5)
.attr("y", d => countDay(d.date) * cellSize + 0.5)
.attr("fill", d => color(-1 * d.value))
.on('click', function(d) {
console.log("Chosen date: ", formatDate(d.date));
var b = formatDate(d.date);
var a = b.split("/")
if (parseInt(a[0]) < 10) { a[0] = "0" + a[0]; }
if (parseInt(a[1]) < 10) { a[1] = "0" + a[1]; }
var chosen_date = a[2] + "-" + a[0] + "-" + a[1]
console.log("chosen_date: ", chosen_date);
dataFiltered3 = nested.filter(function (d) { return d.key === chosen_date });
console.log(dataFiltered3);
// chosen_date = b;
})
.append("title")
.text(d => `${formatDate(d.date)}: ${d.value}`);
const month = year.append("g")
.selectAll("g")
.data(d => d3.timeMonths(d3.timeMonth(d.values[0].date), d.values[d.values.length - 1].date))
.enter().append("g");
month.filter((d, i) => i).append("path")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 3)
.attr("d", pathMonth);
month.append("text")
.attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2)
.attr("y", -5)
.text(formatMonth);
// var dataFiltered2 = nested.filter(function (d) { return d.key === "2017-02-02" })[0].values;
console.log("DF33: ", dataFiltered3);
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(dataFiltered3)
.enter().append("rect")
.attr("x", x(0))
.attr("y", d => y(d.reason) + 250)
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth());
svg.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.style("font", "12px sans-serif")
.selectAll("text")
.data(dataFiltered3)
.enter().append("text")
.attr("x", d => x(d.value) - 4)
.attr("y", d => y(d.reason) + 250 + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => d.value);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
// height = cellSize * (weekday === "weekday" ? 7 : 9)
height = 500
formatDate = d3.timeFormat("%x")
// md` # Drill down attempt`
data2 = d3.csv("https://gist.githubusercontent.com/alaapsivaram/ddfbed720e9e420aa27b3ba49f4dc508/raw/d4753194a77525f7724a2f1b2aa40e0c1bc7887a/NYPD_Collisions_by_cause_2.csv").then(
function(data) {
data.forEach(function(d) {
d["value"] = +d["value"];
var date_t = new Date(d["date"]);
date_t.setDate(date_t.getDate() + 1)
d["date"] = date_t
});
return data;
}
)
nested = d3.nest()
.key(d => d.date.toISOString().slice(0,10))
.entries(data2)
.reverse()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
yAxis = g => g
.attr("transform", `translate(${margin.left},250)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
xAxis = g => g
.attr("transform", `translate(0,280)`)
.call(d3.axisTop(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
y = d3.scaleBand()
.domain(data2.map(d => d.reason))
.range([30, 490])
.padding(0.1)
x = d3.scaleLinear()
.domain([0, d3.max(data2, d => d.value)])
.range([margin.left, width - margin.right])
margin = ({top: 30, right: 0, bottom: 10, left: 200})
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.
