Charts
Sparklines in Big Number charts
Chart annotations
Chart heights
Choropleth map
Bullet chart
Force-directed graph
Links in Big Number charts
Geographic heat map
Heat map
Hive plot
How to implement gallery examples using the HTML editor
Funnel chart
Google Maps with markers
Horizontal bar chart
Network matrix
Creating Chart Annotations using Matplotlib
How to Create R Histograms & Stylize Data
Creating Horizontal Bar Charts using R
Creating Histograms using Pandas
State choropleth map
Sunburst chart
Creating Horizontal Bar Charts using Pandas
Word cloud
World choropleth map
Zipcode choropleth map
Word cloud
Word clouds allow you to quickly identifying the most common terms from a dataset of free-form text.
Here's an example word cloud using San Francisco crime incident descriptions.
Click Powered by Mode to clone the example and make a word cloud. Learn more about using HTML to customize your reports.
Create a word cloud
Add the stylesheet link and script tags to the top of the HTML:
<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="//cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
Add the customizable snippet at the bottom of the HTML:
<script>
alamode.wordCloud(
{
query_name: "SF Crime Incidents",
height: "400",
width: "700",
word_column: "keyword",
word_count_column: "frequency",
colors: ["#37B067","#22A3C0"]
}
)
</script>
You can customize the word cloud by editing the parameters in the snippet:
html_element
: If not provided, the funnel will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.query_name
: The name of the query that returns the word cloud's dataset. If you update the name of the query, you’ll need to update it here as well.height
: The height of the word cloud in pixels.width
: The width of the word cloud in pixels.word_column
: The dataset column that defines the words you want to display. (The Postgres functionREGEXP_SPLIT_TO_TABLE
can be helpful for creating this data in your query.)word_count_column
: The dataset column that defines how frequently each word appears and how large each word should be.colors
: An array of hex codes that defines the text colors. You can find a library of hex color codes here.