Архив метки: python

Как интегрировать интерактивный график PlotLy на сайт

Строим график PlotLy в Юпитер.Ноутбук

# импорт библиотек
import pandas as pd
import plotly.express as px
import plotly
# чтение файла с подготовленными данными
table_for_scatter = pd.read_csv('https://eddydewrussia.ru/download/dannye-dlja-postroenija-interaktivnogo-grafika/?wpdmdl=5290&refresh=6291d6e6d1a141653724902')
# строим график
fig = px.scatter(table_for_scatter, x='units', y='unit_price', color='outletname',
                 size='royalty_amount_customer', size_max=100)
fig.show()

В Юпитер.Ноутбук получим данные для встраивания PlotLy на сайт

# выводим DIV блок графика
plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')

Обратите внимание! В блоке выше прямые кавычки могут быть переделаны самим сайтом на апострофы.

При вставке приведённого кода проверьте их и при необходимости, замените.

Получаем блок DIV(отрывок) графика PlotLy:

'<div>                            <div id="2c6ca52a-b541-4a94-b51b-1489ca227e74" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2c6ca52a-b541-4a94-b51b-1489ca227e74")) {                    Plotly.newPlot(                        "2c6ca52a-b541-4a94-b51b-1489ca227e74",                        [{"hovertemplate":"outletname=YouTube Music<br>units=%{x}<br>unit_price=%{y}<br>royalty_amount_customer=%{marker.size}<extra></extra>","legendgroup":"YouTube Music","marker":{"color":"#636efa","size":[1.233006],"sizemode":"area","sizeref":0.0001233006,"symbol":"circle"},"mode":"markers","name":"YouTube Music","orientation": ...

Встраиваем график PlotLy в сайт

  • На сайте активируем блок вставки произвольного HTML
  • В первую строку блока вставляем активацию подсистемы вывода графика:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  • Затем – полученный выше блок DIV
    Обратите внимание на то, что блок DIV в выводе заключён в одинарные кавычки ‘
    Копировать блок для переноса на сайт следует без этих кавычек

В итоге ячейка произвольного HTML выглядит так (отрывок):

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div>                            <div id="2c6ca52a-b541-4a94-b51b-1489ca227e74" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2c6ca52a-b541-4a94-b51b-1489ca227e74")) {                    Plotly.newPlot(                        "2c6ca52a-b541-4a94-b51b-1489ca227e74",                        [{"hovertemplate":"outletname=YouTube Music<br>units=%{x}<br>unit_price=%{y}<br>royalty_amount_customer=%{marker.size}<extra></extra>","legendgroup":"YouTube Music","marker":{"color":"#636efa","size":[1.233006],"sizemode":"area","sizeref":0.0001233006,"symbol":"circle"},"mode":"markers","name":"YouTube Music","orientation":"v","showlegend":true,"x":[400],"xaxis":"x","y":[0.003082515],"yaxis":"y","type":"scatter"},{"hovertemplate":"outletname=Youtube<br>units=%{x}<br>unit_price=%{y}<br>royalty_amount_customer=%{marker.size}<extra></extra>","legendgroup":"Youtube","marker":{"color":"#EF553B","size":[0.063765],"sizemode":"area","sizeref":0.0001233006,"symbol":"circle"},"mode":"markers","name":"Youtube","orientation": ...

И результат, интерактивный график PlotLy на нашем сайте:

Если больше одного графика PlotLy на странице:

Если надо разместить на странице больше одного графика, то для последующих графиков не надо вставлять строку загрузки графической библиотеки.

Досточно лишь DIV блока.

Русский язык в подписях и надписях графика PlotLy

А вот с русским языком в надписях – проблема.

Сама система PlotLy адекватно прорисовывает графики с русскими надписями.

Также верно происходит экспорт графика в html файл.

Однако при экспорте в DIV блок, все кириллические символы заменяются на их коды.
А сайт но вордпресс эти коды не выводит буквами, и выводит эти самые коды и получается белиберда.

Что делать?

  1. Текст блока DIV графика PlotLy вставить блокнот Windows
  2. Меню “Заменить”.
  3. Указываем для поиска “\\”
  4. Указываем для замены “\”
  5. Выделяем весь текст и копируем
  6. Заходим на сайт КОНВЕРТЕР
    1. (выяснилось, что этот текст с кракозябрами, но с одинарными \ можно сразу вставить на сайт (п. 9)
  7. Вставляем весь текст в окно Юникод
  8. Ждём
  9. В окне Текст выделяем весь текст, копируем и вставляем его в блок “Произвольный HTML”
  10. Получаем результат.

Содержимое файла (отрывок):

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"\\u0421\\u0435\\u0442\\u0435\\u0432\\u043e\\u0435=\\u043d\\u0435\\u0442<br>\\u0422\\u0438\\u043f \\u0437\\u0430\\u0432\\u0435\\u0434\\u0435\\u043d\\u0438\\u044f=%{x}<br>\\u041a\\u043e\\u043b\\u0438\\u0447\\u0435\\u0441\\u0442\\u0432\\u043e \\u043f\\u043e\\u0441\\u0430\\u0434\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442 =%{y}<extra></extra>","legendgroup":"\\u043d\\u0435\\u0442","marker":{"color":"#636efa"},"name":"\\u043d\\u0435\\u0442","notched":false,"offsetgroup":"\\u043d\\u0435\\u0442","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440",

После замены \\ на \

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"\u0421\u0435\u0442\u0435\u0432\u043e\u0435=\u043d\u0435\u0442<br>\u0422\u0438\u043f \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f=%{x}<br>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0441\u0430\u0434\u043e\u0447\u043d\u044b\u0445 \u043c\u0435\u0441\u0442 =%{y}<extra></extra>","legendgroup":"\u043d\u0435\u0442","marker":{"color":"#636efa"},"name":"\u043d\u0435\u0442","notched":false,"offsetgroup":"\u043d\u0435\u0442","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440",

После обработки на сайте

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"Сетевое=нет<br>Тип заведения=%{x}<br>Количество посадочных мест =%{y}<extra></extra>","legendgroup":"нет","marker":{"color":"#636efa"},"name":"нет","notched":false,"offsetgroup":"нет","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар",

Получаем график PlotLy с подписями на русском языке:

‘
‘
Статья понравилась?
Вывод данных о датафрейм

Информация про датафрейм

Как вывести полную информацию про данные в таблице

import pandas as pd
dash_visits = pd.read_csv('https://eddydewrussia.ru/download/dash_visits/?wpdmdl=5230&masterkey=nLdyJ3VbW1PZ2e_TA4xbcsuZHTYHaoPLnQHpPVvTMozIw3dkLuxX5-CJKOi30tWiqjk_HX_E17pTlXEe1qE2IcJXZM099Ooh0bYFK4HBug4')
# функция для вывода информации о данных
def dataset_info(data):
    print('\033[1m' + 'Строки - полные дубликаты:' + '\033[0m')
    display(data[data.duplicated(keep=False)])
    print('\033[1m' + 'Названия колонок:' + '\033[0m')
    print(data.columns)
    print()
    print('\033[1m' + 'Первые строки:' + '\033[0m')
    display(data.head(3))
    print('\033[1m' + 'Информация о датафрэйм:' + '\033[0m')
    display(data.info())
    print('\033[1m' + "describe" + '\033[0m')
    display(data.describe())
    print('\033[1m' + "Количества и доли отсутствующих значений" + '\033[0m')
    display(pd.concat([data.isna().sum(), data.isna().mean()], axis=1)\
    .rename(columns={0:'кол-во', 1:'доля'})\
    .style.format({'кол-во':'{:.0f}', 'доля':'{:.2%}'}))
# применение функции
dataset_info(dash_visits)

Результат

Строки - полные дубликаты:
Unnamed: 0record_iditem_topicsource_topicage_segmentdtvisits
Названия колонок:
Index(['Unnamed: 0', 'record_id', 'item_topic', 'source_topic', 'age_segment',
       'dt', 'visits'],
      dtype='object')
Первые строки:
Unnamed: 0record_iditem_topicsource_topicage_segmentdtvisits
001040597ДеньгиАвто18-252019-09-24 18:32:003
111040598ДеньгиАвто18-252019-09-24 18:35:001
221040599ДеньгиАвто18-252019-09-24 18:54:004
Информация о датафрэйм:
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 30745 entries, 0 to 30744
Data columns (total 7 columns):
 #   Column        Non-Null Count  Dtype 
---  ------        --------------  ----- 
 0   Unnamed: 0    30745 non-null  int64 
 1   record_id     30745 non-null  int64 
 2   item_topic    30745 non-null  object
 3   source_topic  30745 non-null  object
 4   age_segment   30745 non-null  object
 5   dt            30745 non-null  object
 6   visits        30745 non-null  int64 
dtypes: int64(3), object(4)
memory usage: 1.6+ MB

None
describe
Unnamed: 0record_idvisits
count30745.000003.074500e+0430745.000000
mean15372.000001.055969e+0610.089673
std8875.461358.875461e+0319.727601
min0.000001.040597e+061.000000
25%7686.000001.048283e+061.000000
50%15372.000001.055969e+063.000000
75%23058.000001.063655e+0610.000000
max30744.000001.071341e+06371.000000
Количества и доли отсутствующих значений
 кол-водоля
Unnamed: 000.00%
record_id00.00%
item_topic00.00%
source_topic00.00%
age_segment00.00%
dt00.00%
visits00.00%

pandas python dataframe

Статья понравилась?
Прмер определения уникальности

Проверка на уникальность

Задача:

Определить, нет ли повторов значений в колонке с номерами идентификаторов.
(проверка на уникальность значений)

import pandas as pd
dash_visits = pd.read_csv('https://eddydewrussia.ru/download/dash_visits/?wpdmdl=5230&masterkey=nLdyJ3VbW1PZ2e_TA4xbcsuZHTYHaoPLnQHpPVvTMozIw3dkLuxX5-CJKOi30tWiqjk_HX_E17pTlXEe1qE2IcJXZM099Ooh0bYFK4HBug4')
#
print(dash_visits['record_id'].nunique(), "количество уникальных значений")
print(len(dash_visits), "количестов строк в таблице")
if ((len(dash_visits) - dash_visits['record_id'].nunique()) == 0):
    print("значения в колонке не повторяются")
else: print("есть повторы")

Результат

30745 количество уникальных значений
30745 количестов строк в таблице
значения в колонке не повторяются

pandas python dataframe

Статья понравилась?