Автор оригинала: FreeCodeCapm Team.
Дебора Мескита
D3.js – это удивительная библиотека JavaScript, но она имеет очень крутущую кривую обучения. Это делает задачу построению ценной визуализации что-то, что может принять много усилий. Это дополнительное усилие в порядке, если ваша цель состоит в том, чтобы сделать новые и творческие визуализации данных, но часто это не так.
Часто ваша цель может быть просто Чтобы создать интерактивную визуализацию с некоторыми известными графиками Отказ И если вы не инженер-интерфейс, это может стать немного сложно.
Как ученые данные, одна из наших основных задач – манипуляция данных. Сегодня основной инструмент, который я использую для этого Пандас (Python). Что если я скажу вам это Вы Может создать несколько красивых и интерактивных графиков для Интернета прямо с ваших PandaS DataFrames ? Ну, ты можешь! Мы можем использовать Сюжер для этого.
Для записи также есть и залоговые библиотеки API для MATLAB, R и JavaScript, но мы будем придерживаться библиотеки Python здесь.
Быть справедливым, заговорно построен На вершине D3.js (и Stack.gl) Отказ Главное отличие между D3 и DRUPLY так, что заговорно специально Библиотека графики Отказ
Давайте построим гистограмму, чтобы узнать, насколько заговорно работает.
Строительство гистограммы с зенитным
Существует 3 основных концепция в философии сюжета:
- Данные
- Макет
- Фигура
Данные
Объект данных определяет то, что мы хотим отображать на графике (то есть данные). Мы определяем сбор данных и спецификации для отображения их как трассировка Отказ Объект данных может иметь много следов. Думайте о диаграмме линии с двумя линиями, представляющими две разные категории: каждая строка является трассировкой.
Макет
Объект Layout определяет функции, которые не связаны с данными (например, заголовки, названиями осей и т. Д.). Мы также можем использовать макет для добавления аннотаций и форм на график.
Фигура
Объект рисунка создает окончательный объект, который будет нанесен. Это объект, который содержит как данные, так и макет.
Сюжено визуализация построены с Plotly.js. Это означает, что Python API просто Пакет для взаимодействия с библиотекой Plotly.js Отказ Plotly.graph_objs Модуль содержит функции, которые будут генерировать для нас объекты графа.
Хорошо, теперь мы готовы построить гистограмму:
import plotly.graph_objs as goimport pandas as pdimport plotly.offline as offline
df = pd.read_csv("data.csv")df_purchases_by_type = df.pivot_table( index = "place", columns = "date", values = "price", aggfunc = "sum" ).fillna(0)
trace_microbar = go.Bar( x = df_purchases_by_type.columns, y = df_purchases_by_type.loc["MICROBAR"])
data = [trace_microbar]
layout = go.Layout(title = "Purchases by place", showlegend = True)
figure = go.Figure(data = data, layout = layout)
offline.plot(figure)
Примечание. В этой статье мы не будем говорить о том, что я делаю с Dataframes. Но если вы хотите пост об этом, дайте мне знать в комментариях?
Хорошо, сначала мы хотим показать бары одной категории (место под названием «Микробар» ). Итак, мы создаем объект данных (список) с Go.bar () (след) Указание данных для осей X и Y. Trace – это словарь и данные – это список словарей. Вот trace_microbar Содержание (обратите внимание на клавишу типа):
{'type': 'bar', 'x': Index(['23/03/2018', '24/03/2018', '25/03/2018'], dtype='object', name='date'), 'y': date 23/03/2018 0.0 24/03/2018 0.0 25/03/2018 56.0 Name: MICROBAR, dtype: float64}В объекте макета мы устанавливаем название диаграммы и параметр ShowleGend. Затем мы обертываем данные и макет на рисунке и звоните Plotly.offline.plot () отображать диаграмму. У DEATLY имеет различные варианты отображения диаграмм, но давайте придерживайтесь в автономном режиме здесь. Это откроет окно браузера с нашей таблицей.
Я хочу отобразить все в сложенном гистограмме, поэтому мы создадим список данных со всеми следами (местами), которые мы хотим отображать и установить бармед Параметр на стек Отказ
import plotly.graph_objs as goimport pandas as pdimport plotly.offline as offline
df = pd.read_csv("data.csv")df_purchases_by_place = df.pivot_table(index="place",columns="date",values="price",aggfunc="sum").fillna(0)
data = []
for index,place in df_purchases_by_place.iterrows(): trace = go.Bar( x = df_purchases_by_place.columns, y = place, name=index ) data.append(trace)
layout = go.Layout( title="Purchases by place", showlegend=True, barmode="stack" )
figure = go.Figure(data=data, layout=layout)
offline.plot(figure)
И это основы сюрмо. Чтобы настроить наши диаграммы, мы устанавливаем разные параметры для следов и макета. Теперь давайте пойдем вперед и поговорим о визуализации Lollapalooza.
Мой опыт lollapalooza
Для издания 2018 года Lollapalooza Бразилия все покупки были сделаны через браслет с поддержкой RFID. Они отправляют данные на ваш адрес электронной почты, поэтому я решил взглянуть на него. Что мы можем узнать обо мне и моем опыте, анализировав покупки, которые я сделал на фестивале?
Вот как выглядит данные:
- Дата покупки
- Час покупки
- продукт
- количество
- сцена
- место, где я сделал покупку
Основываясь на этих данных, давайте ответим на несколько вопросов.
Куда я ездил во время фестиваля?
Данные только говорят нам название места, где я сделал покупку, и фестиваль состоялся в AutoDroomo de Interlagos. Я взял карту с этапами из здесь и использовал инструмент GeOreferencer из georeference.com Чтобы получить широту и долготу координаты для этапов.
Нам нужно отобразить карту и маркеры для каждой покупки, поэтому мы будем использовать Mapbox и scattermapbox след. Сначала давайте построим только этапы, чтобы увидеть, как это работает:
import plotly.graph_objs as goimport plotly.offline as offlineimport pandas as pd
mapbox_token = "" #https://www.mapbox.com/help/define-access-token/
df = pd.read_csv("stages.csv")trace = go.Scattermapbox( lat = df["latitude"], lon = df["longitude"], text=df["stage"], marker=go.Marker(size=10), mode="markers+text", textposition="top" )
data = [trace]
layout = go.Layout( mapbox=dict( accesstoken=mapbox_token, center=dict( lat = -23.701057, lon = -46.6970635 ), zoom=14.5 ) )
figure = go.Figure(data = data, layout = layout)
offline.plot(figure)
Давайте узнаем новый параметр макета: Updatemenus Отказ Мы будем использовать это, чтобы отобразить маркеры по дате. Есть четыре возможных Обновление методов :
"Restyle": Изменить данные или атрибуты данных"Relayout": Изменить атрибуты макета«Обновление»: изменить данные и атрибуты макета"Анимация": запуск или пауза анимация Несомненно
Чтобы обновить маркеры, нам нужно только изменять данные, поэтому мы будем использовать "Restyle" метод. При рестайве вы можете установить изменения для каждого следа или для всех следов. Здесь мы устанавливаем каждый трассу, чтобы быть видимым только тогда, когда пользователь меняет опцию выпадающего меню:
import plotly.graph_objs as goimport plotly.offline as offlineimport pandas as pdimport numpy as np
mapbox_token = ""
df = pd.read_csv("data.csv")df_markers = df.groupby(["latitude","longitude","date"]).agg(dict(product = lambda x: "%s" % ", ".join(x), hour = lambda x: "%s" % ", ".join(x)))df_markers.reset_index(inplace=True)
data = []update_buttons = []
dates = np.unique(df_markers["date"])
for i,date in enumerate(dates): df_markers_date = df_markers[df_markers["date"] == date] trace = go.Scattermapbox( lat = df_markers_date["latitude"], lon = df_markers_date["longitude"], name = date, text=df_markers_date["product"]+"
"+df_markers_date["hour"], visible=False ) data.append(trace)
visible_traces = np.full(len(dates), False) visible_traces[i] = True
button = dict( label=date, method="restyle", args=[dict(visible = visible_traces)] ) update_buttons.append(button)
updatemenus = [dict(active=-1, buttons = update_buttons)]
layout = go.Layout( mapbox=dict( accesstoken=mapbox_token, center=dict( lat = -23.701057, lon = -46.6970635), zoom=14.5), updatemenus=updatemenus )
figure = go.Figure(data = data, layout = layout)
offline.plot(figure)
Как я потратил свои деньги?
Чтобы ответить на это, я создал гистограмму с моими расходами для еды и напитков каждый день и построил тепловую карту, чтобы показать, когда я купил вещи. Мы уже видели, как построить гистограмму, поэтому теперь давайте построим диаграмму радиатора:
import plotly.graph_objs as goimport pandas as pdimport plotly.offline as offline
df = pd.read_csv("data.csv")df_purchases_by_type = df.pivot_table(index="place",columns="date",values="price",aggfunc="sum").fillna(0)df["hour_int"] = pd.to_datetime(df["hour"], format="%H:%M", errors='coerce').apply(lambda x: int(x.hour))
df_heatmap = df.pivot_table(index="date",values="price",columns="hour", aggfunc="sum").fillna(0)
trace_heatmap = go.Heatmap( x = df_heatmap.columns, y = df_heatmap.index, z = [df_heatmap.iloc[0], df_heatmap.iloc[1], df_heatmap.iloc[2]] )
data = [trace_heatmap]
layout = go.Layout(title="Purchases by place", showlegend=True)
figure = go.Figure(data=data, layout=layout)
offline.plot(figure)
Какие концерты я смотрел?
Теперь пойдем в самую крутую часть: могу ли я догадаться, что концерты, которые я посещал на основе моих покупок?
В идеале, когда мы смотрим шоу, мы являются наблюдая за шоу (и не покупать вещи), поэтому покупки должны быть сделаны до или после каждый концерт. Затем я сделал список каждого концерта, происходящего на час до одного часа после, и, согласно времени, когда была сделана покупка.
Чтобы узнать, какой из этих шоу я присутствовал, я рассчитал расстояние от местоположения покупки на каждый этап. Присутствовавшие я присутствовал, должны быть те, что с максимальным расстоянием до уступок.
Как мы хотим показать каждую точку данных, лучший выбор для визуализации – это таблица. Давайте построим одну:
import plotly.graph_objs as goimport plotly.offline as offlineimport pandas as pd
df_table = pd.read_csv("concerts_I_attended.csv")def colorFont(x): if x == "Yes": return "rgb(0,0,9)" else: return "rgb(178,178,178)"
df_table["color"] = df_table["correct"].apply(lambda x: colorFont(x))
trace_table = go.Table( header=dict( values=["Concert","Date","Correct?"], fill=dict( color=("rgb(82,187,47)")) ), cells=dict( values= [df_table.concert,df_table.date,df_table.correct], font=dict(color=([df_table.color]))) )data = [trace_table]
figure = go.Figure(data = data)
offline.plot(figure)
Три концерта пропали, и четыре не были неправильными, давая нам прецизию на 67% и вспоминать на 72%.
Положить все это вместе: dash
У нас есть все графики, но цель – поставить их все вместе на странице. Для этого мы будем использовать Dash (по сюжету).
Dash написан на верхней части колбы, Plotly.js и ract.js. Работает очень похожими на то, как мы создаем графические графики:
import dashimport dash_core_components as dccimport dash_html_components as htmlimport plotly.graph_objs as goimport pandas as pd app = dash.Dash()
df_table = pd.read_csv("concerts_I_attended.csv").dropna(subset=["concert"])def colorFont(x): if x == "Yes": return "rgb(0,0,9)" else: return "rgb(178,178,178)"df_table["color"] = df_table["correct"].apply(lambda x: colorFont(x))
trace_table = go.Table(header=dict(values=["Concert","Date","Correct?"],fill=dict(color=("rgb(82,187,47)"))),cells=dict(values=[df_table.concert,df_table.date,df_table.correct],font=dict(color=([df_table.color]))))data_table = [trace_table]
app.layout = html.Div(children=[ html.Div( [ dcc.Markdown( """ ## My experience at Lollapalooza Brazil 2018 *** """.replace(' ', ''), className='eight columns offset-by-two' ) ], className='row', style=dict(textAlign="center",marginBottom="15px") ),html.Div([ html.Div([ html.H5('Which concerts did I attend?', style=dict(textAlign="center")), html.Div('People usually buy things before or after a concert, so I took the list of concerts, got the distances from the location of the purchases to the stages and tried to guess which concerts did I attend. 8 concerts were correct and 3 were missing from a total of 12 concerts.', style=dict(textAlign="center")), dcc.Graph(id='table', figure=go.Figure(data=data_table,layout=go.Layout(margin=dict(t=30)))), ], className="twelve columns"), ], className="row")])app.css.append_css({ 'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})if __name__ == '__main__': app.run_server(debug=True)
Круто верно?
Я проложил последнюю визуализацию здесь и весь код здесь Отказ
Существуют некоторые альтернативы для размещения визуализации: DASH имеет общедоступный прилагающий приложение, а Potelly также предоставляет веб-сервис для хостинга графиков.
Вы нашли эту статью полезную? Я стараюсь изо всех сил, чтобы написать глубокую акустическую статью каждый месяц, вы можете Получите электронное письмо, когда я публикую новый Отказ
У меня был довольно хороший опыт с заговорной, я определенно буду использовать его для моего следующего проекта. Каковы ваши мысли об этом после этого обзора? А какие другие инструменты вы используете для создания визуализации для Интернета? Поделитесь ими в комментариях! И спасибо за чтение! ?