Click here to read the English version of this Readme
Gráfico de dispersão baseado no famoso Iris dataset (um conjunto de dados a respeito de três espécies da flor Iris). É possível selecionar as características nos eixos X e Y, bem como ver dados específicos ao passar o mouse sobre uma espécie desejada na legenda.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Gráfico de dispersão colorido |
| 🏷️ Tecnologias | D3, React, SVG |
| 🚀 URL | https://iris-scatter-plot-d3.vercel.app |
| 🔥 Curso | https://www.youtube.com/watch?v=2LhoCfjm8R4 |
Este projeto foi baseado nas aulas do curso "Data Visualization with D3, JavaScript, React", criado por Curran Kelleher e disponível no Youtube (em inglês).
Os menus dropdown para seleção dos dados para os eixos X e Y foram criados utilizando a biblioteca react-dropdown, que permite criar um menu semelhante ao do elemento HTML <select>, porém mais customizável.
Este é um projeto desenvolvido em React, que utiliza a biblioteca D3 para criação dos componentes que constituem a área de plotagem dos dados, utilizados pelo componente <ScatterPlot />.
A pessoa usuária pode selecionar os dados que serão exibidos nos eixos X e Y, representados pelos componentes <AxisBottom /> e <AxisLeft />, respectivamente. Os atributos disponíveis são Sepal Length, Sepal Width, Petal Length, Petal Width e Species. Os dados são plotados como círculos (component <Marks />), que utilizam uma escala ordinal para serem pintados com uma cor distinta, baseada na espécie que os dados representam, o que possibilita uma terceira dimensão para analisar os dados.
Há uma legenda posicionada ao lado direito do gráfico, indicando a cor aplicada a cada espécie. Ao passar o mouse sobre o nome ou a cor de uma das espécies, os dados dela são destacados no gráfico, como pode ser visto no GIF abaixo.
O projeto foi criado com o Vite.
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.
This project was based on the lessons from the course "Data Visualization with D3, JavaScript, React," created by Curran Kelleher and available on YouTube.
The dropdown menus were created using the react-dropdown library, which allows for the creation of a menu similar to the HTML <select> element but with more customization options.
This is a project developed in React, using the D3 library to create components that draw the plotting area, as can be seen in the <ScatterPlot /> component.
Users can select which attributes will be represented in the X and Y axes, rendered by the <AxisBottom /> and <AxisLeft /> components, respectively. The available attributes are Sepal Length, Sepal Width, Petal Length, Petal Width, and Species. The data is plotted as circles (<Marks /> component), using an ordinal scale to paint them in distinct colors based on the species the data represents, enabling a third dimension for data analysis.
There is a legend positioned on the right side of the chart, indicating the color applied to each species. When hovering over the name or color of one of the species, its data is highlighted on the chart, as can be seen in the GIF below.
This is a React project bootstrapped with Vite.
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.