185 строки
8.2 KiB
HTML
185 строки
8.2 KiB
HTML
---
|
|
layout: default
|
|
title: Home
|
|
blackfooter: true
|
|
---
|
|
|
|
<section class="home-header" style="background-image: url({{ '/images/hex-gallery-faded.png' | thumbnail_image: '1920x1080^' | cdn_url }})">
|
|
<p class="el-description">
|
|
Create Bespoke Chart Designs without Programming
|
|
</p>
|
|
<p>
|
|
<a class="btn-launch-large" href="{{ '/app/index.html' | relativize_url }}" role="button" onclick="trackAppLaunch()">
|
|
Launch Charticulator
|
|
</a>
|
|
</p>
|
|
<p class="el-note">
|
|
Charticulator requires the use of a mouse or touch screen.
|
|
</p>
|
|
<p class="el-note">
|
|
Compatible with
|
|
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>,
|
|
<a href="https://www.google.com/chrome/">Google Chrome</a>,
|
|
and <a href="//www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>.
|
|
</p>
|
|
<p class="el-opensource">
|
|
Free and Open Source from Microsoft Research
|
|
</p>
|
|
<p class="el-github">
|
|
<a class="github-button" href="https://github.com/Microsoft/charticulator" aria-label="Microsoft/charticulator on GitHub">Browse the Source Code</a>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="page-section message-section">
|
|
<p>We thank all the users that have been interested in using Charticulator. We no longer have the resources to keep Charticulator up-to-date with the requirements for accessibility and security that Microsoft requires of all its software. <b>Charticualtor will be retired at the end of this year (December 31, 2023).</b> Both the application and website, however, are open-sourced. We hope others can continue to use and improve it.</p>
|
|
</section>
|
|
|
|
<section class="page-section home-section">
|
|
<div class="columns-container">
|
|
<div class="columns-5 home-section-image">
|
|
<img src="{{ '/images/charticulator-visual.png' | cdn_url }}" alt="Microsoft Charticulator Visual" />
|
|
</div>
|
|
<div class="columns-3 home-section-description">
|
|
<h2>Microsoft Charticulator Visual</h2>
|
|
<p>Microsoft Charticulator visual enables you to create a wide range of custom chart designs <b>right within Power BI</b>.</p>
|
|
<img src="{{ '/images/pbi-certified.svg' | cdn_url }}" alt="Power BI Certified" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="content-shade">
|
|
<section class="page-section home-section">
|
|
<div class="columns-container">
|
|
<div class="columns-5 home-section-image">
|
|
<img src="{{ '/images/fast-forward.gif' | cdn_url }}" alt="Interactive Chart Creation" />
|
|
</div>
|
|
<div class="columns-3 home-section-description">
|
|
<h2>Interactive Chart Creation</h2>
|
|
<p>Charticulator enables you to create bespoke and reusable chart layouts without writing any code.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="page-section home-section">
|
|
<div class="columns-container">
|
|
<div class="columns-3 home-section-description is-right">
|
|
<h2>Infinite Design Possibilities</h2>
|
|
<p>Charticulator enables you to compose a wide range of visual representations.<br />See more examples in our <a href="gallery/">gallery</a>.</p>
|
|
</div>
|
|
<div class="columns-5 home-section-image">
|
|
<div class="el-image" id="img-slideshow" alt="Infinite Design Possibilities" />
|
|
</div>
|
|
<script type="text/javascript">
|
|
(function() {
|
|
// Define the slideshow images. Jekyll is going to convert the "{{...}}" syntax to correct urls
|
|
var imageList = [
|
|
"{{ '/images/gallery/boston_seattle_weather.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/co2_emission_ranking.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/global_trade_of_natural_resources.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/polio_map_alternative.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/polio_map_small_multiples.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/polio.png' | thumbnail_image: '640x480^' | cdn_url }}",
|
|
"{{ '/images/gallery/world_greenhouse_gas_emissions.png' | thumbnail_image: '640x480^' | cdn_url }}"
|
|
];
|
|
function switchToImage(img) {
|
|
let oldElements = Array.from(document.getElementById("img-slideshow").children);
|
|
let div = document.createElement("div");
|
|
document.getElementById("img-slideshow").append(div);
|
|
div.style.backgroundImage = "url(" + img.src + ")";
|
|
window.getComputedStyle(div).opacity;
|
|
div.style.opacity = 1;
|
|
setTimeout(function() {
|
|
oldElements.forEach(function(e) { e.remove(); });
|
|
}, 500);
|
|
}
|
|
function loadImage(imageURL, callback) {
|
|
let img = new Image();
|
|
let isCanceled = false;
|
|
let timeout = setTimeout(function() {
|
|
isCanceled = true;
|
|
callback();
|
|
}, 5000);
|
|
img.onload = () => {
|
|
if(!isCanceled) {
|
|
clearTimeout(timeout);
|
|
callback();
|
|
switchToImage(img);
|
|
}
|
|
};
|
|
img.src = imageURL;
|
|
}
|
|
// Switch images randomly
|
|
let currentImage = null;
|
|
function randomSwitchImage() {
|
|
while(true) {
|
|
let index = Math.floor(Math.random() * imageList.length);
|
|
if(index < imageList.length) {
|
|
if(imageList[index] != currentImage) {
|
|
currentImage = imageList[index];
|
|
loadImage(currentImage, function() {
|
|
setTimeout(randomSwitchImage, 3000)
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
randomSwitchImage();
|
|
})();
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="content-shade">
|
|
<section class="page-section home-section">
|
|
<div class="columns-container">
|
|
<div class="columns-5 home-section-image">
|
|
<img src="{{ '/images/powerbi-visual.png' | thumbnail_image: '1200x900^' | cdn_url }}" alt="Reusable Chart Designs" />
|
|
</div>
|
|
<div class="columns-3 home-section-description">
|
|
<h2>Reusable Chart Designs</h2>
|
|
<p>Charticulator lets you export chart designs into reusable templates including Microsoft Power BI custom visuals.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="page-section home-section home-quotes">
|
|
<h1 style="text-align: center">What people say about Charticulator</h1>
|
|
<blockquote>
|
|
The Charticulator - an amazing way to generate totally new/original/amazing custom visuals for Power BI without
|
|
writing a single line of code.
|
|
Fantastic work by the folks at Microsoft Research here.
|
|
<footer>—
|
|
Amir Netz (Technical Fellow at Microsoft, CTO of Power BI & Intelligence Platform) </footer>
|
|
</blockquote>
|
|
<h1 style="text-align: center">What people made with Charticulator</h1>
|
|
<div class="columns-container" style="align-items: flex-start;">
|
|
<div class="columns-3" style="overflow: hidden;">
|
|
<a href="https://twitter.com/Nsnapp/status/1107798086754013185">
|
|
<img src="{{ '/images/tweets/tweet1.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by Nick Snapp" />
|
|
</a>
|
|
</div>
|
|
<div class="columns-3" style="overflow: hidden;">
|
|
<a href="https://twitter.com/Kocky/status/1081650965193854976">
|
|
<img src="{{ '/images/tweets/tweet2.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by Dennis de Kock" />
|
|
</a>
|
|
</div>
|
|
<div class="columns-3" style="overflow: hidden;">
|
|
<a href="https://twitter.com/dataveld/status/1076849513158066176">
|
|
<img src="{{ '/images/tweets/tweet3.png' | thumbnail_image: '800x800^' | cdn_url }}" alt="Chart design by David Eldersveld" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="content-inverted">
|
|
<section class="page-section home-section home-section-last">
|
|
<video style="max-width: 100%" controls preload="auto" poster="{{ '/videos/charticulator-supplemental-poster.png' | cdn_url }}"
|
|
onplay="trackVideoPlay()">
|
|
<source src="{{ '/videos/charticulator-supplemental.mp4' | cdn_url }}">
|
|
</source>
|
|
</video>
|
|
</section>
|
|
</div> |