hi,
- I am trying to include topology.feature but I am not able to display basic map.
- I read through the documentation but not able to figure it out,
https://github.com/topojson/topojson-client/blob/master/README.md#feature - can you please help, right now I am facing below error
- providing my code below
https://stackblitz.com/edit/angular-2rrick?file=src/app/app.component.ts
ERROR
Error: Uncaught (in promise): TypeError: Cannot read property 'countries' of undefined
TypeError: Cannot read property 'countries' of undefined
at eval (src/app/app.component.ts:52:72)
d3.json("https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json")
.then(function (topology) {
// <---- Renamed it from data to topology
console.log("------>", topology.feature);
g.selectAll('path')
.data(t.feature(topology, topology.feature.countries)
.geometries)
.enter()
.append('path')
.attr('d', path);
console.log("ending json calling1");
});
@niniyzni the error states exactly what is wrong, your doing
topology.feature.countries but feature is undefined, thus you cant' get countries from it
@bradtaniguchi hi,
using d3 I got the maps right now I am trying to implement a flight tracking system, can you tell me how to track flights in d3 maps by using mock data
https://stackblitz.com/edit/angular-qyohkv?file=src/app/app.component.ts
example: https://www.flightradar24.com/60,15/6
using d3 I got the maps right now I am trying to implement a flight tracking system, can you tell me how to track flights in d3 maps by using mock data
https://stackblitz.com/edit/angular-qyohkv?file=src/app/app.component.ts
example: https://www.flightradar24.com/60,15/6
hi,
- using d3 I got the basic maps right now I am trying to implement a flight tracking system
- so I am trying to include the airports on my map.
- so I downloaded the airports json from here
http://www.naturalearthdata.com/downloads/10m-cultural-vectors/ - but not sure how to include the airports in my map
- can you guys tell me how to fix it.
- I am trying to implement something similar to this example: https://www.flightradar24.com/60,15/6
https://stackblitz.com/edit/angular-ce7zwy?file=src/app/app.component.ts
ERROR
Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefined
TypeError: Cannot read property 'type' of undefined
d3.json("https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json")
.then(function (airports) {
// <---- Renamed it from data to topology
//console.log("------>", topology.feature);
g.selectAll('path')
.data(t.feature(airports, airports.objects.airports).features)
//.data(t.feature(topology, topology.objects.countries)
// .geometries)
.enter()
.append('path')
.attr("id", function (d) { return d.id; })
.attr('d', path);
console.log("ending json calling1");
});
@niniyzni I tried to debug your stackblitz - the problem that object
airports doesn't have airports.objects.airports propertyairports ------>
{type: "Topology", transform: {…}, objects: {…}, arcs: Array(676)}
{arcs:(676) [Array(13), Array(11), Array(21), Array(9), Array(7), Array(13), Array(25), Array(552), Array(5), Array(16), Array(8), Array(10), Array(9), Array(17), Array(30), Array(36), Array(13), Array(9), Array(8), Array(5), Array(5), Array(7), Array(49), Array(224), Array(6), Array(7), Array(8), Array(7), Array(9), Array(7), Array(10), Array(9), Array(9), Array(7), Array(23), Array(7), Array(11), Array(22), Array(6), Array(9), Array(14), Array(32), Array(36), Array(45), Array(13), Array(35), Array(8), Array(3), Array(12), Array(26), Array(27), Array(10), Array(8), Array(12), Array(9), Array(9), Array(14), Array(6), Array(33), Array(9), Array(11), Array(21), Array(16), Array(10), Array(17), Array(9), Array(5), Array(9), Array(7), Array(42), Array(8), Array(9), Array(6), Array(7), Array(12), Array(6), Array(7), Array(11), Array(11), Array(10), Array(37), Array(7), Array(16), Array(9), Array(8), Array(16), Array(33), Array(11), Array(22), Array(4), Array(9), Array(6), Array(9), Array(44), Array(7), Array(8), Array(7), Array(12), Array(20), Array(20), …]
objects:countries:{type: "GeometryCollection", geometries: Array(177)}
land:{type: "MultiPolygon", arcs: Array(127)}
transform:{scale: Array(2), translate: Array(2)}
__proto__:Object
}
@rh616
if(a>0){
b = a
}else{
b = -a
}
how to write it in Ternary operator?
could anyone help me?
if(a>0){
b = a
}else{
b = -a
}
how to write it in Ternary operator?
could anyone help me?
So, got a question, maybe a bit out of context, but since I am using Vue.js for the frontend, here it goes:
How can I make a user access my website only via a unique link, without the need for a proper authentication? This link should have an expiration date.
Maybe something like a token in the URL? 🤔🤔
@rh616 b = a > 0 ? a : -a
Hello,
I am playing around with a responsive flexbox nav, and a question came to my mind.
There is no way of aligning the image with the red background perfectly with a css command with the navbar easyily?
Is the solution here always fiddling around with the image size manually to get them both to tie in together perfectly, or is the solution to resize the image to a perfect size beforehand and then just insert that?
Here's the pen I'm talking about:´
https://codepen.io/bradley1492/pen/pOQbOb
Edit: Hm now I did it manually by resizing the image but I want to know if there's a smarter way of doing things here?
@bradley1492 have the background of the image be the same as the background of the navbar
@eweiss17 How do you mean that?
like in a photoediter
if the navbar is red
use a paintbucket so the background of the image is also red
so it matches up
I believe also png image files hav a 'invisible' background
ah you have a png file
@eweiss17 oh I think maybe I didn`t formulate the question right, I was thinking about aligning the borders sort of automatically or ssomething not the color.
Like if I have a navbar already, sort of perfectly fit an image into the left area?
With one css command or somethin
Or is it always manually and hacky sort of?
Aligning the picture to the size of navbar
I don`t really care about the colors at the moment
only the borders
my bad so you want the border of the image to match up with the border of the nav bar?
@eweiss17 Exactly but I wondered if there is another way than adjusting the width of the image until it sort of fits, but a computed way?
Or is it always a manual process?
Fitting image borders with navbar borders?
hmmm
can I ask why you want this?
@eweiss17
@eweiss17 Because I am struggling to fit an image into the left side here and I began doubting myself if thiss manual process is the way a professional web developer does this or if there is some command to just fit the image into the left perfectly :D
It seems like a very common thing to do when making a nav
@bradley1492 i'll check out some of my own projects and see what I did
well it appears none of my projects have images in the navbar.... whoulda thunk
on the bootstrap website, their logo is actually an svg image
hm you mean here the "bootstrap" word?
https://getbootstrap.com/docs/3.3/
https://getbootstrap.com/docs/3.3/
I don't know if I should ask this here, but I cant find a general room for Freecodecamp... but: has Freecodecamp been translated other languages? Like in English to Portuguese, NOT Javascript to Ruby or anything like that.
@mrbig033 please ask in the main contributors room at https://gitter.im/FreeCodeCamp/Contributors as this where the FCC Core team and repository contributors are located. Eventually someone will answer you.
thank you, @mstellaluna
@mrbig033 in the meanwhile you can also check out the forums, there maybe a thread on this already. im not sure i don't use the forums. https://forum.freecodecamp.org/
you're welcome.
hi @mstellaluna wheres zirozipzilch and jodylecompte these days?
@mstellaluna it looks there are translations in progress, but nothing concrete. It's hard to search this subject because all the words have particular meaning in the programming namespace.
@Flush7 Sorry i don't know
@mrbig033 yea... someone in the contributor's room will eventually answer you
@mstellaluna cool, thanks again
anytime
@bradley1492 When you take out the
a element of the page flow with position: absolute it has no possibility to align to its environment.
If you set a specific height to the nav,
height: 100% on the image and don't use position: absolute for the a element, it should take the same height as the navbar and adjust the width with width: auto
sorry i stepped away for a bit. I agree though, try to avoid position absolute, if you can
@bradley1492 With
display: flex and justify-content: space-between on the nav you then get the horizontal layout of the navbar
And removing
height: 200px on the ul would adjust the height of the ul to the height of the navbar
Is there a good way to make those two lines near the Front-End Developer text in pic?
@alpox @eweiss17 thx a lot for your wonderful help.
I followed your instructions alpox it looks good but it
https://codepen.io/bradley1492/pen/pOQbOb
I followed your instructions alpox it looks good but it
s torn apart now...
Heres the pen:https://codepen.io/bradley1492/pen/pOQbOb
Why is the image now over the navbar?
nav {
display: flex;
justify-content: space-between;
width: 100%;
}
@Morched23MJ many thanks, now it works, I just can`t see if the image is visually exactly the same height as the nav elements?!
@bradley1492 https://codepen.io/alpox/pen/WgYpMj
The image is bigger, but you can set the height of the navbar to the height of the image?
@alpox that`s exactly what I wanted hahaha, the image needs cropping I think
@Morched23MJ @alpox understanding all that is another thing, flexbox really is more sophisticated than I thought
Yup. I use flexbox everytime I want to set many elements in one row. :D
This is sort of how I intended it to be
https://codepen.io/bradley1492/pen/MqzpPX
https://codepen.io/bradley1492/pen/MqzpPX
@bradley1492 so set the nav to be only as much width as needed?
@eweiss17 How do you mean?
How to achieve making that rectangle around my name? :l any ideas would be appreciated :D
@bradley1492 looks decent now, is that what you wanted?
what i meant is that your main-nav should not have an assigned width, it should just take up as much space as needed, and it seems like you already have that
@eweiss17 jup exactly that's how I wanted it to look.
This is a good starting point for me to work now.
Thanks :)
This is a good starting point for me to work now.
Thanks :)
think you figured it out mostly yourself
jop sort of it follows me since days the issue
Hmm.. ok.. I've got a slight dilemma...
Have you considered ignoring it until somebody complains about it?
I'm on the technical document page project, on it I have a few <pre></pre> tags, these do not appear to listen to the overflow-wrap: break-word; css. I'm assuming it's because the purpose behind <pre> which is to display things exactly. So i'm not sure how best to proceed. It's only an issue when shrinking the width of the page. A little while before it changes to mobile layout, but then again I would imagine if a mobile screen be quite small it may do the same.
this place looks more alive... i like that
:)
the YouCanDoTHis is a freakin cemetery
@AJ-Brommy Try
word-break: break-all; instead of overflow-wrap: break-word; - or use both. Sometimes both are needed depending on the layout.
Ah ok, thanks @mew
@newmoon lol
neither works :( @newmoon
Looks like you'll need
white-space: pre-wrap;
Not supported in IE/Edge unfortunately: https://caniuse.com/#search=pre-wrap
Nice - that's done the trick. I need to learn the difference tho, but thanks :)
doh
it's working ok for me in edge
This works fine too in case you're concerned :)
overflow-x: scroll;