d3 symbols generation for different columns

Issue

This Content is from Stack Overflow. Question asked by Mohamed Gamal Hamed

I have a csv that has the following structure:

dateAB
‘2022-01-02’120150
‘2022-01-03’160170

Now, I am trying to build a symbol chart that has the x value as the date and the y value as the value of either A or B.

I would like to have the symbols in A to have the same colors as each other, and group B as well.

The problem is whenever I use my code to do this it gives me only 2 symbols instead of 4. i.e. it gives me one symbol per column not per data point. Also I am not sure how to force all points in the same column to be the same color?

I am using d3 v5

This is my code

var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const timeConv = d3.timeParse("%Y-%m-%d");
const dataset = d3.csv("xxx.csv");
        
    dataset.then(function(data) {
    var slices = data.columns.slice(1).map(function(id) {
        return {
            id: id,
            values: data.map(function(d){
                return {
                    date: timeConv(d.date),
                    measurement: +d[id]
                };
            })
        };
    });
var svg2 = d3.select("body").append("svg")
     .attr("width", (width + margin.left + margin.right))
     .attr("height", (height + margin.top + margin.bottom))
     .attr("transform", "translate(" + margin.left/4 + "," + margin.top/4 + ")"); 

// scales
    const xScale = d3.scaleTime().range([0,width]);
        
    const yScale = d3.scaleLinear().rangeRound([height, 0]);
        
    xScale.domain(d3.extent(data, function(d){
        return timeConv(d.date)}));
        
    yScale.domain([(0), d3.max(slices1, function(c) {
        return d3.max(c.values, function(d) {
            return d.measurement; });
            })
            ]);
      
    // axis
    const yaxis = d3.axisLeft()
    .ticks(9)
    .scale(yScale);

    const xaxis = d3.axisBottom()
    .ticks(d3.timeMonth.every(3))
    .tickFormat(d3.timeFormat('%b %y'))
    .scale(xScale);

var slices2 = slices.filter(slice => RegExp('someRegex').test(slice.id))         
       //console.log(xScale(timeConv(new Date(d.value.date))))
  const symbol = d3.symbol().size(500)
  
  const symbols = svg2_2.append('g').attr('id','symbols').selectAll("symbols")
    .data(slices2)
    .enter()

symbols.append("path").attr("d",  symbol)



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?