You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by cw...@apache.org on 2020/01/22 19:01:35 UTC
[druid-website-src] branch master updated: Spice up the usecases
page (#100)
This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/druid-website-src.git
The following commit(s) were added to refs/heads/master by this push:
new e8785a4 Spice up the usecases page (#100)
e8785a4 is described below
commit e8785a4d206c03b76c80855a42c082f674e356f1
Author: Vadim Ogievetsky <va...@ogievetsky.com>
AuthorDate: Wed Jan 22 11:01:25 2020 -0800
Spice up the usecases page (#100)
* test commit
* various visual improvements
Co-authored-by: asherbitter <of...@imply.io>
---
img/diagram-7.png | Bin 154044 -> 144695 bytes
scss/base.scss | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++--
scss/footer.scss | 2 +-
scss/index.scss | 2 +-
scss/variables.scss | 6 ++-
technology.md | 2 +-
use-cases.md | 50 +++++++++++++++++++++
7 files changed, 181 insertions(+), 7 deletions(-)
diff --git a/img/diagram-7.png b/img/diagram-7.png
index c57a805..d946221 100644
Binary files a/img/diagram-7.png and b/img/diagram-7.png differ
diff --git a/scss/base.scss b/scss/base.scss
index 03214ee..866ba8b 100644
--- a/scss/base.scss
+++ b/scss/base.scss
@@ -125,8 +125,8 @@ html, body {
}
.druid-header {
- padding: 24px 0 34px;
- margin-bottom: 14px;
+ padding: 34px 0 44px;
+ margin-bottom: 24px;
color: #1c1c26;
text-align: center;
background-image: url('/img/watermark-light.png');
@@ -144,7 +144,7 @@ html, body {
h4 {
font-weight: 400;
font-size: 15px;
- margin-top: -5px;
+ margin-top: 0;
margin-bottom: 0;
a {
@@ -205,6 +205,30 @@ html, body {
}
}
+.fancy-list {
+ margin-top: 22px;
+ margin-bottom: 22px;
+
+ li {
+ list-style: none;
+ font-weight: 600;
+ margin-left: 0;
+ padding-left: 30px;
+ margin-bottom: 8px;
+
+ &:before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: #9caeff;
+ }
+ }
+}
+
.features {
margin-bottom: 28px;
margin-top: 38px;
@@ -215,18 +239,21 @@ html, body {
&:nth-child(3n-2) {
.fa {
+ //color: $medium-1;
background: $light-1;
}
}
&:nth-child(3n-1) {
.fa {
+ //color: $medium-2;
background: $light-2;
}
}
&:nth-child(3n) {
.fa {
+ //color: $medium-3;
background: $light-3;
}
}
@@ -255,3 +282,96 @@ html, body {
}
}
}
+
+.zigzag-features {
+ margin-bottom: 100px;
+
+ .zigzag-feature {
+ margin-top: 100px;
+
+ .fa {
+ top: 0;
+ position: absolute;
+ width: 220px;
+ height: 220px;
+ line-height: 220px;
+ border-radius: 50%;
+ text-align: center;
+ font-size: 70px;
+ background: $light-1;
+ color: $medium-1;
+ }
+
+ &:nth-child(2n-1) {
+ padding-right: 300px;
+
+ .fa {
+ right: 0;
+ }
+ }
+
+ &:nth-child(2n) {
+ padding-left: 300px;
+
+ .fa {
+ left: 0;
+ }
+ }
+
+ &:nth-child(3n-2) {
+ .fa {
+ background: $light-1;
+ color: $medium-1;
+ }
+ }
+
+ &:nth-child(3n-1) {
+ .fa {
+ background: $light-2;
+ color: $medium-2;
+ }
+ }
+
+ &:nth-child(3n) {
+ .fa {
+ background: $light-3;
+ color: $medium-3;
+ }
+ }
+ }
+
+ @media (max-width: 840px) {
+ .zigzag-feature {
+ .fa {
+ position: relative;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px;
+ }
+
+ &:nth-child(2n-1) {
+ padding-right: 0;
+ }
+
+ &:nth-child(2n) {
+ padding-left: 0;
+ }
+ }
+ }
+
+ @media (max-width: 440px) {
+ margin-bottom: 70px;
+
+ .zigzag-feature {
+ margin-top: 70px;
+
+ .fa {
+ width: 180px;
+ height: 180px;
+ line-height: 180px;
+ font-size: 60px;
+ }
+ }
+ }
+}
diff --git a/scss/footer.scss b/scss/footer.scss
index c57a216..b8de45c 100644
--- a/scss/footer.scss
+++ b/scss/footer.scss
@@ -38,7 +38,7 @@ footer .license {
.druid-footer {
padding: 32px 0 48px 0;
- background-color: #f3f3f3;
+ background-color: $lighter-bkg;
border-top: 1px solid white;
margin-top: 50px;
diff --git a/scss/index.scss b/scss/index.scss
index 5547a64..be14a74 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -1,7 +1,7 @@
@import "variables";
.druid-masthead {
- padding: 40px 20px 32px 20px;
+ padding: 50px 20px 42px 20px;
background-color: $medium;
text-align: center;
margin: 0 auto 20px;
diff --git a/scss/variables.scss b/scss/variables.scss
index b0d046a..43fb2a5 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -1,6 +1,7 @@
$dark: #1C1C26;
$medium: #3b3b50;
-$light-bkg: #e7e7ec;
+$light-bkg: #ececf1;
+$lighter-bkg: #f2f2f5;
$light-text: #999999;
$very-light-text: #E1E1E8;
$link: #4460de;
@@ -8,5 +9,8 @@ $link-light: #9caeff;
$light-1: #cbd5ff;
$light-2: #a7f1d9;
$light-3: #ffd8a8;
+$medium-1: #5062B4;
+$medium-2: #2C8265;
+$medium-3: #926226;
$header-height: 54px;
diff --git a/technology.md b/technology.md
index 8524c3d..d506f82 100644
--- a/technology.md
+++ b/technology.md
@@ -137,7 +137,7 @@ For example, an operator can dedicate more resources to Druid’s ingestion serv
Druid services can independently fail without impacting the operations of other services.
<div class="image-large">
- <img src="img/diagram-7.png" style="max-width: 620px;">
+ <img src="img/diagram-7.png" style="max-width: 800px;">
</div>
For more information, please visit [our docs page](/docs/latest/design/index.html).
diff --git a/use-cases.md b/use-cases.md
index 633341c..edf5a89 100644
--- a/use-cases.md
+++ b/use-cases.md
@@ -11,6 +11,9 @@ Apache Druid is a database that is most often used for powering use cases where
Common application areas for Druid include:
+<div class="fancy-list">
+
+{{"
* Clickstream analytics (web and mobile analytics)
* Risk/fraud analysis
* Network telemetry analytics (network performance monitoring)
@@ -18,9 +21,17 @@ Common application areas for Druid include:
* Supply chain analytics (manufacturing metrics)
* Application performance metrics
* Business intelligence / OLAP
+" | markdownify }}
+
+</div>
Some of these use cases are described in more detail below. For an overview of technical differentiation, please see the [FAQ](/faq).
+<div class="zigzag-features">
+<div class="zigzag-feature">
+<span class="fa fa-users fa"></span>
+
+{{"
## User activity and behavior
Druid is often used for clickstreams, viewstreams, and activity streams.
@@ -33,7 +44,14 @@ Such analysis is useful is tracking user signups for a product.
Druid’s search and filter capabilities enable rapid, easy drill-downs of users along any set of attributes.
Measure and compare user activity by age, gender, location, and much more.
+" | markdownify }}
+
+</div>
+<div class="zigzag-feature">
+<span class="fa fa-project-diagram fa"></span>
+
+{{"
## Network flows
Druid is commonly used to collect and analyze network flows.
@@ -42,7 +60,14 @@ Druid is used to arbitrarily slice and dice flow data along any set of attribute
Druid helps with network flow analysis by being able to ingest large amounts of flow records, and by being able to group or rank across dozens of attributes at query time at interactive speeds.
These attributes often include core attributes like IP and port, as well as attributes added through enhancement such as geolocation, service, application, facility, and ASN.
Druid's ability to handle flexible schemas means that you can add any attributes you want.
+" | markdownify }}
+
+</div>
+
+<div class="zigzag-feature">
+<span class="fa fa-comments-dollar fa"></span>
+{{"
## Digital marketing
Druid is commonly used to store and query online advertising data.
@@ -52,7 +77,14 @@ Druid was initially designed to power a user-facing analytics application for di
Druid has seen substantial production use for this type of data and the largest users in the world have petabytes of data stored on thousands of servers.
Druid can be used to compute impressions, clicks, eCPM, and key conversion metrics, filtered on publisher, campaign, user information, and dozens of other dimensions supporting full slice and dice capability.
+" | markdownify }}
+</div>
+
+<div class="zigzag-feature">
+<span class="fa fa-tachometer-alt fa"></span>
+
+{{"
## Application performance management
Druid is often used to track the operational data generated by applications.
@@ -62,7 +94,14 @@ Druid can be used to drill into how different components of an application are p
Unlike many traditional solutions, there are few limits to the volume, complexity, and throughput of the data.
Rapidly analyze application events with thousands of attributes, and compute complex metrics on load, performance, and usage.
For example, rank API endpoints based on 95th percentile query latency, and slice and dice how these metrics change based on any ad-hoc set of attributes such as time of day, user demographic, or datacenter location.
+" | markdownify }}
+
+</div>
+
+<div class="zigzag-feature">
+<span class="fa fa-thermometer-three-quarters fa"></span>
+{{"
## IoT and device metrics
Druid can be used as a time series solution for server and device metrics.
@@ -76,7 +115,14 @@ This means time-based queries, numerical aggregations, and search and filter que
You can include millions of unique dimension values with your metrics, and arbitrarily group and filter on any combination of dimensions (dimensions in Druid are similar to tags in TSDBs).
You can group and rank on tags, and compute a variety of complex metrics.
Furthermore, you search and filter on tag values orders of magnitude faster than in traditional timeseries databases.
+" | markdownify }}
+</div>
+
+<div class="zigzag-feature">
+<span class="fa fa-chart-pie fa"></span>
+
+{{"
## OLAP and business intelligence
Druid is commonly used for BI use cases.
@@ -86,3 +132,7 @@ In general this makes Druid a better fit for truly interactive visual analytics.
Druid is a great fit if you need a user-facing application and you want your users to be able to run their own self service drill-down queries.
You can either develop your own application using Druid's API or use one of the [many off the shelf applications](/libraries) that work with Druid.
+" | markdownify }}
+
+</div>
+</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org