md`# Weather Line Plot With Custom Links`
import {dataset} from "@chungmasterflex/weather-line-plot"
import {select} from "@jashkenas/inputs"
import {color} from "@jashkenas/inputs"
d3 = require ("d3")
md` ## Accessor `
data_fetched_columns = ["temperatureMax", "temperatureMin", "how"]
viewof filter_on_column = html`
<select>
<option></option>
${data_fetched_columns.map(col=>
{return `<option>${col}</option>`})}
</select>`
yAccessor = d => d.temperatureMin
// yAccessor = d => d.temperatureMax
// if filter_on_column === "temperatureMax"
// {
// yAccessor = d => d.temperatureMax
// }
// else
// {
// yAccessor = d => d.temperatureMin
// }
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`
viewof graph_color = color('#88a1d8')
import {slider} from "@jashkenas/inputs"
viewof line_size_slider = slider({
min: 0,
max: 25,
step: 1,
value: 10,
title: "Integers",
description: "Integers from zero through 100"
})
viewof a4 = slider({
min: 0,
max: 10,
// precision: 3,
description: "A high precision slider example"
})
{
// 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", "purple")
.attr("stroke", graph_color)
// .attr("stroke-width", 5)
.attr("stroke-width", line_size_slider)
.attr("stroke-width", a4)
return svg.node();
}
html`
<style>
path {
fill: none;
stroke-linejoin: miter;
stroke-linecap: miter;
}
g {
fill: none;
stroke: salmon;
stroke-width: .1;
stroke-linejoin: miter;
stroke-linecap: miter;
}
</style>`
// stroke: purple;
stroke-width: 1;
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.
