Published
Edited
Jul 31, 2019
d3 = require("d3@5")
dataset = await d3.csv("https://gist.githubusercontent.com/chekos/75af361a5dd81acacb573dff4463b454/raw/3d340fd0f189354bfd5537989b4fee9833c44d1b/ppic_drilling_favor_trend.csv")
chart = {
const height = width * 0.50
const svg = d3.select(DOM.svg(width*50, height))
const dimensions = ({
height: height,
width: width * 0.50,
margin: ({
top: 50,
right: 30,
bottom: 50,
left: 50
})
})
dimensions.boundedHeight = dimensions.height -dimensions.margin.top - dimensions.margin.bottom
dimensions.boundedWidth =
dimensions.width - dimensions.margin.left - dimensions.margin.right
const bounds = svg.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
const xScale = d3.scaleLinear()
.domain([2003, 2020])
.range([0,dimensions.boundedWidth])
.nice()
const yScale = d3.scaleLinear()
.domain([0.0,1.0])
.range([dimensions.boundedHeight, 0])
.nice()
const colorScale = d3.scaleLinear()
.domain([2000,2020])
.range(["#f7f7f7", "#CD7100"])
.nice()
const xAccessor = d => d.year
const yAccessor = d => d.favor
// arrows?
const defs = bounds.append("defs")
const years = [2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019]
for(const key in years){
defs.append("marker")
.attr("id",`arrow-${years[key]}`)
.attr("markerUnits","stroke-width")
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("viewBox", "0 0 12 12")
.attr("refX", 6)
.attr("refY", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M2,2 L10,6 L2,12 L6,6 L2,2")
.style("fill", colorScale(years[key]))
}
const lineas= bounds.selectAll("line")
.data(dataset)
const linea = lineas.join("line")
.attr("x1", d => xScale(2003))
.attr("x2", d => xScale(xAccessor(d)))
.attr("y1", yScale(0.39))
.attr("y2", d => yScale(yAccessor(d)))
.attr("stroke", d => colorScale(xAccessor(d)))
.attr("stroke-width", 2.5)
.attr("marker-end", d => `url(#arrow-${xAccessor(d)})`)
.attr("fill", d => colorScale(xAccessor(d)))
const circle = bounds.append("circle")
.attr("cx", xScale(2003))
.attr("cy", yScale(0.39))
.attr("r", 5)
.attr("fill", colorScale(2019))
const xAxisGenerator = d3.axisBottom()
.scale(xScale)
.tickFormat(d3.format("d"))
const yAxisGenerator = d3.axisLeft()
.scale(yScale)
.tickFormat(d3.format(".0%"))
.tickSize(1.2)
.ticks(5)
const xAxis = bounds.append("g")
.style("font-size", "0.7em")
.call(xAxisGenerator)
.style("transform", `translate(0px,${dimensions.boundedHeight}px)`)
const yAxis = bounds.append("g")
.style("font-size", "0.7em")
.call(yAxisGenerator)
const yAxisLabel = yAxis.append("text")
.attr("x", -dimensions.boundedHeight / 2)
.attr("y", -dimensions.margin.left + 15)
.attr("fill", "black")
.style("font-size", "1.05em")
.text("Share of all adults")
.style("transform", "rotate(-90deg)")
.style("text-anchor", "middle")
const title = bounds.append("g").append("text")
.attr("x", -dimensions.margin.left + 5)
.attr("y", -dimensions.margin.top + 25)
.attr("fill", "black")
.attr("font-size", "1.05em")
.html("Support for allowing more oil drilling off the California coast")
.style("text-anchor", "left")
// This could help if the chart is so small the title would overflow
// const subtitle = bounds.append("g").append("text")
// .attr("x", 0)
// .attr("y", -2)
// .attr("fill", "black")
// .attr("font-size", "18px")
// .html("off the California coast")
// .style("text-anchor", "left")
const source = bounds.append("g")
.append("text")
.attr("x",0)
.attr("y", dimensions.boundedHeight + dimensions.margin.bottom - 10)
.attr("fill", "black")
.attr("font-size","0.8em")
.html("Source: PPIC Statewide Survey")
.style("text-anchor","left")
return svg.node()
}
html`
<style>
text {
font-family: Trebuchet MS;
}
</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.
