These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Sep 2018
niniyzni
@niniyzni
Sep 17 2018 01:13
I am trying to learn angular and d3.
I included my d3 code inside the angular component.
but I am getting below error so I included constructor but still its not working.
can you tell me how to fix it.so that in future I can fix it myself.
https://stackblitz.com/edit/angular-fpdbc1?file=src/app/app.component.ts

Unexpected token. A constructor, method, accessor, or property was expected.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'd3';

  constructor(private userService: UserService) { }


 // private d3:any;

  //   d3.select("body").append("p").text("Hello World");


 // d3.select("body").append("p").text("test 2 Hello World");

      var width = 900;
var height = 600;

var projection = d3.geo.mercator();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
var path = d3.geo.path()
  .projection(projection);
var g = svg.append("g");

d3.json("https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json", function (error, topology) {
  g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries)
      .geometries)
    .enter()
    .append("path")
    .attr("d", path)
});

}
Corey Lewis
@cursiv3
Sep 17 2018 04:31
@sabin20 you'll want to read up on protected routes
Dmytro Holysh
@dmk1111
Sep 17 2018 11:10
@niniyzni put your logic inside of public ngOnInit() method
@niniyzni like this:
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public name: string = 'd3';

    constructor(private userService: UserService) {
    }

    public ngOnInit(): void {
        let width = 900;
        let height = 600;

        let projection = d3.geo.mercator();

        let svg = d3.select('body').append('svg')
            .attr('width', width)
            .attr('height', height);
        let path = d3.geo.path()
            .projection(projection);
        let  g = svg.append('g');

        d3.json('https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json', function(error, topology) {
            g.selectAll('path')
                .data(topojson.object(topology, topology.objects.countries)
                    .geometries)
                .enter()
                .append('path')
                .attr('d', path);
        });
    }
}
@niniyzni plus you need to import d3 as well
Christopher
@bradley1492
Sep 17 2018 15:41
Hello people,
I am just playing around with a forked pen on codepen, but somehow I am quite stuck with a relative simple problem.
Why is the media query I've added not working here?
Here's the pen:
https://codepen.io/bradley1492/pen/KxGaWz
Christopher McCormack
@cmccormack
Sep 17 2018 15:44
@bradley1492 kill that semicolon in your min-width
Christopher
@bradley1492
Sep 17 2018 15:45
@cmccormack hhahaha omg what an error :) manyyy thanks, that would have taken me aaaages to find out myself
Christopher McCormack
@cmccormack
Sep 17 2018 15:45
@bradley1492 np :)
niniyzni
@niniyzni
Sep 17 2018 17:03
  • I am trying to learn angular and d3.
  • I included my d3 code inside the angular component.
  • but I am not able to see the maps inside the angular component and I dont see any errors in the console
  • so I debugged the code if put the console inside the json method its not printing
  • but if I put outside its printing.
  • can you tell me how to fix it.
  • providing my code snippet below.
https://stackblitz.com/edit/angular-haeecr?file=src/app/app.component.ts


    d3.json('https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json', function (error, topology) {
            console.log("staring json calling1");

      g.selectAll('path')
        .data(t.object(topology, topology.objects.countries)

          //.data(topojson.object(topology, topology.objects.countries)
          .geometries)
        .enter()
        .append('path')
        .attr('d', path);
      console.log("ending json calling1");
    });
  }
}


`
Brad
@bradtaniguchi
Sep 17 2018 17:17
@niniyzni what kind of indentation is that?
also in the stackblitz provided I was able to see the ending json call
niniyzni
@niniyzni
Sep 17 2018 18:48
@bradtaniguchi hey can you update in stackblitz its so confusing :(
Brad
@bradtaniguchi
Sep 17 2018 18:53
@niniyzni run the code thru a formatter....
niniyzni
@niniyzni
Sep 17 2018 19:00
@bradtaniguchi hey in stackblitz there is a formatter with that also I formatted the code but still lts not working https://stackblitz.com/edit/angular-azunnu?file=src/app/app.component.ts
Brad
@bradtaniguchi
Sep 17 2018 19:00
never said formatting your code would make it work
niniyzni
@niniyzni
Sep 17 2018 19:02
@bradtaniguchi can you please help...even I debugged but not sure whats the problem
Brad
@bradtaniguchi
Sep 17 2018 19:02
@niniyzni it works for me, so idk
niniyzni
@niniyzni
Sep 17 2018 19:03
@bradtaniguchi you are able to see the map in the browser?
niniyzni
@niniyzni
Sep 17 2018 19:11
@bradtaniguchi hey I updated but i am getting another error ERROR
Error: Uncaught (in promise): ReferenceError: topology is not defined
ReferenceError: topology is not defined
at eval (src/app/app.component.ts:53:44)
Brad
@bradtaniguchi
Sep 17 2018 19:12
@niniyzni sounds like you didnt read the docs, and this is a pretty basic JS error. I think you can figure it out
niniyzni
@niniyzni
Sep 17 2018 19:21
@bradtaniguchi hey I updated but still I dont see maps any idea ? https://stackblitz.com/edit/angular-uzsryf?file=src/app/app.component.ts
Brad
@bradtaniguchi
Sep 17 2018 19:22
@niniyzni grind against the issue more, its been like 10 mins
niniyzni
@niniyzni
Sep 17 2018 19:22
@bradtaniguchi can you update in stackblitz so confusing :(
Brad
@bradtaniguchi
Sep 17 2018 19:23
@niniyzni until you spend like 3 hours grinding against an issue it isn't a "i'm hopeless against this" sorta bug
until this, its more like "I'm lazy and need help" sorta deal. If its only a few minutes and your confused Id look into why your confused since its way to early to be so
niniyzni
@niniyzni
Sep 17 2018 19:28
@bradtaniguchi can you give me a clue where is the problem
Brad
@bradtaniguchi
Sep 17 2018 19:29
@niniyzni again, id grind against the issue for a while more before asking for help to even find the problem, let alone fix it
Lia-Sue-Kim
@Lia-Sue-Kim
Sep 17 2018 20:19
what is like being a blogger? if you want to create education website is it blogging too
Christopher
@bradley1492
Sep 17 2018 20:21

Good evening everyone,

I'm toying with this forked pen and wanted to know how I would go about bringing the example logo I put in here and the navigation items into one line?
Can I just somehow "push" the image up so that aligns nicely with the menu items?

Is there a "flex" way of doing that? :D

https://codepen.io/bradley1492/pen/YOJeWZ

alpox
@alpox
Sep 17 2018 20:24
@bradley1492 Looks pretty much aligned to me already
Christopher
@bradley1492
Sep 17 2018 20:25
whoups I posted the wrong example

@alpox https://codepen.io/bradley1492/pen/YOJeWZ

I just changed some stuff a bit, but in general the issue is this one

Christopher McCormack
@cmccormack
Sep 17 2018 20:27
@bradley1492 there's a huge margin on the image, lowering that is a start
newmoon
@newmoon
Sep 17 2018 20:28

@bradley1492 Change your .main-nav CSS to:

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;  
}

And, then play around with that margin, and crop the logo image in a photo editor to reduce white space above and below.

The 3em margin is fairly large as Christopher mentioned
Christopher McCormack
@cmccormack
Sep 17 2018 20:29
don't know if you would want to justify content center would you?
might work, not sure
Christopher
@bradley1492
Sep 17 2018 20:35

@cmccormack @newmoon I wanted the 3em margin on my navigation elements to see how it looks, I forgot that it would also affect the img here.

I think I have to write it so that the margin only affects the navigation items.
Thanks for your tips the changed css now makes it exactly how I wanted it to look as a start.

All the rest is coming from image white-space now is it?

https://codepen.io/bradley1492/pen/YOJeWZ

newmoon
@newmoon
Sep 17 2018 20:36
@bradley1492 Yeah, the spacing now is from the image. Do this to see:
.logo {
  border: 1px solid black;
}
Also, lots of options for justify-content if you don't want it centered: https://css-tricks.com/almanac/properties/j/justify-content/
space-between could look good too
Christopher McCormack
@cmccormack
Sep 17 2018 20:37
yeah space around or between might look nice
maybe not space around
Christopher
@bradley1492
Sep 17 2018 20:40
aahhh thanks the border thing works perfectly now I know abit better what's going on
ok so one crops as much white space away before as possible @newmoon ?
@newmoon if I change it to justify-content: space-betweennothing happens?!
newmoon
@newmoon
Sep 17 2018 20:44
@bradley1492 Here's an example - change center to space-between and you'll see the difference: https://codepen.io/anon/pen/YOJavd?editors=1100
errr. change space-between to center :)
Christopher
@bradley1492
Sep 17 2018 20:45
@newmoon goodness me that looks slick!
With center
newmoon
@newmoon
Sep 17 2018 20:45
Nice and concise in the middle :)
Christopher
@bradley1492
Sep 17 2018 20:46
@newmoon yeah I absolutely will remember that one but you changed some stuff did you?
I tried so much the past few days to really grasp flexbox but it's still quite a mystery to me, it seems flexbox is more complex than I thought..
newmoon
@newmoon
Sep 17 2018 20:47
I removed your padding and margins and gave a class to your nav links
I haven't really verified this for myself, but I think .nav-link will perform better compared to .main-nav a
Christopher
@bradley1492
Sep 17 2018 20:50
@newmoon very nice now it really feels like it's reduced to the essentials
@newmoon I didn't know playing with justify-contentcould be so much fun :D
newmoon
@newmoon
Sep 17 2018 20:51
lol :)
Christopher
@bradley1492
Sep 17 2018 20:55
@newmoon with performance you mean loadtime do you?
newmoon
@newmoon
Sep 17 2018 20:55
Yeah @bradley1492 CSS searches from right to left if I remember correctly. So, with .main-nav a, it has to look at all the <a> elements first, then find out which of those are under an element with the .main-nav class.
Christopher
@bradley1492
Sep 17 2018 20:57
@newmoon okay I'll try and use .nav-link
@newmoon okay now I understand, the last version you sent me had a different concept of not pushing the logo to the left and the navigation elements to the right, but to space everything out evenly?!
newmoon
@newmoon
Sep 17 2018 20:59
@bradley1492 Yes, that's what space-between does - it spreads out everything evenly across the width of the element
If you want the nav links centered and the logo on the left, you can take the logo out of the <ul> and then give the <ul> the same height as your logo
Christopher
@bradley1492
Sep 17 2018 21:02
@newmoon What would I do from your version to push the logo to the left and the nav elements to the right?
with everything being on the same height
@newmoon Is that what you just meant?
newmoon
@newmoon
Sep 17 2018 21:05
@bradley1492 You could do something like this: https://codepen.io/anon/pen/xayjZQ?editors=1100
Christopher
@bradley1492
Sep 17 2018 21:06
@newmoon but I want the nav on the right
oh done
flex-end ^^
newmoon
@newmoon
Sep 17 2018 21:06
Use flex-end
lol, yep
Hundreds of ways to build a navbar though - helps to study how common frameworks build them like Bootstrap, Materialize, etc..
Christopher
@bradley1492
Sep 17 2018 21:09
@newmoon Ohh really I didn't know that, I would study common framework navbars?
@newmoon I sort of thought I want to build something my own, because I want to learn how it's done..
newmoon
@newmoon
Sep 17 2018 21:10
@bradley1492 Yeah, it helps to look directly at their CSS - either build it with HTML using the sample code in their docs and right-click -> Inspect, or study the CSS directly: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.css
Christopher
@bradley1492
Sep 17 2018 21:11
@newmoon okay that's interesting I'm just looking throuh
@newmoon just how do I find the navbar section inside the stylesheet?
newmoon
@newmoon
Sep 17 2018 21:13
@bradley1492 Search for navbar :)
If it's too daunting, I'd recommend building out a full navbar first and then using your browser's devtools to inspect.
Christopher
@bradley1492
Sep 17 2018 21:16
@newmoon yes it's too daunting ^^, you mean building a bootstrap navbar and then inspecting it with the browser?
newmoon
@newmoon
Sep 17 2018 21:16
@bradley1492 Yes, that's what I mean
Christopher
@bradley1492
Sep 17 2018 21:17
@newmoon I'll do that
@newmoon thx
newmoon
@newmoon
Sep 17 2018 21:17
Have fun :)