data = d3.csvParse(await FileAttachment("SeattleWeather2017.csv").text(), d3.autoType)
x_variable = "Date"
y_variable = "TempMax"
color_variable = "Rain"
data_array = data.map(function(day) {
// let color = 'red'
// if(day.Rain = 'TRUE') {
// color = 'blue'
// }
return {
x: day.Date,
y: day.TempMax,
color: colorConvert(day.Rain)
}
})
function colorConvert(boolean) {
if(boolean == 'TRUE') {
return 'red';
}
return 'blue';
}
date_range = [d3.min(data_array, d => d.x), d3.max(data_array, d => d.x)]
temp_range = [d3.min(data_array, d => d.y), d3.max(data_array, d => d.y)]
color_scale = _.uniqBy(data_array, d => d.color).map(d => d.color)
height = 600
width = 954
margin = ({top: 20, right: 30, bottom: 30, left: 40})
x_scale = d3.scaleTime()
.domain(date_range)
.range([margin.left, width - margin.right])
y_scale = d3.scaleLinear()
.domain(temp_range)
.range([height - margin.bottom, margin.top])
color = d3.scaleSequential()
.domain(color_scale)
.interpolator(d3.interpolateRainbow);
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x_scale))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y_scale))
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("text")
.attr("x", width / 2)
.attr("y", height)
.text("Date")
.style("font-size", "20px")
svg.append("text")
.attr("transform", "translate(10, 300) rotate(-90)")
.text("Temperature")
.style("font-size", "20px")
svg
.selectAll('circle')
.data(data_array)
.join(enter => enter.append("circle"))
.attr('cx', d => x_scale(d.x))
.attr('cy', d => y_scale(d.y))
.attr('r', 5)
.attr('fill', d => d.color)
.attr('opacity', 0.3)
return svg.node();
}
height
chart2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append('text', 'label');
svg.append("text")
.attr("x", width / 2)
.attr("y", height)
.text("Date")
.style("font-size", "20px")
svg.append("text")
.attr("transform", "translate(10, 300) rotate(-90)")
.text("Temperature")
.style("font-size", "20px")
svg
.selectAll('.rect')
.data(data_array)
.join(enter => enter.append("rect"))
.attr("x", d => x_scale(d.x))
.attr("y", d => y_scale(d.y))
.attr('width', 5)
.attr("height", d => y_scale(0) - y_scale(d.y))
.attr('fill', d => d.color)
.attr('opacity', 0.3)
return svg.node();
}
md `I had trouble getting things to position in the exact places, relative to the chart. The math including the margins can be slightly confusing, considering some things can just be rendering but cut off by the frame of the scg element.`
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.
