Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    DexfreightDevelopers
    @DexfreightDevelopers
    Anyone has any idea why is Token not defined?
    alefuedev
    @alefuedev
    Hi there can someone help me with a barchart I'm totaly new on d3
    Tom
    @moT01
    figure it out @alefuedev?
    IssaMousssa
    @IssaMousssa
    how do I reload the csv file every minute
    Eclogesh
    @Eclogesh
    is it possible to add vertical scroll bar in d3js v4
    Eclogesh
    @Eclogesh
    how to remove the tick marjs in d3 v4
    is there any example available
    Eclogesh
    @Eclogesh
    i got it
    Eclogesh
    @Eclogesh
    image.png

    i have created the grouped x axis in d3 v4 as below but the problem is 1. year is not getting grouped correctly on the Quarter. 2. First and last shows empty box. 3. i dx and dy to be dynamic ( Right now i have hardcoded to get the visual x axis. couldnt share the complete so copy pasted part of x axis. var margin = {
    top: 10,
    right: 10,
    bottom: 50,
    left: 30
    },
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

    var svg = d3.selectAll("#" + cid)
    .append("div")
    .attr("id", "chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", "svg")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.selectAll("#" + cid)
    .append("div")
    .attr("id", "tag");

    var x = d3.scaleTime()
    .domain([d3.min(taskArray, function (d) {
    return dateFormat(d.startTime);
    }),
    d3.max(taskArray, function (d) {
    return dateFormat(d.endTime);
    })
    ])
    .range([0, width - margin.right]);

    //X Axis
    var monthformat = d3.timeFormat("%B");
    var yearformat = d3.timeFormat("%Y");

    //Get the Quarter
    var quarter = function (date, i) {
    if (i > 0) {

        var date = new Date();
        date2.setMonth(date.getMonth() - 1);
        q = Math.ceil((date2.getMonth()) / 3);
        return "Q" + q;
    }

    };

    var xAxis = d3.axisBottom(x)
    .ticks(d3.timeYear, 1)
    .tickSize(19, 0)
    .tickPadding(-15)
    .tickFormat(yearformat);

    var xAxis1 = d3.axisBottom(x)
    .ticks(d3.timeMonth, 3)
    .tickSize(18, 0)
    .tickPadding(-15)
    .tickFormat(function (x) {
    var milli = (x.getTime() - 10000);
    var vanilli = new Date(milli);
    var mon = vanilli.getMonth();
    var yr = vanilli.getFullYear();

        if (mon <= 2) {
            return "Q1 ";
        } else if (mon <= 5) {
            return "Q2 ";
        } else if (mon <= 8) {
            return "Q3 ";
        } else {
            return "Q4 ";
        }
    });

    svg.append("g")
    .attr("class", "xAxis") //Assign "axis" class
    .attr('transform', 'translate(' + theSidePad + ', ' + ((h - 80), 10) + ')')

    //.attr("transform", "translate(0," + h + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "middle")
    .attr("fill", "#000")
    .attr("stroke", "none")
    .attr("font-size", 10)
    .attr("dy", "1em")
    .attr("dx", "6.5em");

    svg.append("g")
    .attr("class", "xAxis1") //Assign "axis" class
    .attr('transform', 'translate(' + theSidePad + ', ' + ((h - 80), 29) + ')')
    .call(xAxis1)
    .selectAll("text")
    .style("text-anchor", "middle")
    .attr("fill", "#000")
    .attr("stroke", "none")
    .attr("font-size", 10)
    .attr("dy", "1em")
    .attr("dx", ".99em"); Any suggestions would really help

    Manuele Dones
    @manueledones
    Hi guys, how's it going? I've a chart with a custom ZoomTransform (e.g k=0.12, x=16, y=0) and I change the y-scale from a range of 0-100 to 80-200 , if I then drag the chart, the y-scale goes back to the original one, because it's forcing the previous ZoomTransform
    is it possible to keep the newest y-scale range (80-200) and perform the drag(and zoom) without changing the scale? is it clear?
    like if the chart would have initialize with y-scale of 80-200
    Tom
    @moT01
    If you guys share a demo of your projects, someone might take a look.
    adrianolionetti
    @adrianolionetti
    Hi There
    Anyone can help me?
    I've built a stacked bar chart with line in Qlik Sense Desktop, and I would like to make the legend filterable
    Philippe Rivière
    @Fil
    I think there is much more support on the D3 community's slack (though I know not everyone enjoys Slack)
    adrianolionetti
    @adrianolionetti
    ok thanks, I'll try there
    Philippe Rivière
    @Fil
    I would try & help you here if I knew anything about Qlik :-/
    adrianolionetti
    @adrianolionetti
    ok thanks
    An other question..

    I have this code for the legend:

    legend = dim1.selectAll(".legend")
    .data(function(d) { return d.values.slice().reverse(); })
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(-30," + i * 20 + ")"; })

    This append to all my "g" the rect and the text of my legend..so I have x times the legend duplicate
    But I want it just in the first "g"
    adrianolionetti
    @adrianolionetti
    image.png
    If you see my DOM, the legend (with "rect" and "text") is replicated in each tag "g" with class ".g"
    Philippe Rivière
    @Fil
    I can only guess, because you don't share the whole code
    but maybe you should write:
    legend = dim1.selectAll(".legend")
    .append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(-30," + i * 20 + ")"; })
    (if dim1 is already bound to the data)
    adrianolionetti
    @adrianolionetti
    I share you the whole code
    Prakash Kumar
    @ThePrakashKumar
    <body>
      <script>
        const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
        d3.select("body").selectAll("h2")
          .data(dataset)
          .enter()
          .append("h2")
          .text((d) => d);
      </script>
    </body>
    What d represents here it is whole array or a single element at that time?
    Rhitik Bhatt
    @lambainsaan

    Hey need some help with making a cycle chart. I want to create a cycle chart like this[1], but with multiple y axes. My code is there on [2]. It only shows the first y axis, but not the second one. Sorry it is a bit messed up.

    [1] http://bl.ocks.org/godds/6132680
    [2] https://paste.fedoraproject.org/paste/lg1ttR6ZzjHE~bh637NR6w

    rennie
    @renjiie
    Hi need some inputs for my treemap chart with d3 and react. I made most of it working . Need to add breadcrumb for each hierarchy onclick . Find my code in the sandbox in this stackoverflow post . https://stackoverflow.com/q/58156027/9567578
    rennie
    @renjiie
    anyone here who can give it a try ?
    IssaMousssa
    @IssaMousssa
    handleMap(jour: string, heure: Date) {
        let prev = null;
        const codeRegion = this.files.getRegionParDefaut()[0];
        const nomRegion = this.files.getRegionParDefaut()[1] ;
        const donneesJour = this.consommationParHeure(jour, heure) ;
        const div = this.initTooltip();
        if (prev == null) {
          d3.select('#d' + codeRegion).style('stroke-width', '3px');
          this.donnees = this.files.getChartData(jour, nomRegion );
        }
        donneesJour.forEach((e, i) => {
          const quantile = this.getQuantile();
          d3.select('#d' + e.CodeRegion)
                        // tslint:disable-next-line: only-arrow-functions
                        .attr('class', function(d) { return 'region q' + quantile(+e.consommation / 1000000) + '-9'; })
                        // tslint:disable-next-line: only-arrow-functions
                        .on('mouseover', function(d) {
                                div.transition()
                                     .duration(200)
                                     .style('opacity', .9);
    
                                div.html('<b>Région : </b>' + e.Region + '<br>'
                            + '<b>Consommation : </b>' + e.consommation / 1000000 + '<br>'
                            + '<b>Heure : </b>' + e.Heure + '<br>')
                                .style('left', (d3.event.pageX  - 100) + 'px')
                                .style('top', (d3.event.pageY - 100) + 'px');
                        })
                        // tslint:disable-next-line: only-arrow-functions
                        .on('mouseout', function(d) {
                          div.style('opacity', 0);
                          div.html('')
                                    .style('left', '-500px')
                                    .style('top', '-500px');
                        })
                        // tslint:disable-next-line: only-arrow-functions
                        .on('click', function(d) {
                          if (prev != null) {
                                d3.select(this).style('stroke-width', '3px');
                                d3.select(prev).style('stroke-width', '');
                                prev = this;
                            } else {
                                d3.select(this).style('stroke-width', '3px');
                                d3.select('#d' + codeRegion).style('stroke-width', '');
                                prev = this;
                            }
                        });
        });
      }
    this function is into a class. When I call thisit give me a HTML element. How do I call a service ? I use angular with d3js.
    Francisco Palomares
    @iPhaco96
    Hi, I have a custom map and points with coords. How to save in backend if screen can be different in devices. How should I world?
    Percentage ?
    Si
    @Tatamethues
    image.png
    Hello guys, I'm using timescale to generate the axis. The data is from Monday to Friday. However, there are gaps on the graph between each week.
    Nazar
    @IsaakNazar
    hey everybody, new to D3 world
    Phillipp Ohlandt
    @PhillippOhlandt
    hey, anyone here who can help me with a line graph?

    normally, one would generate the SVG parts using the d3 specific methods, like so:

     g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "#9500ff")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 2)
        .attr("d", line);

    but we use vuejs to render the svg elements.
    i tried this

    path(fill="none" stroke="#9500ff" stroke-linejoin="round" stroke-linecap="round" :stroke-width="2" :d="line(chartData)")

    the problem is with the actual data. the line variable is the same in both versions but the "d3 way" uses the .datum(data) function to assign the actual data. i tried to get around that by passing my data directly to the line variable which is in fact just a function. but it generates d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN" and i dont know why.

    Nazar
    @IsaakNazar
    @PhillippOhlandt what about data() instead of datum()?
    Phillipp Ohlandt
    @PhillippOhlandt
    @IsaakNazar where should I call the data function on? line().data(data) instead of line(data)?
    rennie
    @renjiie

    Im using d3.js treemap layout . In the treemap , on clicking the parent segment with the children property it transitions into its respective child sub segments . But on clicking the last child without any children property it wont make the transition happens to fill only that child node in the entire layout . In the code that im working on I can redirect to a new window on click of the last child but not sure how to make the transition happening .

    Find my code in the link https://codesandbox.io/s/affectionate-thunder-l024x
    I need to click the last child and on clicking the last child should fill the layout with the respective breadcrumb like in the code.

    Arye Shalev
    @pantchox
    would love to get a crash course on d3, can you guys recommand me your best resource that are quick smart and informative
    thanks!
    Naresh4847
    @Naresh4847
    hello @all anybody have reference of world datamap ?
    Mark Hughes (happybeing)
    @theWebalyst
    Some experiments with Sveltejs: I have made three different implementations of the D3 Force Directed Graph example in Sveltejs. One uses SVG elements, another uses Canvas with D3 hit detection and the third uses Canvas with hit detection via a second context with colours based on node index. The github repo includes links to a REPL for each: https://github.com/theWebalyst/d3-fdg-svelte