Let's discuss your "Scatterplot Graph Visualization"

Let's discuss your "Scatterplot Graph Visualization"
0

#1

Greetings, Fellow Campers!

This topic is for listing and review of Scatterplot Graph Visualization projects built as a part of FCC challenges. Please stick to these basic rules to keep the topic clean:-

  • Post your Codepen (or other) link to your project as a general reply to this topic.
  • For Codepen links use the following format to avoid embedding the pen:-
Project Link - [http://codepen.io/santakmishra/full/pgqOYq/](http://codepen.io/santakmishra/full/pgqOYq/)
  • Post reviews as a specific reply to the link which you are reviewing.

#2

Project Link - http://codepen.io/mtroiani/full/ZQgxRP/


#3

Project Link - http://codepen.io/d33con/full/grKLby/


#4

Project Link - https://codepen.io/chrismarro/full/jrOXXk/


#5

Dear FCC camper,
Here is my Scatterplot Graph by d3js.
Poject Link => http://www.aungmyokyaw.com/FCC-D3/ScatterplotGraph/
Source Code => https://github.com/AungMyoKyaw/FCC-D3


#6

Project link: http://codepen.io/neotriz/full/xEPwrx/

Any criticism is welcomed!


#7

Project Link ─ FreeCodeCamp : Visualise Data with a Scatterplot Graph

Built with D3.js v4 & React.js. Feedback is always appreciated. :wink:


#8

Project Link --> https://codepen.io/BrusBilis/full/zKRWyL


#9

Project Link - http://codepen.io/Josh5231/full/vXqYPr/


#10

Project Link - https://codepen.io/cjsheets/full/XjvJWK/

I’m considering adjusting both of my D3 projects to display a placeholder if the screen-size is too small and maybe automatically re-generate the chart on window resize. I imagine solutions for responsive charting exist.

There’s also an issue with the example chart when the window size is narrow enough for the hidden div to overlay chart components. Perhaps either a different method of hiding or adding ‘pointer-events: none;’ to the CSS would fix it.


#11

Project link - http://codepen.io/ubershibs/pen/MbaEKR


#12

Hi, everyone!

I have put together a rudimentary scatter plot and would like to submit it to FCC and move on. But before I do so, any feedback from fellow campers is appreciated.

The CodePen is here

Thanks and happy coding!


#13

Project Link


#14

Hi,

I see that you are using d3 v4 not v3. I am also using v4 and have found one thing that I just can not get working. I can not get the mouseover to add a border to the circle. Every time that I try, the entire circle goes black, even if I try to set the border to some other color (like purple). I ended up just changing the color of the circle, which is what you are also doing. I was wondering if that was because you also had the same problem, or if you just liked the idea of changing the color. I would really like to be able to add a border if anyone reads this and can get it to work in v4.

Your page seems to work well and does what it is supposed to do. I’m not a fan of the white on gray when hovering over a name, however. Not enough contrast. I also find the tooltip moving with the mouse to be a bit distracting.


#15

I am using d3 v4 not v3. I have found one thing that I just can not get working. I can not get the mouseover to add a border to the circle. Every time that I try, the entire circle goes black, even if I try to set the border to some other color (like purple). I ended up just changing the color of the circle, which works just fine. I would really like to be able to add a border if anyone reads this and can get it to work in v4.

My project is on GitHub at:
https://marcnshapiro.github.io/vis_scatter/index.html

Thanks for any help, or comments.


#16

Thanks for the feedback. As for the problem you mentioned, check my chart out again - I’ve added an outline to the circle when you mouseover, by giving the class (.mouseover) a stroke (black) and a stroke-width (2) property. The same should work for you, I’d think.


#17

Thanks. It’s working now. I had tried changing classes to start with, but it had not worked. I’m pretty sure that my problem was that it is not a good idea to mix up jQuery objects and D3 objects and their respective CSS. Using “background-color” and “border” instead of “fill”, “stroke” and “stroke-weight” on a D3 object just does not work well.


#18

Yeah, I encountered a bit of that as well. I never really bothered with any of the svg or canvas stuff before getting into D3, so I’m just getting familiar with the different vocabulary they use. It’s finally starting to make a bit of sense to me, but it has been fairly tough to wrap my head around.


#19

Mine

Btw, I found that in order to have an accurate y-scale, you can set the domain to:

y.domain([d3.max(data, (d) => d.Place), 1]);

d3 will leave off the top tick from your scale, but you can add it in manually like this:

const yTicks = y.ticks();
yTicks.unshift(1);

then just add it to your axis with the tickValues() method:

chart.append('g')
  .call(d3.axisLeft(y).tickValues(yTicks));

#20

Scatterplot Graph => is here