Hi everyone,
I’m trying to build my scatterplot following the examples that we did in the D3 section but I’m getting this:
I’ve been tinkering with values and stuff but basically:
I can’t get the axis to match their (0,0) point, they’re just floating around
I can’t get the circles to spread the way they should limiting themselves to the SVG container
I can’t get the ticks to how the data they should (it’s giving me either 0s or what looks like placeholder values? Not sure)
Could someone please have a look and tell me what I’m doing wrong?
Thanks!!
1, maybe you don’t like the solution like me, but .attr('transform', 'translate(30, 430)'); and is better take that as padding variable var padding=30 .attr('transform', 'translate(padding, 460-padding)');
I am sure the solutions is not d*i that make the bang in graph I is 1,2.3,4,5,6 and you have there only one side Y positions. That is problem the dataset must contains both.
.attr("cx", (d, i) =>
scalex(d.Year))
.attr("cy", (d, i) => scaley(d.Time))
The way you change time I don’t understand, so I only show the other way
# d3-time-format
This module provides a JavaScript implementation of the venerable [strptime](http://pubs.opengroup.org/onlinepubs/009695399/functions/strptime.html) and [strftime](http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html) functions from the C standard library, and can be used to parse or format [dates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) in a variety of locale-specific representations. To format a date, create a [formatter](#locale_format) from a specifier (a string with the desired format *directives*, indicated by `%`); then pass a date to the formatter, which returns a string. For example, to convert the current date to a human-readable string:
```js
var formatTime = d3.timeFormat("%B %d, %Y");
formatTime(new Date); // "June 30, 2015"
```
Likewise, to convert a string back to a date, create a [parser](#locale_parse):
```js
var parseTime = d3.timeParse("%B %d, %Y");
parseTime("June 30, 2015"); // Tue Jun 30 2015 00:00:00 GMT-0700 (PDT)
```
You can implement more elaborate conditional time formats, too. For example, here’s a [multi-scale time format](http://bl.ocks.org/mbostock/4149176) using [time intervals](https://github.com/d3/d3-time):
```js
var formatMillisecond = d3.timeFormat(".%L"),
show original
Yeah that take time also to me to find right manualhttp://www.tutorialsteacher.com/d3js/axes-in-d3 https://github.com/d3/d3-axis
Great resources thank you!!
I applied your suggested changes but my chart still looks exactly the same.
It’s weird, not sure what I’m doing wrong.
Thanks anyway!
.attr('transform', 'translate(padding, 460, padding)');
of Course
.attr('transform', 'translate('+padding+', 460'+- padding')');
I did that! maybe you visited before I saved changes
ah I to fast
const date = data.map(function(item) {
return item.Year;
})
const time = data.map(function(item){
return item.Time;
})
const timeNumVal = data.map(function(item){
return item.Time.replace(':', '.');
}).map(function (item){
return parseFloat(item);
})
const date = data.map(function(item) {
return item.Year;
})
like this
data.forEach(function (d) {
d.Year = parseDate(d.Year);
d.Time = parseTime(d.Time); or your d.Time = d.Time.replace(':', '.');
}).map(function (item){
return parseFloat(item);})
});
and
.data(timeNumVal)
change to
.data(data)
and also this
Doesn’t work either
I am blind you have date instead data, please create var data=[]
I think its’s done now but svg is not even showing. I guess I need a step-by-step tutorial and start it all over again.
It’s because that also affected the domain
Yeah, I figured. I’ll just look for a youtube tutorial and do it again from scratch following someone’s example.
good luck I am here one hour
I look you changed parseDate to date.parsevar parseDate = d3.timeParse("%Y");
And I look the JSON the data is just year like 1995.
I switched it back to what I had before.