chosen_date = "2017-05-13"
dataFiltered2 = nested.filter(function (d) { return d.key === chosen_date })
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 + 600))
.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);
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 chosen_date = formatDate(d.date);
var a = chosen_date.split("/")
if (parseInt(a[0]) < 10) { a[0] = "0" + a[0]; }
if (parseInt(a[1]) < 10) { a[1] = "0" + a[1]; }
var b = a[2] + "-" + a[0] + "-" + a[1]
console.log("B: ", b);
dataFiltered2 = nested.filter(function (d) { return d.key === b });
console.log(dataFiltered2);
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 === chosen_date });
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect").data(dataFiltered2[0].values).enter().append("rect")
.attr("x", d => x(d.reason))
.attr("y", d => y(d.value)+ 200)
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
var dataFiltered2 = nested.filter(function (d) { return d.key == chosen_date });
// console.log("DF2: ", dataFiltered2[0].values);
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect").data(dataFiltered2[0].values).enter().append("rect")
.attr("x", d => x(d.reason))
.attr("y", d => y(d.value)+ 200)
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
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.
chart4 = {
const svg = d3.select(DOM.svg(width, height + 600));
var dataFiltered2 = nested.filter(function (d) { return d.key === "2017-02-02" });
console.log("DF2: ", dataFiltered2[0].values);
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect").data(dataFiltered2[0].values).enter().append("rect")
.attr("x", d => x(d.reason))
.attr("y", d => y(d.value)+ 200)
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
yAxis = g => g
.attr("transform", `translate(${margin.left},200)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
xAxis = g => g
.attr("transform", `translate(0,${height + 600 - margin.bottom})`)
.call(d3.axisBottom(x)
.tickSizeOuter(0))
y = d3.scaleLinear()
.domain([0, 200]).nice()
.range([height + 400 - margin.bottom, margin.top])
x = d3.scaleBand()
.domain(dataFiltered2[0].values.map(d => d.reason))
.range([margin.left, width - margin.right])
.padding(0.3)
margin = ({top: 20, right:0, bottom: 30, left: 40})
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.
