Published
Edited
Aug 18, 2020
1 fork
1 star
md`# Weather Line Plot`
import {dataset} from "@chungmasterflex/weather-line-plot"
d3 = require ("d3")
md` ## Accessor `
yAccessor = d => d.temperatureMax
dateParse = d3.timeParse("%Y-%m-%d")
xAccessor = d => dateParse(d.date)
md `## 1. Bounding Box`
width = 1000
height = 500
margin = ({ top: 20, right: 20, bottom: 20, left: 20})
md `## 2. Data`
json_data = dataset.json()
md `## 3. Create X and Y axes`
// dateParser = d3.timeParse("%Y-%m-%d")
xScale = d3.scaleTime()
.domain(d3.extent(json_data, xAccessor)) //Min to Max - that is extent
.range([margin.left, width - margin.right])
// xScale = d3.scaleTime()
// .domain(d3.extent(json_data, d => d.date)) //Min to Max - that is extent
// .range([margin.left, width - margin.right])
// .domain(d3.extent(json_data, d => d.date))
// yScale = d3.scaleLinear()
// .domain(d3.extent(json_data, d=>d.temperatureMax))
// .range([height - margin.bottom, margin.top])
yScale = d3.scaleLinear()
.domain(d3.extent(json_data, yAccessor))
//.domain([0, d3.max(json_data, (d)=>d.value)]).nice() // Left to the Right
.range([height - margin.bottom, margin.top]) //Bottom to the Top
xAxis = (g) => g
.attr(`transform`, `translate(0, ${height - margin.bottom}`)
.call(d3.axisBottom(xScale))
yAxis = (g) => g
.attr(`transform`, `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale))
md `## Step 4: Define the line function`
// line = d3.line()
// .defined(d => !isNaN(d.temperatureMax))
// .x(d => xScale(dateParser(d.date)))
// .y(d => yScale(d.value))
// line = d3.line()
// .defined(d => !isNaN(d.temperatureMax))
// .x(d => xScale(dateParser(d.date)))
// .y(d => yScale(d.value))
// line = d3.line()
// .defined(d => !isNaN(d.temperatureMax))
// .x(d => xScale(d.date))
// .y(d => yScale(d.value))
// line = d3.line()
// .defined(d => !isNaN(d.value))
// .x(d => xScale(d.date))
// .y(d => yScale(d.value))
// lineGenerator = d3.line()
// .defined(d => !isNaN(d.temperatureHigh))
// .x(d => xScale(d.date))
// .y(d => yScale(d.temperatureHigh))
lineGenerator = d3.line()
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)))
md `## Step 5. Draw the SVG`
{
// const yAccessor = d => d.temperatureMax
// const dateParser = d3.timeParse("%Y-%m-%d")
// const xAccessor = d => dateParser(d.date)
// Create an empty SVG with specified width and height.
const svg = d3.select(DOM.svg(width, height));
// Draw the x and y axes.
svg.append('g').call(xAxis)
svg.append('g').call(yAxis)
// Draw the line.
svg.append('path')
.datum(json_data)
// .attr('d', line);
.attr('d', lineGenerator);
const line = svg.append("path")
.attr("d", lineGenerator(json_data))
.attr("fill", "none")
.attr("stroke", "#553232")
.attr("stroke-width", 5)
return svg.node();
}
html`
<style>
path {
fill: none;
stroke: salmon;
stroke-width: 1;
stroke-linejoin: miter;
stroke-linecap: miter;
}
g {
fill: none;
stroke: salmon;
stroke-width: .1;
stroke-linejoin: miter;
stroke-linecap: miter;
}
</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.
