What are /r/d3js' favorite Products & Services?

From 3.5 billion Reddit comments

This is a simple mistake as are all bugs that take days to find :). You are currently trying to selectAll("rect") in your update function when it should be select("rect"). This matters because the selectAll call will create a new grouping and therefore your databinding will be messed up whereas the select will carry over the existing databinding.

The way I confirmed this (for future reference) was by printing out what grouping the update function returned for the update.selectAll("rect") and comparing that against the data being passed in. They didn't match originally which led me to remember the select vs selectAll difference.

Here is an updated link to your example with it working. Hope that helps!

Unfortunately z-index isn't supported for SVG elements. You'll need to make sure that the line is always drawn before the circle.

Even though I've used D3 quite a bit before, I recently did this free course on Udacity. It helped me deepen my understanding of D3 and also has a lot of useful info on how to tackle a visualization project in general from start to end.

Regarding a project idea, I think you should pick a topic you're interested in and think about a story you could tell about that topic. Then look for some data, you don't need to work with a huge dataset to create something interesting.

You can find a lot of D3 related projects on GitHub, I guess many of them are open to contributions. But again, first think of what you find interesting. Should make it easier to find something.

there's a problem with the encoding of the é character. If You save your .csv file with encoding UNICODE- UTF-8 your problem should disappear. Using the Mike example: http://plnkr.co/edit/XBjL6P Hope it helps!

If you are doing it on a website, where users can "export" d3 visualization to a social media service, then you'd roughly want to do something like the following:

1. Get the state of the visualization
2. Send the state of the visualization to the server
3. Have the server generate an imagine from the svg + d3 + data
4. Have the image uploaded to a url that is reachable
5. Have the social media post reference this URL so that when the social media post is viewed on the service it was posted, the image will show up
6. Have the link to your website in the social media post (that is not the image) recreate the state that the visualization had when the user clicked on the "share visualization button". This way another user can click on this link and get taken to your website so they will see the same thing the image had.

Here's a discussion of something to that effect on the D3 mailing list => https://groups.google.com/forum/#!topic/d3-js/qQN1yb6XQcI

I am following Hive Plot implementation by Mike Bostock : https://codepen.io/kevzhu/pen/LWeEKO

Below is the part of javascript where axis lengths and angles are specified.

var innerRadius = 50, outerRadius = 200, majorAngle = 2 * Math.PI / 3, minorAngle = 1 * Math.PI / 12;

var angle = d3.scale.ordinal()

.domain(["source", "source-target", "target-source", "target"])

.range([0, majorAngle - minorAngle, majorAngle + minorAngle, 2 * majorAngle]);

svg.selectAll(".axis")

.data(nodesByType)

.enter().append("line")

.attr("class", "axis")

.attr("transform", function(d) { return "rotate(" + degrees(angle(d.key)) + ")"; })

.attr("x1", radius(-2))

.attr("x2", function(d) { return radius(d.count + 2); });

I added the following lines of code in my implementation.

var angleLabel = d3.svg.axis().scale(angle);

svg.append("g").attr("class","axis").call(angleLabel);

The present code displays the four labels (source,source-target,target-source,target) overlapping each other in the middle of the plot.

My question : How to position labels next to respective axis in a hive plot ?

Here you go: http://plnkr.co/edit/tblbOoGUdXUPfDROisyP?p=preview

Couple of things to keep in mind:

1) Your events (like 'mouseover') need to be on the appropriate element in the DOM. You had that event bound to the g-element representing the entire chart area which was why the entire thing became half opaque. I moved it to the 'rect' element that represented the bars.

2) You had the right idea with the tooltip as far as needing the data to be passed in. Unfortunately you removed the necessary to determine top medalist per bar, so I added that back in (line 80).

Hope that helps!

You could try something like this adding some extra intermediate points in the connector or trying different line types to make the connector look smoother.

Hey,

i've had the same problem. Adding the type="text/javasript" where you load d3 fixed it for me:

<script type="text/javasript" src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script>

Hope this helps.

Hello! Thank you for the quick reply, I am following a tutorial step by step (Found here). They seem to be doing the same thing as me and are receiving the data just fine. I am using a local file if that matters. Data is in the same format as theirs, and JSON validator was ran on data and it says its good. Any further explanation on this? I would appreciate it

I've gotten it to a much better place thanks to your help. It turns out that timestamps in the original were being destroyed after going through the render function, so I moved the d3.timeParse() out of the function and it mostly works now! However, the line is being drawn twice. Any thoughts on how to fix that?

Hi

try removing the second parameter to the call in line 44 of d3f.js.
Then the initial zoom is preserved....

https://codesandbox.io/s/pensive-mendel-we6ik

Not sure if you need it for work and can convince them to pay, but one of the best introductions is done by Ben Clinkinbeard on Egghead.io https://egghead.io/courses/build-interactive-javascript-charts-with-d3-v4

It appears to use WebGL, which is only supported for 63% (of which 22 percent points only partly) of the world's web users. I'm not interested in using anything in a production environment unless it works for 95% or more of the users. It would be a different story if it failed gracefully, but this looks more like failing ugly to me.

http://caniuse.com/#search=webgl

I think storing is relatively easy, there are dozen of solutions including free ones (Github.io, Glitch.com, etc). What I would start to worry though is how nicely would the resulting experience be for the user in term of :

• loading time
• processing power required
• visual comprehensibility

If locally it's not already very pleasant then you might have to reconsider the dataviz. Probably parsing already the data and having a resulting visualization that is already useful. Eventually if the user wants to dig deeper you would then load the relevant part.

Try this:

&#x200B;

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>D3: Loading data from a CSV file</title>
                <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        </head>
        <body>
                <script type="text/javascript">

                        d3.csv("food.csv", function(data) {
                                console.log(data);
                        });

                </script>
        </body>
</html>

Here's what I have now

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Loading data from a CSV file</title> <script type="text/javasript" src="https://d3js.org/d3.v4.min.js"> d3.csv("food.csv", function(data) { console.log(data); }); </script>
</head> <body> </body> </html>

Nothing appears in the console now, although no errors are thrown

Thank you for your patience, I've learned a lot just from talking with you. I ended up defining the header statically in HTML and for whatever reason that seems to work. If you're interested the code looks something like this now:

<body> <div id="listdiv"> <table id="table"> <thead> <tr id="listhead"> <th>Head 1</td> <th>Head 2</td> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> <th>Head 6</th> </tr> </thead> </table> </div>

<script src="https://d3js.org/d3-dsv.v1.min.js"> </script> <script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script>

<script type="text/javascript"charset="utf-8"> d3.text("data.csv", function(data) { var parsedCSV = d3.csvParseRows(data);

var container = d3.select("#table")

.selectAll("tr") .data(parsedCSV).enter() .append("tr")

.selectAll("td") .data(function(d) { return d; }).enter() .append("td") .text(function(d) { return d; }); }); </script> </body>

I don't why, but for whatever reason it works (or at least it looks like it works).

If you just want to work with React and the original D3 I recommend pointing D3 towards React elements by using the refs https://reactjs.org/docs/refs-and-the-dom.html

If you want to make your life easier take a look at a really thought out and perfectly working library called http://recharts.org/

Of course that will only work with their supported chart types so if you wanna tinker with more detailed stuff you have to go the first way. Usually you would then put the d3 rendering in a method in a ES6 React class and instead of telling d3.select a DOM Element you would give it the ref, see documentation.

Ok I totally see that I forgot .enter() u/elktamer but even with that change the data or css is not being picked up

I dont understand why that would be - i could put the phone name into the html with .text() but for now it should be just fine

and still would not interfere with the css right ?

https://codepen.io/gebrutommy/pen/OgXPgO

D3 has quite a few functions to do this kind of thing: https://devdocs.io/d3~6/#arrays-d3-array

But also keep in mind that you can do a bunch of custom operations easily using JS too: https://www.d3-graph-gallery.com/graph/basic_datamanipulation.html#math

Have you considered using a different library, say fullcalander since it looks like that might be more appropriate to what you're trying to achieve.

A demo of FullCalendar timeline view, https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/simple.html