Bron afbeelding: Lewis Cho

Introduceer

Data is de nieuwe olie, we hebben het al zo vaak gehoord. Maar passen we de visuele technieken toe om verbazingwekkende inzichten te vinden om de business een boost te geven?

Elke 24 uur worden duizenden visualisaties gemaakt. Sommige hitlijsten worden erg goed gewaardeerd door het publiek, terwijl andere om verschillende redenen gewoon worden verwaarloosd. Waarom? Welnu, het antwoord ligt in de schepping. Laten we eens kijken naar de oorzaak en het probleem dat de maker doet bij het maken van de grafieken en kijken hoe we deze kunnen oplossen met de Plotly datavisualisatie bibliotheek.

"Visualisatie geeft je antwoorden op vragen waarvan je niet wist dat je ze had." -Ben Schneiderman

Wat is de behoefte aan visualisatie?

Welnu, we houden van Excel en het helpt onze problemen efficiënter op te lossen, maar het is geen geweldig hulpmiddel om een ​​beslissing te nemen die rechtstreeks van invloed is op het bedrijf. Een grafiek kan 1000 woorden spreken die een Excel-blad niet kan.

Data viz helpt altijd bij data-analyse en data-exploratie en maakt de data begrijpelijker om inzichten te verkrijgen. Het samenvatten van de complexe kwantitatieve informatie in een kleine ruimte is wat een diagram doet.

De grafiek helpt altijd bij het ontdekken van de nieuwste trends in de financiële sector of tijdreeksen en verborgen patronen in de gegevens. We kunnen gemakkelijk de relaties tussen 3 variabelen of de correlaties tussen de variabelen identificeren.

Waarom gebruiken we Plotly?

Plotly is een held op het gebied van datavisualisatie omdat het de gebruiker de vrijheid geeft om grafieken te maken. Plotly is een open-source datavisualisatiebibliotheek die een overvloed aan diagramtypen biedt, evenals een Plotly Dash-tool voor het maken van Dashboard met callbacks. Met de plot kunnen we grafieken insluiten in elk artikel of blog. We kunnen ook grafieken maken in de grafiekstudio van plotly.

Het aantrekkelijke karakter van plotly is dat we kunnen communiceren met de grafiek die meer informatie over de grafiek onthult. De tooltip is erg aantrekkelijk in plot en we kunnen ze aanpassen aan ons gebruik. Plotly is veel gevraagd in plaats van andere bibliotheken van python zoals Matplotlib en Seaborn. Plotly biedt verschillende grafieken met animaties in 1D-, 2D- en 3D-dashboardtools, en we kunnen ze zelfs insluiten.

Dit artikel is hierop geïnspireerd notitieboekje op Kaggle.

Verschillende soorten grafieken

Het volgende komt rechtstreeks uit de documentatie:

Het doel van plotly.py is om een ​​aangename Python-interface te bieden voor het maken van figuurspecificaties voor weergave in de Plotly.js JavaScript-bibliotheek. In Plotly.js wordt een cijfer gespecificeerd door een declaratieve JSON-gegevensstructuur, en dus is de uiteindelijke verantwoordelijkheid van plotly.py het produceren van Python-woordenboeken die kunnen worden geserialiseerd in een JSON-gegevensstructuur die een geldig cijfer vertegenwoordigt.

Er zijn verschillende modules die Plotly biedt om visualisaties te maken

• uitdrukken: Meestal wordt plotly express gebruikt voor de visualisatie en het is een van de snelste modules om een ​​grafiek te maken. Het is goed voor visualisaties, maar er is één voorwaarde waarbij gegevens vaak in de juiste indeling moeten worden gestructureerd, anders ontstaat er verwarring tijdens het manipuleren in de panda-bibliotheek. Er is een overvloed aan documentatie beschikbaar zodat u met behulp van documentatie grafieken kunt maken.
• grafiek_objecten: Een laagdrempelige interface voor figuren, sporen en lay-out. Mijn go-to-module wanneer ik meer dan één grafiek naast elkaar nodig heb ter vergelijking. Het is zeer aanpasbaar met ontelbare manieren voor grafieken.
• figuur_fabriek: Figuurfabrieken zijn voornamelijk toegewijde functies voor het maken van soorten beelden op hoog niveau.

Laten we magie toevoegen aan grafieken. Prachtige datavisualisatie gemakkelijk gemaakt met Plotly. We kunnen normale grafieken converteren naar verbluffende grafieken met bewerking. Laten we onze reis stap voor stap beginnen en wijzigingen aanbrengen om de kaarten te verbeteren.

Magie toevoegen aan grafieken met behulp van Plotly

Bibliotheek importeren

We kunnen de bibliotheken installeren met de pip of zelfs het pakket downloaden in anaconda.

# pip pip install plotly # anaconda conda install -c anaconda plotly

Bibliotheken importeren

importeer panda's als pd importeer numpy als np importeer plotly.express als px van plotly.subplots importeer make_subplots importeer plotly.graph_objs as go

Voor de eenvoud ga ik eenvoudige gegevens gebruiken om te onderschatten. Dus na het implementeren van verschillende grafieken kunt u uw grafieken verbeteren met uw use cases en de plot verkennen. Python-notebook is beschikbaar hier.

Laad de gegevens

De dataset bestaat uit Heren- & Dameskleding de linkt voor de dataset is hier op de kakel.

df = pd.read_csv('myntra_products_catalog.csv') df[:2]

Afbeelding: Modekleding (Data)

Gegevens opschonen en voorbewerken

De jongens en meisjes vervangen door mannen en vrouwen voor het sorteren van de gegevens. De redundantie uit de gegevens verwijderen. Ook het vervangen van de merknaam, zodat deze in de juiste indeling op de kaart kunnen verschijnen.

df = df.replace({'Jongens':'Heren', 'Meisjes':'Vrouwen'}) df = df.replace({'US Polo Assn. Kids':'US Polo'})

df = df[df['Gender']!='Unisex Kids']

df['PrimaryColor'] = df['PrimaryColor'].replace(np.nan,"Missing")

fig = px.pie(df, names='Gender', height=300, width=600, title='Gender Overview', color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc']) fig. show()

In de bovenstaande grafiek kunnen we de algehele verdeling van geslacht en hun procentuele verdeling zien. Maar er ontbreekt iets, laten we wat magie toevoegen (Plotly) in de volgende grafieken.

Eerste stap om de achtergrond van de grafiek te converteren. Ja, ik ben het ermee eens dat een witte achtergrond leuk is, maar we kunnen met verschillende kleuren spelen, zodat grafieken voor zichzelf kunnen spreken. Nu gaan we de achtergrondkleur voor de grafiek toevoegen, voor kleurverandering moeten we de parameter plot_bgcolor en paper_bgcolor toevoegen

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, title='Gender Overview', color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc' ]) fig.update_layout(plot_bgcolor='#fafafa', paper_bgcolor='#fafafa') fig.show()

Laten we daarna, door achtergrondkleur toe te voegen, met de legenda's spelen om de ruimte van de grafiek op de juiste manier te gebruiken. Voor nu zullen we legenda's gebruiken en deze op een horizontale manier van verticaal in de onderstaande grafiek plaatsen.

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, title='Gender Overview', color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc' ]) fig.update_layout(plot_bgcolor='#fafafa', paper_bgcolor='#fafafa', legend=dict(orientation="h", yanchor="bottom", y=-0.5, xanchor="center", x=0.5 ) ) fig.show()

Oké ... dus nu ziet de grafiek er goed uit, maar er ontbreekt iets. Als we goed naar de grafieken kijken, zijn er verschillende dingen die we kunnen verbeteren en de leesbaarheid van de grafiek kunnen vergroten.

Cirkeldiagram 2

Punten voor verandering in de grafiek:

1. Eerst zullen we de legenda's verwijderen
2. Ten tweede plaatsen we de legendawaarde en hun procentuele waarde beide in dezelfde groep op de grafiek.

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, title='Gender Overview', color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc' ]) fig.update_layout(plot_bgcolor='#fafafa', paper_bgcolor='#fafafa') fig.show()

Laten we de code begrijpen:

We willen geslachtsnamen en distributie op de kaart naast elkaar hebben. Dus we moeten toevoegen tekstpositie en tekstinfo in het parametergedeelte voor het cirkeldiagram.

• tekstpositie: We kunnen selecteren waar we de positie van de tekst op de kaart willen plaatsen. (Binnen buiten)
• tekstinfo: We kunnen kiezen wat we in het diagram willen weergeven (tekst, procentuele waarde, label)

Kijk, na wijzigingen ziet de grafiek er leesbaarder en aantrekkelijker uit in vergelijking met de eerste grafiek. maar laten we de lettergrootte van de titel van het diagram vergroten en kijken hoe het eruit ziet.

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, title='Gender Overview', color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc' ]) fig.update_traces(hovertemplate=Geen, textposition='buiten', textinfo='percent+label', rotatie=50) fig.update_layout(margin=dict(t=100, b=30, l=0, r= 0), showlegend=False, plot_bgcolor='#fafafa', paper_bgcolor='#fafafa', title_font=dict(size=39, color='#555', family="Lato, sans-serif"), font=dict (maat=17, kleur='#8a8d93'), hoverlabel=dict(bgcolor="#444", font_size=13, font_family="Lato, sans-serif"))

Afbeelding: Plotly cirkeldiagram

Laten we de eerste en laatste grafieken vergelijken.

Laten we de volgende interactieve visualisaties maken met behulp van Plotly in Python.

Cirkeldiagram 3

We zagen het bovenstaande cirkeldiagram. Er is ruimte voor verandering en we kunnen het cirkeldiagram gemakkelijk aanpassen. Ten eerste kunnen we de titel van de grafiek verwijderen en tussen de taart plaatsen. Hier plaatsen we bijvoorbeeld Geslacht in het midden van het cirkeldiagram.

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc']) fig.update_traces(hovertemplate =Geen, textposition='buiten', textinfo='percent+label', rotatie=50) fig.update_layout(margin=dict(t=50, b=35, l=0, r=0), showlegend=False, plot_bgcolor='#fafafa', paper_bgcolor='#fafafa', font=dict(size=17, color='#8a8d93'), hoverlabel=dict(bgcolor="#444", font_size=13, font_family="Lato, sans-serif")) fig.add_annotation(dict(x=0.5, y=0.5, align='center', xref = "paper", yref = "paper", showarrow = False, font_size=22, text="Geslacht"))

Afbeelding: de titel uit de grafiek verwijderen

Laten we begrijpen hoe het moet:

• We zullen de titel uit de plotly pie-code verwijderen.
• Nu gaan we de annotatie toevoegen en het nummer van de x-as en het nummer van de y-as geven waar we de tekst willen weergeven.

Cirkeldiagram 4

fig = px.pie(df, names='Gender', height=300, width=600, hole=0.7, color_discrete_sequence=['#4c78a8', '#72b7b2', '#6b92bc']) fig.update_traces(hovertemplate =Geen, textposition='buiten', textinfo='percent+label', rotatie=50) fig.update_layout(margin=dict(t=50, b=35, l=0, r=0), showlegend=False, plot_bgcolor='#fafafa', paper_bgcolor='#fafafa', font=dict(size=17, color='#8a8d93'), hoverlabel=dict(bgcolor="#444", font_size=13, font_family="Lato, sans-serif")) fig.add_annotation(dict(x=0.5, y=0.4, align='center', xref = "paper", yref = "paper", showarrow = False, font_size=22, text="Geslacht")) fig.add_layout_image( dict( source="https://i.imgur.com/3Cab96Z.jpg", xref="paper", yref="paper", x=0.48, y=0.48, sizex=0.3 , sizey=0.25, xanchor="right", yanchor="bottom", sizing= "contain", ) ) fig.add_layout_image( dict( source="https://i.imgur.com/c6QKoDy.jpg", xref ="papier", yref="papier", x=0.55, y=0.48, sizex=0.3, sizey=0.25, xanchor="right", yanchor="bottom", sizing= "contain", )

Afbeelding: Plotly cirkeldiagram met afbeelding

Laten we begrijpen hoe het moet:

• Eerst moeten we een annotatie aan het diagram toevoegen, zodat we tekst in het midden van het diagram kunnen hebben
• Ten tweede voegen we afbeeldingen voor mannen en vrouwen toe bovenaan het geslachtslabel.

Tijdens het toevoegen van afbeeldingen moeten we verschillende dingen bekijken om de afbeelding er goed uit te laten zien.

• maatx, maat: Dit zal ons helpen om de grootte van de afbeelding in termen van breedte en hoogte te vergroten of te verkleinen.
• xanker, anker: Dit zal ons helpen om de afbeelding rechts, links, onder of boven te plaatsen in termen van respectievelijk de x-as en de y-as
• bron: Dit zal ons helpen te weten welke afbeelding we op de kaart moeten plaatsen.

Cirkeldiagram 5

We hebben meerdere afbeeldingen gezien die er buitengewoon uitzien met behulp van weinig bewerking met plot. We kunnen afbeeldingen en annotaties toevoegen aan grafieken. Dus laten we afbeeldingen gebruiken en ze vertellen over de verdeling tussen mannen en vrouwen.

fig = px.scatter(x=[1,1.2,1.3], y=[0,0,0], color_discrete_sequence=['#fff']) # styling fig.update_xaxes(visible=False) fig.update_yaxes(visible =False) fig.update_traces(textposition='top center') fig.update_layout(height=300, width=500, plot_bgcolor='#fff', paper_bgcolor='#fff', margin=dict(b=0,r= 50,l=50,t=110), title={'tekst': "Geslacht overzicht
Eenvoudigheidshalve worden jongens en meisjes vervangen door mannen en vrouwen.", 'y':0.8, 'x':0.5, 'xanchor': 'center', 'yanchor': 'top'}, font=dict(size=9 , color='#666'), ) fig.add_layout_image( dict( source="https://i.imgur.com/3Cab96Z.jpg", xref="paper", yref="paper", x=0.4, y=0.38, sizex=0.6, sizey=0.635, xanchor="right", yanchor="bottom", sizing= "contain", ) ) fig.add_layout_image( dict( source="https://i.imgur.com /c6QKoDy.jpg", xref="paper", yref="paper", x=0.7, y=0.38, sizex=0.6, sizey=0.65, xanchor="right", yanchor="bottom", sizing= "contain ", ) ) fig.add_annotation(dict(x=0.37, y=0.25, ax=0, ay=0, xref = "papier", yref = "papier", tekst= "44.7%

Dames" )) fig.add_annotation(dict(x=0.68, y=0.25, ax=0, ay=0, xref = "papier", yref = "papier", tekst= "45.7%

Heren" ))

Afbeelding: plot afbeeldingen met annotatie

Laten we begrijpen hoe het moet:

• Eerst maken we een spreidingsdiagram en gebruiken we dezelfde kleur van de markering en achtergrond die in ons geval grijs is.
• Vervolgens zullen we de 2 afbeeldingen naast elkaar plaatsen met behulp van plotly image annotation
• en dan zullen we onderaan de afbeelding schrijven met behulp van annotatie.

Conclusie

We hebben gezien hoe we met weinig kaarten kunnen maken

De in dit artikel getoonde media zijn geen eigendom van Analytics Vidhya en worden naar goeddunken van de auteur gebruikt.

Verwant