Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zingarelli/svg_smiley_face
A smiley face created with SVG and D3js
https://github.com/zingarelli/svg_smiley_face
d3js dataviz svg vitrinedev
Last synced: 19 days ago
JSON representation
A smiley face created with SVG and D3js
- Host: GitHub
- URL: https://github.com/zingarelli/svg_smiley_face
- Owner: zingarelli
- Created: 2023-08-12T13:19:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-14T12:34:18.000Z (over 1 year ago)
- Last Synced: 2024-01-29T06:15:50.581Z (12 months ago)
- Topics: d3js, dataviz, svg, vitrinedev
- Language: JavaScript
- Homepage: https://smiley-face-svg-d3.vercel.app
- Size: 76.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Smiley face
[Click here to read the English version of this Readme](#credits)
Componente que cria um rostinho feliz 😀
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Smiley Face em SVG**
| :label: Tecnologias | React, D3, SVG
| :rocket: URL | https://smiley-face-svg-d3.vercel.app
| :fire: Curso | https://www.youtube.com/watch?v=2LhoCfjm8R4
## Créditos
Este projeto foi criado durante as aulas iniciais do curso "Data Visualization with D3, JavaScript, React", criado por [Curran Kelleher](https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw) e disponÃvel no [Youtube (em inglês)](https://www.youtube.com/watch?v=2LhoCfjm8R4).
## Detalhes do projeto
Este é um projeto desenvolvido em React.
O componente `` desenha um rostinho feliz utilizando elementos [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) e a biblioteca [D3](https://d3js.org). Ele possui diversas props que podem ser modificadas para alterar o tamanho do rosto, olhos, nariz e boca.
O componente `` traz um exemplo de configuração que inclui alguns valores aleatórios, possibilitando criar 12 rostinhos diferentes utilizando o mesmo componente, cujo resultado pode ser visto na imagem que ilustra este Readme.
Cada parte do rostinho foi separada em outros componentes, todos disponÃveis na pasta `/src`.
## Instalação
O projeto foi criado com o [Vite](https://vitejs.dev).
Após cloná-lo ou baixá-lo, abra um terminal, navegue até a pasta do projeto e rode o comando abaixo para instalar as dependências necessárias.
npm install
Feito isso, o app pode ser iniciado em modo de desenvolvimento com o seguinte comando:
npm run dev
O app irá rodar na URL http://127.0.0.1:5173.
---
## Credits
This project was created during the initial lessons of the course "Data Visualization with D3, JavaScript, React," provided by [Curran Kelleher](https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw) and available on [YouTube](https://www.youtube.com/watch?v=2LhoCfjm8R4).
The translation of this README in English was generously provided by [OpenAI's GPT-3](https://openai.com) language model, later modified by me.
## Project Details
This is a project developed in React.
The `` component draws a smiley face using [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) elements and the [D3](https://d3js.org) library. It has several props that can be modified to change the size of the face, eyes, nose, and mouth.
The `` component provides an example with configuration that includes some random values, creating 12 different faces using the same component. The result can be seen in the image illustrating this Readme.
Each part of the face has been separated into other components, all available in the `/src` folder.
## Instalation
This is a React project bootstrapped with [Vite](https://vitejs.dev).
After cloning or downloading this project, open a terminal, navigate to the project's folder and run the following command in order to install all necessary dependencies:
npm install
After that, you can run the app in development mode with the following command:
npm run dev
The app will run at http://127.0.0.1:5173.