В субботу, 7 января, издание The Times сообщило, что десять из 11 трастов Национальной службы здравоохранения были обвинены в систематическом манипулировании 999 сроками реагирования, используя лазейку, чтобы заявить, что они достигли опасной для жизни ситуации менее чем за десять секунд.
В дополнение к этому, результаты запроса о свободе информации показали, что только один из 13 трастов достиг восьми минут, чтобы ответить на призывы о жизни или смерти.
Для нас в команде разработчиков этот проект стал поводом опробовать несколько вещей.
Проект под руководством разработчиков
В ноябре я выделил время, чтобы начать создание прототипа того, что, как я думал, мы могли бы сделать с набором данных, над которым работал Луи. Я хотел, чтобы основные функции были отсортированы, прежде чем передавать их дизайну.
Создание проекта с самого начала, с точки зрения данных и разработчика, в конечном итоге облегчило нашу жизнь. Первая итерация, показанная выше, вела проект через всю его жизнь.
Однако это тонкая грань, поскольку мы не хотели, чтобы это ограничивало историю. Целью моего первого прототипа было сделать работу остальной части разработчика намного более эффективной.
И вроде как. Я избавлю вас от деталей постоянного обмена информацией между нами, новостной стойкой и дизайном, и просто скажу вам, что пока определялись цвета, разрабатывались дизайны и обратная связь подавалась, я был выполнение сантехнических и закулисных работ. Распараллеливание нравится всем, потому что никто больше не ждет.
Наличие рабочего прототипа на раннем этапе поставило меня в положение, в котором я также мог иметь довольно хорошее представление о том, что мне нужно в отношении данных. Я работал в тесном сотрудничестве с командой данных над настройкой и изменением структуры данных, чтобы она была удобной и избегала вычислений на стороне клиента.
Но что особенно важно, мне нужна была техническая осуществимость, чтобы управлять проектом, в сотрудничестве с данными и группами разработчиков. Бонусные баллы, если это можно сделать в короткие сроки.
React и D3 вместе
Начиная этот проект, я сосредоточился исключительно на гистограмме. Весь код находился в ветке prototype, которая представляла собой грязные простые файлы HTML и JS. Как только я доволен, я сразу же заново реализовал все в React.
Заставляем его работать постепенно.
С архитектурной точки зрения, контейнер отвечал за выборку данных и обработку базовой d3.csv() операции, передавая вложенную структуру данных вниз компоненту диаграммы:
fetchData() {
const _this = this;
d3.csv("data/data_new2.csv", function(error, data) {
// takes our data and groups it by postcode
// we end up with one row per year
const data_nest = d3.nest()
.key(function(d) { return d.postcode})
.entries(data);
_this.setState ({
dataset: data_nest
})
});
}
Компонент диаграммы будет отображать диаграмму SVG и на componentDidMount() / componentDidUpdate() вызывать стандартную функцию draw(), в которой мы написали наш стандартный код D3.
// Component lifecycle handling
componentDidMount() {
const dataset = this.props.dataset();
}
componentDidUpdate() {
const postcode = this.props.postcode;
const _this = this;
for (let i=0; i<this.props.data.length; i++) {
if(this.props.data[i].key === postcode) {
_this.draw(this.props.data[i].values, "year", "median");
}
}
Да, я знаю. const _this = this; особенно неэлегантен. И React, и D3 довольно широко используют this, а недооцененное подчеркивание позволяет нам выйти за рамки и, надеюсь, уйти от этого, если не будет обзора кода.
Результат: ошеломляющий уровень вовлеченности.
Это приложение React было встроено в статьи как на настольных компьютерах, так и на планшетах. Из 16 000 просмотров у нас было более 14 000 поисков по почтовому индексу. Что составляет 87% вовлеченности!
Два предложенных почтовых индекса (SE1 и N16) были соответственно первым и пятым по популярности поисковыми запросами в целом. Стратфорд-на-Эйвоне (CV37), как ни странно, оказался вторым по популярности.
Более того, 87% вовлеченности являются огромными, и это означает, что наше время было хорошо потрачено на этот проект.
Похожее приложение React «исследуйте наши данные», которое мы разместили ранее в декабре, имело однозначный показатель вовлеченности:
Кажется, что формулировка могла сыграть важную роль. После очень открытого выбора в приложении для иностранной помощи мы выбрали довольно прямой вариант «введите свой почтовый индекс». Мы предложили поискать оба проекта.
Авторы Кэти Гиббонс, Луи Годдард, Сэм Джойнер и я.
Вы можете прочитать две истории здесь, зарегистрировавшись и получив доступ к двум статьям в неделю бесплатно:
