render_data_table(table_info)
weather2012to2015 = d3.csvParse(await FileAttachment("weather-1.csv").text())
md`## Filter`
weatherByYear = weather2012to2015.filter(
d => timeformat(d.date).getFullYear() == choiceYear
)
// Create a nested data structure that has the min,max, and avg price for each PermitClass
summary_by_year = d3
.nest() // create a nesting function
.key(d => timeformat(d.date)) // Where we nest by the "date" value of each object
.rollup(d => {
// For each _group_, compute the following values
return {
max_temp: d3.max(d, dd => +dd.temp_max),
min_temp: d3.min(d, dd => +dd.temp_min),
wind: d3.max(d, dd => +dd.wind)
};
})
.entries(weatherByYear) // Pass our data in as we create the function!
weatherdate2 = weather2012to2015.map(d => timeformat(d.date).getFullYear())
scaleBand = d3
.scaleBand()
.domain(weatherByYear.map(d => timeformat(d.date)))
.range([50, width])
.padding(0.1)
xScaleAxis = d3
.axisBottom(scaleBand)
.tickFormat(d3.timeFormat("%Y/%m/%d"))
.tickValues(
scaleBand.domain().filter(function(d, i) {
return !(i % 15);
})
)
bar_yScale = d3
.scaleLinear()
.domain([0, d3.max(summary_by_year.map(d => d.value[choice]))])
.range([height - 50, 50])
viewof choiceYear = select([2012, 2013, 2014, 2015])
viewof choice = select(["max_temp", "min_temp", "wind"])
chart1 = {
const svg = d3.create('svg').attr('viewBox', [0, 0, 1000, height]);
// Append x axis
svg
.append('g')
.attr("transform", `translate(0,${height - 50})`)
.call(xScaleAxis)
.selectAll("text")
.attr("y", 5)
.attr("x", 3)
.attr("dy", ".35em")
.attr("transform", "rotate(40)")
.style("text-anchor", "start");
//append y axis
const yAxis = d3.axisLeft().scale(bar_yScale);
svg
.append('g')
.attr('transform', 'translate(' + 50 + ',0)')
.call(yAxis);
//append title
svg
.append("text")
.attr('transform', `translate(${width / 2}, ${50 / 2})`)
.style('text-anchor', 'middle')
.style('font-size', '20px')
.style('font-weight', 'bold')
.text(choice + ' Data in ' + choiceYear);
// Add the data rectangles/bars
svg
.selectAll('rect')
.data(summary_by_year)
.join(enter => enter.append('rect'))
.attr('x', d => scaleBand(d.key))
.attr('y', d => bar_yScale(d.value.avg_price))
.attr('width', scaleBand.bandwidth())
.attr('height', 0)
.attr('fill', '#F34F1C');
//add animation
svg
.selectAll("rect")
.transition()
.duration(2000)
.attr('y', d => bar_yScale(d.value[choice]))
.attr('height', d => bar_yScale(0) - bar_yScale(d.value[choice]))
.delay(function(d, i) {
//console.log(i);
return i * 10;
});
return svg.node();
}
md`## Abstract/Elaborate`
SeattleLiving = d3.csvParse(await FileAttachment("Airbnb_Cleaned.csv").text())
// Nest your data by type 1, then type 2
nested_data = d3
.nest()
.key(d => d['address'])
.key(a => a['room_type'])
.entries(SeattleLiving)
nested_data.map(d => {
d.name = d.key;
d.children = d.values.map(dd => {
dd.name = dd.key;
return dd;
});
return d;
})
my_pack = data =>
d3
.pack()
.size([width, height])
.padding(3)(
d3
.hierarchy(
{ key: "Greater Seattle Area", values: nested_data },
d => d.values
)
.sum(d => +d.bedrooms)
.sort((a, b) => b.value - a.value)
)
chart = {
const root = my_pack(nested_data);
let focus = root;
let view;
const svg = d3
.create("svg")
.attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
.style("display", "block")
.style("margin", "0 -14px")
.style("background", color(0))
.style("cursor", "pointer")
.on("click", () => zoom(root));
const node = svg
.append("g")
.selectAll("circle")
.data(root.descendants().slice(1))
.join("circle")
.attr("fill", d => (d.children ? color(d.depth) : "white"))
.attr("pointer-events", d => (!d.children ? "none" : null))
.on("mouseover", function() {
d3.select(this).attr("stroke", "#000");
})
.on("mouseout", function() {
d3.select(this).attr("stroke", null);
})
.on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation()));
const label = svg
.append("g")
.style("font", "10px sans-serif")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
.style("fill-opacity", d => (d.parent === root ? 1 : 0))
.style("display", d => (d.parent === root ? "inline" : "none"))
.text(d => d.data.name);
zoomTo([root.x, root.y, root.r * 2]);
function zoomTo(v) {
const k = width / v[2];
view = v;
label.attr(
"transform",
d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`
);
node.attr(
"transform",
d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`
);
node.attr("r", d => d.r * k);
}
function zoom(d) {
const focus0 = focus;
focus = d;
const transition = svg
.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", d => {
const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
return t => zoomTo(i(t));
});
label
.filter(function(d) {
return d.parent === focus || this.style.display === "inline";
})
.transition(transition)
.style("fill-opacity", d => (d.parent === focus ? 1 : 0))
.on("start", function(d) {
if (d.parent === focus) this.style.display = "inline";
})
.on("end", function(d) {
if (d.parent !== focus) this.style.display = "none";
});
}
return svg.node();
}
md`## Select`
data = d3.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"
)
state_data1 = data.filter(d => d.date === "2020-05-25")
state_data = state_data1
.map(function(d) {
return {
x: d.state,
y: +d.cases,
color: "blue"
};
})
margin = ({
top: 30,
right: 10,
bottom: 80,
left: 80
})
x = d3
.scaleBand()
.domain(state_data.map(d => d.x))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3
.scaleLinear()
.domain([0, d3.max(state_data, d => d.y)])
.range([height - margin.bottom, margin.top])
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
chart2 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const tip = svg.append('g');
const tipRect = tip.append("rect");
const tipText = tip.append('text').style("text-anchor", "middle");
svg
.append("g")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-40)");
svg.append("g").call(yAxis);
svg
.append("text")
.text("# of Cases in Each State")
.style("font-weight", "bold")
.style("font-size", "15px")
.attr("transform", "translate(400, 20)");
svg
.append("text")
.text("States")
.style("font-size", "12px")
.attr("transform", "translate(450, 480)");
svg
.append("text")
.text("# of Cases")
.style("font-size", "12px")
.attr("transform", "translate(15, 200) rotate(-90)");
svg
.selectAll("rect")
.data(state_data)
.join(enter => enter.append("rect"))
.attr("x", d => x(d.x))
.attr("y", d => y(d.y))
.attr("width", x.bandwidth())
.attr("fill", "blue")
.attr("opacity", "0.90")
.on('mouseenter', function(d) {
const position = d3.mouse(this);
d3.select(this).style("fill", "red");
tip.attr('transform', `translate(${position[0]}, ${position[1]})`);
const { x, y, width: w, height: h } = tipText.node().getBBox();
tipRect
.attr("width", w)
.attr("height", h)
.attr("x", x)
.attr("y", y)
.attr("fill", "none");
tipText.text(d.x + ": " + d.y + " cases");
})
.on("mousemove", function(d) {
const position = d3.mouse(this);
tip.attr("transform", `translate(${position[0]}, ${position[1] - 10})`);
})
.on("mouseout", function(d) {
d3.select(this).style("fill", "blue");
tipRect.attr('stroke', 'none').attr('fill', 'none');
tipText.text("");
});
svg
.selectAll("rect")
.transition()
.duration(2000)
.attr("y", d => y(d.y))
.attr("height", d => y(0) - y(d.y));
return svg.node();
}
import { select } from "@jashkenas/inputs"
d3 = require("d3@5", "d3-array@2")
_ = require("lodash")
timeformat = d3.timeParse("%Y/%m/%d")
height = 932
pack_width = 932
format = d3.format(",d")
color = d3
.scaleLinear()
.domain([0, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.