d3/d3

A JavaScript visualization library for HTML and SVG.

Philippe Rivière

@Fil

@xavierguihot d3/d3-array#113

@una2511 do you mean when you reload the page? this might be possible using localStorage

una2511

@una2511

yes

Can you please guide me to an example where they have done this kind of stuff please.

Philippe Rivière

@Fil

@una2511 https://observablehq.com/d/ed463733efd48775

una2511

@una2511

wow. Thanks a lot. I think this should help me. I shall try to implement in my js file. If I have any clarifications shall ping u please. Thanks once again.

una2511

@una2511

@Fil , One more requirement I have is, local storage what I understand is the persistent data that can be stored in our browser. But finally what I want is can this persistent data that is present in the browser , be pushed to a server . If it is pushed to a server then system admin's can access the latest data and start working from that. Pushing to a server helps multiple people access the latest data instead of storing the data specific in our browsers. Please let me know if this is possible and an implementation example if it is there. Thanks a lot for all your help and guidance.

milo_An

@Adser89

guys Hi ... i was wondering if someone could help me with this question:

https://stackoverflow.com/questions/42475219/shorten-svg-path-arc-by-pixel

i want to make the path connecting my node sorther in order to add an arrowhead ... i tried this but it doesnt work, anyone has a suggestion?

mrp961022

@mrp961022

who can help me,thanks

mrp961022

@mrp961022

problems with using local paths

mrp961022

@mrp961022

Vue + d3.js

fionnlavery

@fionnlavery

Hello, I'm following a lynda tutorial on DC. AFAIK there's some changes in newer versions of D3 which would change some things in this tutorial.

so I got .x(d3.time.scale().domain([minDate,maxDate]));

from the tutorial

which throws an error in the console.

I assumed it should be .x(d3.timeScale().domain([minDate,maxDate]));

but that's not working either

fionnlavery

@fionnlavery

nvm got it, it should have been d3.scaleTime

AnushaputtaUI

@AnushaputtaUI

Hello everyone , I’m trying to convert radial tree from v3 to v4 but I’m having some issues with path and hierarchy

James Saunders

@jamesleesaunders

@AnushaputtaUI any specific detail? Errors? Code?

Zeb Pykosz

@zebapy

I have an array of colors and I want to use one per line automatically. What sort of scale do I need for that?

desired ^

Zeb Pykosz

@zebapy

got it with const colorScale = scaleOrdinal().range(colors); then using index of the data group const color = (d, i) => colorScale(index);

Carlos Amaral

@CarlosAmaral

hello

I need help with Canvas
Basically I just want to switch the axis of the canvas, Y to be on top, X to be on the left but this changes the drawing of the graph all together
I have a fiddle if anyone is able to help, thank you

I'm using chart.js but I think this is solely related with Canvas

una2511

@una2511

Hi all, I need to port this code "https://observablehq.com/d/ed463733efd48775" to the openwisp/django-netjsongraph environment. Has anyone in the group done this before. Because when I port this I am getting some errors. "openwisp/django-netjsongraph" uses force.drag and observablehq uses force.simulation etc. Please let me know if anyone has done this better and how did they port the code. Any suggestions would be welcome.

Tom

@moT01

I'm struggling to get a simple line graph to display.... https://s.codepen.io/moT01/pen/dBwPKL?editors=0110 - anyone want to take a look? I've tried a few things, but I must be missing something.

James Saunders

@jamesleesaunders

@moT01 First observation is console error "Uncaught ReferenceError: y is not defined" I think you this bit is wrong:

const area = d3.area()
    .x(d => x(d.year))
    .y0(y(0))
    .y1(d => y(d.amount));

Should this be:

const area = d3.area()
    .x(d => xScale(d.year))
    .y0(yScale(0))
    .y1(d => yScale(d.amount));

Tom

@moT01

thanks @jamesleesaunders - but it's still not working. I feel like it's something else that I'm missing. I tried a similar syntax with my attempt a the line graph.

Behrang

@behrangsa

Is there a way to convert the 3 call chains in the following example into one call chain:

let data = [
    {
        date: "2019-01-01",
        value: 50.0,
        description: "Lorem"
    },
    {
        date: "2019-01-15",
        value: 150.0,
        description: "Ipsum"
    },
    {
        date: "2019-02-05",
        value: 5.0,
        description: "Dolor"
    }
];

let table = d3.select('body').append('table');

table.append('thead')
        .selectAll('tr')
            .data(data.slice(0, 1))
            .enter()
            .append('tr')
            .selectAll('td')
                .data(d => d3.map(d).keys())
                .enter()
                .append('th')
                    .text(d => d);

let rows = table.append('tbody')
                .selectAll('tr')
                    .data(data)
                    .enter()
                    .append('tr')
                    .selectAll('td')
                        .data(row => d3.map(row).values())
                        .enter()
                        .append('td')
                        .text(d => d);

James Saunders

@jamesleesaunders

Hi all, I am looking for people who would find it useful if D3 had a few more interpolation functions:

d3.interpolateCardinal()
d3.interpolateCatmullRom()
d3.interpolateMonotoneX()
At the moment D3 only has one function interpolateBasis() for generating curves (for example on line or area charts), I have raised a pull request for the additional above but looking for support d3/d3-interpolate#67 if people would find this useful please do express your interest in the comments on the PR.

James Saunders

@jamesleesaunders

Following on from my last comment, if of any use to anyone, I have now released these interpolation functions as a standalone d3 module: https://www.npmjs.com/package/d3-interpolate-curve

David J Ruyle

@djr-taureau

Hi all, could anyone give me any insight into how to accomplish the following: I am trying to create a very specific grid line with specific tick values and tick sizes on an axis. I am trying to accomplish the following alt

and so far this is what I have. No matter what I do, I cannot get the grid line to only appear within the boundary of the chart and not all the away across the axis under the tick values. alt

. Any assistance would be greatly appreciated. Thank you.

Arye Shalev

@pantchox

Hi guys, who ever has a blog or post on Medium stuff that are related to programming, I am working on a new publishing platform, its my side project and i worked reallllly hard on it - I would love for your feedback! if you love publishing and curating content - PLEASE PM ME :)
if my message is not following chat room rules i will delete it! thanks.