teleren/devto huggingface dataset:
SVG Basics for d3
Tags: d3js, svg
Published: 2019-09-02 10:08:11

---
title: SVG Basics for d3
published: true
tags: d3.js,svg
canonical_url: https://mappingwithd3.com/resources/d3/svg-basics/
---

# SVG Basics for d3

When you start learning or using d3 you will come across SVGs. That‘s what most people use when they create a visualization with d3. And it‘s the easier choice and the more documented one. So you need to understand a few basic concepts of SVG to make better use of d3 and learn faster.

In this short post I will show you three elements of SVG that are worth knowing.

## Groups

You‘ve probably come across a visualization where the person used a `g` element within their svg.  
The `g` stands for group and is an easy way to structure your svg. Especially if you have any kind of interaction or want to update your chart it‘s easier to group your svg elements into groups. You can select them easily and add just one class to the group. It makes it easy to style them as well, when you have groups.

## The path element

The most common used element with d3 is the path element. It‘s also the most flexible element. You can create almost any shape with it.  
We can do that with the `d` attribute of the path. The good thing is, you don‘t really need to know how it works. You just need to be aware that it exists and that you will use it with d3 to create custom elements. For mapping we mostly just use the path element.

## Translation

This is the part where a lot of people struggle with. And I honestly did not tried too hard to understand it for a long time but just used it the way other people were using it.  
But it’s actually quite simple. So here is a short explanation of it:  
With `transform="translate(20,20)"` you‘re moving that element 20 pixel to the right and 20 pixel to the bottom. Why? Because in the browser the coordinate system start in the top left corner of an element.  
Why is that useful?  
Because now you can move elements that have no x,y attributes. Like a group for example.

Hope you enjoyed this short post.

---
This post appeared first on: https://mappingwithd3.com/resources/d3/svg-basics/
Vue 3 da reaktivlik (reactivity)
Tags: webdev, vue, react, mukhriddinweb
Published: 2024-07-07 23:59:45

**Vue3** da reaktivlik (reactivity) asosiy qismlardan biri hisoblanadi, bu dastur yoki saytimizning  dinamikligini va interaktivligini ta’minlash uchun ishlatiladi. Vue3 da reaktivlik Vue'ning Composition API (versiyasi) orqali amalga oshiriladi. Bu **"Composition API"** (v3) Vue 2 dagi **"Options API"** bilan solishtirganda ancha  tartibli ishlash va qulaylikni beradi.

### Vue3 da reaktivlikning asosiy tushunchalari

1. **reactive**:
   - `reactive` funksiyasi obyektlarni reaktiv holatga keltiradi. Bu shuni anglatadiki, obyektning har qanday o‘zgarishi avtomatik ravishda interfeysni yangilaydi.

   ```javascript
   import { reactive } from 'vue';

   const state = reactive({
     count: 0
   });

   function increment() {
     state.count++;
   }
   ```

2. **ref**:
   - `ref` funksiyasi oddiy qiymatlarni reaktiv holatga keltiradi. Bu oddiy statik saqlangan qiymatlarni, masalan, number yoki string array kabi datalarni reaktiv qilish uchun ishlatiladi.

   ```javascript
   import { ref } from 'vue';

   const count = ref(0);

   function increment() {
     count.value++;
   }
   ```

3. **computed**:
   - `computed` funksiya qaytaradigan qiymatlar uchun ishlatiladi. Ular boshqa reaktiv qiymatlarga bog‘liq bo‘lib, bog‘liq qiymatlar o‘zgarganda avtomatik ravishda qayta "render"lanadi.

   ```javascript
   import { computed, ref } from 'vue';

   const count = ref(0);
   const double = computed(() => count.value * 2);
   ```

4. **watch**:
   - `watch` funksiyasi reaktiv qiymatlar o‘zgarishlarini kuzatish uchun ishlatiladi. Bu biror o‘zgarish sodir bo‘lganda o'zgarishni "handle" qilishga  yordam beradi.

   ```javascript
   import { watch, ref } from 'vue';

   const count = ref(0);

   watch(count, (newValue, oldValue) => {
     console.log(`Count changed from ${oldValue} to ${newValue}`);
   });
   ```


### Vue3 da reaktivlikning afzalliklari nimada ?

- **Optimallik va samaradorlik**: Vue 3 da reaktivlik tizimi asosan Proxy asosida amalga oshirilgan bo‘lib, u Vue 2 dagi Object.defineProperty asosidagi yondashuvdan ko‘ra samarali hisoblanadi.

- **Moslashuvchanlik (flexibility)** : **Composition API** Vue 3 da muhim bo‘lib, komponentlarning qayta foydalanish darajasini oshiradi va murakkabliklarni kamatiradi.

- **Modulizatsiya**: **Composition API** ko‘p funksionallikni alohida modullarga ajratishga yordam beradi, bu kodni yanada o‘qishli va boshqarish oson bo‘lishiga olib keladi.

Vue3 da reaktivlik tizimi Vue  da loyihalar ishlab chiqishda kuchli va oson desak bo'ladi , interaktiv va dinamik foydalanuvchi interfeyslarini (UI) ni  yaratishda katta yordam beradi.

**Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡**

🔗 https://t.me/mukhriddinweb
🔗 https://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://khodieff.uz
🔗 https://github.com/mukhriddin-dev
🔗 https://linkedin.com/in/mukhriddin-khodiev
🔗 https://youtube.com/@mukhriddinweb
Do you want to host an AI server with API keys for free? I built a solution. APIMyLlama V2!
Tags: opensource, node, release, javascript
Published: 2024-07-07 23:13:22

My new project APIMyLlama V2 is now out! For those wanting to build an AI server with distributable API Keys. Look no further than APIMyLlama V2. This is an app built on top of the Ollama application. This app adds support for API Keys to Ollama. If you would like to try it yourself all documentation is on GitHub. If there are any issues, please report them. Also please give feedback if there are any features, removal of features, or new features you would like to see. Please note that this is still in Beta and things may change. 
Version 2 brings many features along side it! Including 2 new packages for both Java and Rust! There is many new management features, more security, and even a new robust rate limiter! Go watch the video or go to the github to find out more info!
Video- https://www.youtube.com/watch?v=x_MSmGX3Vmc

GitHub- https://github.com/Gimer-Studios/APIMyLlama
Hi, I'm Kai Rautenberg
Tags: introductions
Published: 2017-01-16 11:18:01

---
title: Hi, I'm Kai Rautenberg
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 16 years.

You can find me on Twitter [@toyflish](https://twitter.com/toyflish) or Instagram [@toyflish](https://instagram.com/toyflish)

I live in my campervan located in the nice beaches of Spain, Portugal, Denmark and Germany.

I work for SHISHA-Clothing.

I mostly program in these languages: Ruby and JS.

I am currently learning more about React.

Nice to meet you.
Hi, I'm Leonardo Madeira
Tags: introductions
Published: 2017-02-02 16:54:18

---
title: Hi, I'm Leonardo Madeira
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 15 years.

You can find me on GitHub as [lmadeira](https://github.com/lmadeira)

I live in Rio de Janeiro, Brazil.

I work for GeraÃ§Ã£o Futuro

I mostly program in these languages: Java, C#, Javascript.

I am currently learning more about Elm.

Nice to meet you.
Hi, I'm Nando Quintana
Tags: introductions
Published: 2017-02-07 17:06:45

---
title: Hi, I'm Nando Quintana
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 19 years.

You can find me on Twitter as [@NandoQuintana](https://twitter.com/NandoQuintana)

I live in Bilbao.

I work for Tiendata

I mostly program in these languages: Python, Django, Javascript, Bash.

I am currently learning more about anything.

Nice to meet you.
Hi, I'm Michal Cumpl ðŸ’£
Tags: introductions
Published: 2017-02-22 20:46:04

---
title: Hi, I'm Michal Cumpl ðŸ’£
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding since 1999.

You can find me on Twitter as [@mcumpl](https://twitter.com/mcumpl)

I live in Prague.

I work for [company]

I mostly program in JavaScript and TypeScript.

I am currently learning more about life.

Nice to meet you.
Hi, I'm Will
Tags: introductions
Published: 2017-03-02 22:58:21

---
title: Hi, I'm Will
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for more than 15 years.

You can find me on Twitter as [@willl](https://twitter.com/willl), and [Github](https://github.com/willl). 

I live in Melbourne, Australia.

I mostly program in these languages: C#, ASP.NET.

I am currently learning more about .NET Core, F#.

Nice to meet you.
Nevertheless, Jenn Coded
Tags: wecoded
Published: 2017-03-08 12:44:07

---
title: Nevertheless, Jenn Coded 
published: true
tags: shecoded
---

## I began coding because...

I wanted to create a better Apple II game than "Wheelchair Hop" for my brother who is disabled.

In reality, I never dreamed I would be a developer when I was a kid.  I was going to be a famous chemist.  I only did technology work to pay the bills and support my dream of being a chemist.  As a chemist, I somehow always ended up fixing computers or software used in the lab.  Eventually I stopped fighting my technology skills and accepted that I was in fact a developer.

## I'm currently hacking on...

Websites, so many websites.

At work, I am dragging websites out of the 1990s.  At home, I am creating websites for random house appliances that my husband has connected to the web.

## I'm excited about...

Making websites accessible for users.

## My advice for other women who code is...

Remember, it can suck and that is normal.  But sucking all the time is not!  Don't be afraid to ask for help or a gut check if you feel like things are going sideways.  You should get moments when things *click* because you make something that works and you are proud of, those moments are the best.  I am always chasing that next moment of solving a problem.
Nevertheless, Laura Pond Coded
Tags: wecoded
Published: 2017-03-08 12:44:14

---
title: Nevertheless, Laura Pond Coded 
published: true
tags: shecoded
---

I didn't mean to end up here. I went to school for marketing, not computer science. Working on the 'tech' side of a tech startup definitely wasn't part of the plan, but here I am anyway.  

I'm a data analyst for a mobile payment startup in Boston, but even that position didn't start out that way. I started at this company on their customer support team 3 years ago, troubleshooting issues over phone and email. But that changed when my company had a need for more detailed reporting and insights, and no one designated to do it. My boss tapped me to lead the reporting deep dive for the Support team to measure our growth and track key KPIs. He showed me the basics of SQL and MAQL, then let me loose on a whole new career.

I dove right in. And at first, I got a whole lot of stuff wrong. Then, I started reading a LOT (I have my own personal O'Reilly library at my desk now), and I figured it out. Eventually I moved over to the marketing team to offer analytics to the whole company. 

I've always found it hard to call myself a "coder". I work in SQL every day to pull insights for my company and our clients. I taught myself a bit of Ruby so I could build and maintain automated reports, and now I'm learning Python so I can dive into more insights with Data Science. I always feel like I'm not a "real" programmer, that I'm an imposter and that, someday, everybody will find out. 

I am lucky to work for a boss, and a company, that values learning and my personal growth. From the developers who answered all of my (many) questions about why my code won't run, to my boss who sent me to conferences and classes to further my education, I felt supported by team members to achieve my goals. I'm lucky to be able to surround myself with such great people. 

But as for that feeling, that imposter feeling, it's important to recognize that everyone has this feeling (I hope), especially when you're first starting out. Don't wait until your product, or your knowledge, is 100% before stepping into something new. Learning is a lifelong journey, and some of the most important breakthroughs happen when we fail. 

Susan Wojcicki, CEO of YouTube said it perfectly: "Opportunities, the good ones, they're messy and confusing and hard to recognize. They're risky. They challenge you."

So, stay challenged. Find those opportunities. Let your nerd flag fly. And remember, never stop learning.
Hi, I'm Alexandre Morgaut
Tags: introductions
Published: 2017-04-06 10:17:26

---
title: Hi, I'm Alexandre Morgaut
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 36 years (20 years for JavaScript).

You can find me on:

* [Twitter (as @amorgaut)](https://twitter.com/amorgaut)
* [Slideshare](https://www.slideshare.net/alexandre_morgaut)
* [Lanyrd](http://lanyrd.com/profile/amorgaut/)
* [LinkedIn](https://www.linkedin.com/in/morgautalexandre/)
* [Quora](https://www.quora.com/profile/Alexandre-Morgaut)
* [Stackoverflow](https://stackoverflow.com/users/673416/alexandre-morgaut)
* [Github](https://github.com/AMorgaut)


I live in Nantes (France), work for [Capgemini](https://capgemini.com), and mostly program in JavaScript.

I am currently learning more about Web Assembly, and transpilations via AST tools (ex: Babel).

Nice to meet you.
Hi, I'm Antonio ChillarÃ³n
Tags: introductions
Published: 2017-04-07 11:43:43

---
title: Hi, I'm Antonio ChillarÃ³n
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 17 years.

You can find me on Twitter as [@achillar2](https://twitter.com/achillar2)

I live in Barcelona.

I work for AlterAid.

I mostly program in these languages: Java, PHP, Node.js and Go.

I am currently learning more about Ionic 2 and Angular.

Nice to meet you.
Hi, I'm Robert Heine
Tags: introductions
Published: 2017-04-19 08:33:11

---
title: Hi, I'm Robert Heine
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for 18 years.

You can find me on Twitter as [@bbq_rob](https://twitter.com/bbq_rob), or as Rob on Mastodon [@rob@m.heine.xyz](https://m.heine.xyz/@rob).

I live near Munich, germany.

I mostly program in these languages: Java (or Java/EE), Kotlin, Python. 

I hate to work with PHP.

Nice to meet you.
Hi, I'm Tim
Tags: introductions
Published: 2017-05-13 18:48:45

---
title: Hi, I'm Tim
published: true
description: My introduction post
cover_image: 
tags: introductions
---

I have been coding for [6] years.

You can find me on Twitter as [[@TimTufts](https://twitter.com/TimTufts)]

I live in [Seattle].

I work for [Amazon]

I mostly program in these languages: [Java, Ruby].

I am currently learning more about [Productivity, Testing, Personal Development].

Nice to meet you.
Hi, I'm Bala
Tags: introductions
Published: 2017-05-22 11:29:35

---
title: Hi, I'm Bala
published: true
description: My introduction post
tags: introductions
---


You can find me on GitHub as [boobala](https://github.com/boobala)

I live in Chennai, India.

I work for Zoho Corporation Pvt Ltd,.

I mostly program in these languages: HTML, CSS, JAVASCRIPT

Nice to meet you.
Hi, I'm Glen Beer
Tags: introduction
Published: 2017-05-24 01:14:24

---
title: Hi, I'm Glen Beer
published: True
description: My introduction post
tags: introduction 
---

I have been coding for 35 years.

You can find me on Twitter as [@glenbeer](https://twitter.com/glenbeer)

I live in WinterPeg.

I work for: AS21774

I mostly program in these languages: Python, Go, JS & Cobol when forced.

I am currently learning more about #AR, #AI & 3D printing.

Nice to meet you.
Hi, I'm Alexander Craggs
Tags: introductions
Published: 2017-05-24 19:51:59

---
title: Hi, I'm Alexander Craggs
published: true
description: My introduction post
tags: introductions
---

I have been coding for 5 years.

You can find me on GitHub as [popey456963](https://github.com/popey456963)

I live in England.

I am currently a student

I mostly program in these languages: Node.JS & Python.

I am currently learning more about Bash & CLI Usage.

Nice to meet you.
Hi, I'm Amar Prakash Pandey
Tags: introductions, amarlearning, opensource, gsoc
Published: 2017-07-02 08:14:06

---
title: Hi, I'm Amar Prakash Pandey
published: true
description: My introduction post
tags: introductions, amarlearning, Open-source, GSoC
---

I have been coding for 3 years.

You can find me on GitHub as [amarlearning](https://github.com/amarlearning)

I live in Chennai.

Currently, doing my Google Summer of Code Intern under TEAMMATES @ National University Of Singapore.

I mostly program in these languages: JavaScript, Python, C++, Java.

I am currently learning more about Refactoring: Improving design of existing code.

Nice to meet you.
Hi, I'm Vikram Acharya
Tags: introductions
Published: 2017-07-14 16:43:39

---
title: Hi, I'm Vikram Acharya
published: true
description: Technology Geek
tags: introductions
---

I have been coding for 6+ years.

You can find me on Twitter as [@vikramacharyaa](https://twitter.com/vikramacharyaa)

I live in Mumbai.

I work for Craftsvilla.com as Technology Lead

I mostly program in these languages: PHP, PYTHON.

I am currently learning more about AWS & Machine Learning.

Nice to meet you.
Hi, I'm Himanshu Dudhat
Tags: introductions
Published: 2017-07-23 11:33:58

---
title: Hi, I'm Himanshu Dudhat
published: true
description: My introduction post
tags: introductions
---

I have been coding for 5+ years.

You can find me on GitHub as [HimanshuDudhat](https://github.com/HimanshuDudhat)

I live in Navsari.

I work for Goldenmace IT Solutions

I mostly program in these languages: Java, C & c++.

I am currently learning more about IoT.

Nice to meet you.
Hi, I'm luarbiasa
Tags: introductions
Published: 2017-07-23 14:55:16

---
title: Hi, I'm luarbiasa
published: true
description: My introduction post
tags: introductions
---

I have been coding for [number] years.

You can find me on GitHub as [luarbiasa](https://github.com/luarbiasa)

I live in [city].

I work for [company]

I mostly program in these languages: [languages].

I am currently learning more about [topic].

Nice to meet you.
What CSS methodology should we use at dev.to?
Tags: discuss, meta
Published: 2017-10-05 22:18:11

---
title: What CSS methodology should we use at dev.to?
published: true
tags: discuss, meta
---

The CSS for [dev.to](/) is fairly wild-west right now. It's mostly scaled by way of isolating parts, meaning more copying and pasting and relying on SCSS nesting, less re-usability and few true rules.

I'm wondering if there are any CSS methodologies or strict rule sets you've used that you like. I'm familiar with BEM and would lean towards that from what I know, but I'm looking for some input to bring to the team.
Как связать Monolog и E.L.K.
Tags: php, monolog, elasticsearch, kibana
Published: 2018-01-29 12:12:28

---
title: "Как связать Monolog и E.L.K."
published: true
tags: php, monolog, elasticsearch, kibana
canonical_url: http://phpprofi.ru/blogs/post/74
---

E.L.K. — это отличный стек для хранения, управления и мониторинга логов. Monolog — это отличная PHP-библиотека для логирования. Давайте заставим их работать вместе.

![](https://docs.fluentd.org/images/kibana5-screenshot.png)

Читать далее: http://phpprofi.ru/blogs/post/74
Sharing your Advent of Code Results
Tags: discuss, coding, python, javascript
Published: 2017-12-09 10:13:31

---
title: Sharing your Advent of Code Results
published: true
description: 
tags: #discuss #coding #python #javascript
---

Hi, it has been over a week of coding, so I wanted to ask if anyone would like to share their [Advent Of Code](http://adventofcode.com/2017) results? If so, post a link to your public Github repo in the comments. [Here is my Github Repo](https://github.com/r0f1/adventofcode2017).

Also, to spark the competition even further, I've created a private leaderbord, that anybody interested can join. Go to [here](http://adventofcode.com/2017/leaderboard/private) and enter the code `28346-d8f8d749`. Let's see how many people we get on board.

Best, Flo
W(AI) now 
Tags: ai, facebook
Published: 2017-12-13 12:13:33

---
title: W(AI) now 
published: true
description: About the AI hype these days
tags: AI, Facebook
---
AI concepts were available since the late 1970 in computer languages. I found out about AI in Java (me-sa Jar-Jar) like 20 years ago and event then there were free libs to support it. Why did it take this much time for AI to gain momentum and to become #1 thing that people lie about in their CVs? Did we needed that much time to grasp the concepts of it? Or was it something completely else. Voice recognition software was commercially available since the late 90s. What's the big deal now, why now is this topic so popular in Software development. Why are people so hyped up about it now. It makes me wonder, maybe we did not have that much knowledge about every one person dead or alive (thanks Facebook), or maybe the algorithms were not sophisticated, or maybe the general public was not interested in Amazon guessing what their Christmas wish is. One can just ponder.
Ordering Hash in Ruby
Tags: ruby
Published: 2017-12-26 07:44:32

---
title: Ordering Hash in Ruby
published: true
description: 
tags: Ruby
---

Use `Hash#slice` if RUBY_VERSION >= "2.5.0"


```rb
h = {a: 1, b: 2}
key_order = %i[b a]
h.slice(*key_order)
# => {:b=>2, :a=>1}
```

https://github.com/ruby/ruby/blob/v2_5_0/spec/ruby/core/hash/slice_spec.rb#L19-L21

## micro benchmark


```rb
# sort_hash.rb

require 'benchmark/ips'

class Hash
  # active_support/core_ext/hash/slice
  # https://github.com/rails/rails/blob/v5.2.0.beta2/activesupport/lib/active_support/core_ext/hash/slice.rb#L23-L25
  def slice_as(*keys)
    keys.each_with_object(Hash.new) { |k, hash| hash[k] = self[k] if has_key?(k) }
  end

  # based on active_support/core_ext/hash/slice
  # https://github.com/rails/rails/blob/v5.2.0.beta2/activesupport/lib/active_support/core_ext/hash/slice.rb#L23-L25
  def slice_sort(*keys)
    keys.each_with_object(Hash.new) { |k, hash| hash[k] = self[k] }
  end
end

Benchmark.ips do |x|
  x.report('Hash#slice builtin') do
    { a: 1, b: 2, c: 3 }.slice(:c, :b, :a)
  end

  x.report('Hash#slice active_support') do
    { a: 1, b: 2, c: 3 }.slice_as(:c, :b, :a)
  end

  x.report('Hash#slice active_support tweaked') do
    { a: 1, b: 2, c: 3 }.slice_sort(:c, :b, :a)
  end

  x.compare!
end
```

```
% ruby -v sort_hash.rb
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-linux]
Warming up --------------------------------------
  Hash#slice builtin   111.211k i/100ms
Hash#slice active_support
                        67.275k i/100ms
Hash#slice active_support tweaked
                        73.364k i/100ms
Calculating -------------------------------------
  Hash#slice builtin      1.479M (± 1.2%) i/s -      7.451M in   5.040261s
Hash#slice active_support
                        812.401k (± 1.0%) i/s -      4.104M in   5.051928s
Hash#slice active_support tweaked
                        876.849k (± 1.0%) i/s -      4.402M in   5.020535s

Comparison:
  Hash#slice builtin:  1478540.2 i/s
Hash#slice active_support tweaked:   876849.3 i/s - 1.69x  slower
Hash#slice active_support:   812400.9 i/s - 1.82x  slower
```