D3 Path
{
const target = html `<svg viewBox= "0 0 ${width} ${height}" <path stroke="black" fill="none" d="M0 L200 100 L200 0 Q 300 100 400 0"></svg>`
const svg_sel= d3.select(target);
svg_sel.append("circle")
.attr("cx", 40)
.attr("cy", 30)
.attr("r", 5);
// using the GENERATED data from d3=> LINE
svg_sel.append("path")
.attr("d", generated)
.attr("stroke", "black")
.attr("fill", "none")
return target;
}
svg_chart={
// const svg= html`<svg viewBox="0 0 ${width} ${height}"/></svg>`
// const svg_sel= d3.select("target");
const svg= d3.create("svg")
.attr("viewBox", [0, 0 , width, height]);
// GROUPING
const grouping = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// AXIS
grouping.append("g").call( d3.axisBottom(x))
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`);
grouping.append("g").call(d3.axisLeft(y));
// PLOT the data points
grouping.selectAll(".point")
.data(data_stocks)
.join("circle")
.attr("class", "point")
.attr("cx", d => x(d["date"]))
.attr("cy", d => y(d["price"]))
.attr("r", 2)
.attr("fill", d => color( d["symbol"]));
/// LINE CHART
grouping.selectAll(".line")
.data(grouped_data)
.join("path")
.attr("class", "line")
.attr("d", group => line_2( group[1]))
.style("fill", "none")
.style("stroke", group => color(group[0]));
// return svg_sel.node();
return svg.node();
}
grouped_data= d3.groups( data_stocks, d => d["symbol"])
line_2= d3.line()
.x( d => x(d["date"]))
.y( d => y(d["price"]))
//MARGIN
margin= ({ left: 50, top: 20, right: 20, bottom: 20})
color= d3.scaleOrdinal(d3.schemeSet1)
x= d3.scaleTime()
.domain( d3.extent( data_stocks, d => d["date"]))
.range([0, width - margin.left -margin.right])
y= d3.scaleLinear()
.domain( d3.extent( data_stocks, d=> d["price"]))
.range([height - margin.top -margin.bottom, 0])
fmt= d3.timeParse( "%b %d %Y")
data_stocks= ( await vega_data["stocks.csv"]()).map(
d => (( d.date= fmt(d.date)), d)
)
vega_data= require("vega-datasets@2")
// same as above path
generated= line([[0,0], [100, 100], [200, 0]])
line= d3.line()
d3= require("d3@6")
height= 350
import { swatches } from "@d3/color-legend"
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.
