md`checking how many companies | [ref](https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript)`
companyList = stockValues.map(item => item.symbol)
.filter((value, index, self) => self.indexOf(value) === index)
processedData = stockValues.map( d => {return {
symbol: d.symbol,
date: new Date(d.date),
price: d.price}})
processedData.filter( d => d.price != undefined)
dataGroup = d3.groups(processedData, d => d.symbol)
xmulti = d3.scaleTime()
.domain(d3.extent(processedData, d => d.date)) // d3.extend returns [min, max]
.range([margin.left, width - margin.right])
ymulti = d3.scaleLinear()
.domain([0, d3.max(processedData, d => d.price)]).nice()
.range([height - margin.bottom, margin.top])
d3.extent(processedData, d => d.date)
ymulti(dataGroup[0][1][0]['price'])
xmulti(dataGroup[0][1][0]['date'])
lineMultiValues = d3.line()
.defined(d => !isNaN(d.date) && !isNaN(d.price))
.x(d => xmulti(d.date))
.y(d => ymulti(d.price))
lineMultiValues(dataGroup[4][1])
dataGroup[0][1]
xmultiAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xmulti).ticks(width / 80).tickSizeOuter(0))
ymultiAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(ymulti))
.call(g => g.select(".domain").remove())
// .call(g => g.select(".tick:last-of-type text").clone()
// .attr("x", 3)
// .attr("text-anchor", "start")
// .attr("font-weight", "bold")
// .text("Total number of cases"))
xmultiAxis2 = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xmulti2).ticks(width / 80).tickSizeOuter(0))
dataGroup
md`### color`
colorScale = d3.scaleOrdinal().range(['blue', 'limegreen', 'black', 'orange', 'red', 'yellow'])
colorScale3 = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10)
checkCompany(parameters)
companyList
legendOrigin = [85, 35];
labelHeight = 12;
d3.min(processedData, d => d.date)
d3.max(processedData, d => d.date)
d3.max(processedData, d => d.date).getFullYear()
d3.max(processedData, d => d.date).getFullYear()
processedData
function checkCompany(p) {
let companies = {
"MSFT" : p.MSFT,
"AMZN": p.AMZN,
"IBM": p.IBM,
"GOOG": p.GOOG,
"AAPL": p.AAPL}
const filteredByValue = Object.fromEntries(Object.entries(companies).filter(([key, value]) => value === true))
// companies.foreach( d => d
return Object.keys(filteredByValue)
}
checkCompany(parameters)
processedData2 = processedData.filter(d => d.date >= new Date(parameters.start) &&
d.date <= new Date(parameters.end))
.filter(d => checkCompany(parameters).includes(d.symbol))
dataGroup2 = d3.groups(processedData2, d => d.symbol)
dataGroup2.filter( d => d[0].includes(checkCompany(parameters)))
xmulti2 = d3.scaleTime()
.domain(d3.extent(processedData2, d => d.date)) // d3.extend returns [min, max]
.range([margin.left, width - margin.right])
ymulti2 = d3.scaleLinear()
.domain([0, d3.max(processedData2, d => d.price)]).nice()
.range([height - margin.bottom, margin.top])
ymultiAxis2 = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(ymulti2))
.call(g => g.select(".domain").remove())
lineMultiValues2 = d3.line()
.defined(d => !isNaN(d.date) && !isNaN(d.price))
.x(d => xmulti2(d.date))
.y(d => ymulti2(d.price))
companyList
colorScale2 = d3.scaleOrdinal()
.domain(companyList)
.range(["blue", "orange", "black", "yellow", "red"]);
multilinechart2 = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style('border', '1px dotted #999');
let legend = svg.selectAll(".legend")
.data(dataGroup2)
.enter();
legend
.append('text')
.text(d => d[0]) // symbol
.attr('x', legendOrigin[0] + labelHeight * 1.2)
.attr('y', (d,i) => legendOrigin[1] + labelHeight * i * 1.2 )
.style('font-family', 'sans-serif')
.style('font-size', `${labelHeight-1}px`);
legend
.append('rect')
.attr('x', legendOrigin[0])
.attr('y', (d,i) => legendOrigin[1] + labelHeight * 1.2 * i - 7)
.attr('width', labelHeight)
.attr('height', labelHeight/2)
.attr('fill', d => colorScale2(d[0]))
.attr('stroke', 'none')
.style('stroke-width', '1.5px');
svg.append("g")
.call(xmultiAxis2);
svg.append("g")
.call(ymultiAxis2);
svg.selectAll('.line')
.data(dataGroup2)
.join('path')
.attr("class", "line")
.attr("d", d => lineMultiValues2(d[1]))
.attr("stroke", d => colorScale2(d))
.style("fill", "none")
.style("stroke-width", 3);
return svg.node();
}
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.
