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 <[email protected]>
AuthorDate: Wed Jan 22 11:01:25 2020 -0800
Spice up the usecases page (#100)
* test commit
* various visual improvements
Co-authored-by: asherbitter <[email protected]>
---
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: [email protected]
For additional commands, e-mail: [email protected]
