drawChart = ele => {
const svg = ele
.append("svg")
.style("height", chart_height + "px")
.style("width", chart_width + "px");
// Axes
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Axis labels, title
svg.append('text').call(xLabel);
svg.append('text').call(chartTitle);
svg.append('text').call(yLabel);
// Points
svg
.selectAll("circle")
.data(d => d.values)
.join("circle")
.call(drawPoint);
}
by_type_data = d3
.nest()
.key(d => d.type)
.entries(chart_data)
by_type_chart = {
const div = d3.create("div").style("display", "block");
const charts = div
.selectAll("div")
.data(by_type_data) // this will have only 4 elements in it
.join("div")
.style("height", chart_height + "px")
.style("width", chart_width + "px")
.attr("class", "chart-container")
.call(drawChart);
return div.node();
}
chart_height = 300
chart_width = 400
x = d3
.scaleLinear()
.domain(d3.extent(chart_data, d => d.x))
.range([margin.left, chart_width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(chart_data, d => d.y))
.range([chart_height - margin.bottom, margin.top])
tickFormatter = d3.format("$.2s")
xAxis = g =>
g
.attr("transform", `translate(0,${chart_height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(tickFormatter))
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(tickFormatter))
xLabel = ele =>
ele
.text("In State Tuition")
.attr("x", (x.range()[1] - x.range()[0]) / 2)
.attr("y", chart_height - margin.bottom + 35)
.style('font-family', "sans-serif")
// .style("text-anchor", "middle")
.style("font-size", '14px')
chartTitle = ele =>
ele
.text(d => d.key)
.attr("transform", `translate(${chart_width / 2}, ${20})`)
.style("text-anchor", "middle")
.style('font-family', "sans-serif")
yLabel = ele =>
ele
.text("Out of State Tuition")
.attr(
"transform",
`translate(${margin.left - 40}, ${chart_height / 2})rotate(-90)`
)
.style("text-anchor", "middle")
.style('font-family', "sans-serif")
html`<style>
.chart-container {
display:inline-block;
}
</style>`
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.
