Skip to content

Instantly share code, notes, and snippets.

@jasonkolb

jasonkolb/_.md

Last active August 29, 2015 14:19
Show Gist options
  • Save jasonkolb/1cd10651f67720d324f9 to your computer and use it in GitHub Desktop.
Save jasonkolb/1cd10651f67720d324f9 to your computer and use it in GitHub Desktop.
Download ZIP
Configurator
Raw
_.md
Raw
config.json
{"description":"Configurator","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"landingPage.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/pEDQMaw.png","ajax-caching":true}
Raw
index.html
"Business.js: Understanding and communicating complex value propositions using code." Post to startups.inheadlines.com, post that link to HN.
<div class="landingPage">
<li>What do want? Find million dollar ideas / Implement milion dollar ideas
<li>What do you need? (customers to convert)</li>
<li>What's stopping you? (We don't have a data team)</li>
<li>Here's what you need: (Let our team of data scientists)</li>
<li>Specifically, these features will solve your problem: (managed service)</li>
<div id="road">
</div>
<p>
Here are your options:
</p>
<div id="pricing-table" class="clear">
<div class="plan">
<h3>We can't act on the ideas we have<span>Call</span></h3>
<a class="signup" href="">Get Out of the Weeds Edition</a>
<ul>
<li><b>Idea collaboration threads</b></li>
<li>Our <b>idea prioritization</b> algorithm and software</li>
<li>Our proprietary <b>value consensus-building</b> add-on</li>
<li><b>Up to 10,000 users</b></li>
<li><b>Personlization and relevance targeting</b> for matching ideas to interested users</li>
<li><b>Action tracking</b> so you can see what's being done and if it's effective</li>
<li><b>The Late Edition</b> for every user, which periodically shows them what they shouldn't be missing.</li>
</ul>
</div>
<div class="plan" id="most-popular">
<h3>We don't have the right tools<span>Call</span></h3>
<a class="signup" href="">Just Tell Me What To Do Edition</a>
<ul>
<li><i>Everything from the Out of the Weeds Edition <b>PLUS</b></i></li>
<li><b>The Data Lab</b>, a world-class embedded analytics platform that you can use to <b>find ideas</b></li>
<li><b>Seamlessly integrate data from the lab with collaboration threads</b></li>
<li>Simplified <b>end-user data exploration</b> to provide detail and context</li>
<li>An integrated <b>feedback loop</b> to inform the data team of what people are interested in knowning </li>
</ul>
</div>
<div class="plan">
<h3>We don't have the time<span>Call</span></h3>
<a class="signup" href="">White Glove Edition</a>
<ul>
<li><i>Everything from the Tell Me What To Do Edition <b>PLUS</b></i></li>
<li>A <b>team of our data scientists</b> working every week to bring ideas out of your data and to your attention</li>
<li><b>Third-party data augmentations</b> to get the most out of your data</li>
</ul>
</div>
</div>
<div class="center">
<h2>In your data?</h2>
<p>
Your customers have a lot to say about opportunities to give them what they want, warnings about what they don't want, and what you're doing right and wrong. They tell you these business-changing ideas via your data.
</p>
<p>
That's why we've built The Data Laba: a world-class data analytics platform directly into headlines--so the ideas can flow directly from the data to the people who need to see them.
</p>
<h2>In other data?</h2>
<p>
You can learn a lot from external data: who your customers are, how they feel about your products. You can find out how old they are, how much money they make, and what their communities are like. Couple this with what they're saying to hone in on the moves you need to make.
</p>
<p>
That's why we augment all the data that comes into our system with third-party data sources such as the U.S. Census.
</p>
<h2>From your own people?</h2>
<p>
Are your ideas being heard? You probably work with some really smart people. Do you know what all of them think would be a good idea?
We believe that everyone has something of value to say and that by truly paying attention to what is being said a
</p>
<p>
That's why we've built a unique crowd-based prioritization system. It shows people ideas relevant to them and gives them a chance to weigh in. It's built to prompt movement and follow-through around the ideas that the organization as a whole finds important.
</p>
</div>
</div>
Raw
inlet.js
(function(){
var features = {};
var valueProps = {};
features = {
"dataLab": {
description: "The Data Labs is a world-class data analytics platform built entirely in a responsive Web environment. You can run analyses on millions of records from your cell phone. The interface is tailored to help the data scientist build an analysis that answers real business questions--built on the Data Feedback Loop. Analyses are fed directly into the Headlines delivery mechanism where they can be collaborated on and acted on.",
linksTo: [ "dataFeedbackLoop", "deliveryMechanism", "UI" ],
alertnative: "Try to find a Web-based analytics platform that's also capable of deep anaytical data exploration. Good luck."
},
"dataIntegration": {
description: "You can learn a lot from external data: who your customers are, how they feel about your products. You can find out how old they are, how much money they make, and what their communities are like. Couple this with what they're saying to hone in on the moves you need to make.",
linksTo: [ "dataFeedbackLoop", "deliveryMechanism", "deepAnalytics" ],
alertnative: "Paying market research firms for surveys."
},
"deepAnalytics": {
description: "A dynamic multi-dimensional analytics platform. Exposes correlations and relationships and enourages active and interactive data exploration by the data scientist.",
alernative: "An advanced (and expensive) multi-dimensional data anlytics tools such as Business Objects"
},
"valueConsensus":{
description: "Use the power of the crowd to arrive at a consensus around how much each idea is worth",
linksTo: [ "collaboration", "crowdsourcing", "actionTracking" ],
alternative: "Attempt to use email for a long and complex discussion, or try to shoehorn a collaboration tool into something that will work."
},
"collaboration": {
alternative: "Collaboration platforms such as Chatter, Yammer, or Sharepoint."
},
"deliveryMechansim": {
description: "Use a system that learns what's important to each individual and delivers a list of relevant ideas specifically tailored to them on a periodic basis",
alternative: "Manually compile and send out a list of every idea that's relevant to each individual person."
},
"crowdsourcing": {
},
"UI": {
description: "A responsive Web interfaces allows end users to see the ideas and drill into the data if they want to."
},
"lateEdition": {
description: "A periodic emailed digest of the ideas and headlines that the individual user will be interested in seeing, as well as any updates to ideas that they've previously engaged with."
},
"actionTracking": {
description: "Track what happens with an idea and how it's actually used. Stay in the loop on ideas that you're interested in, and use the crowd-sourced value estimation function to figure out exactly what your actions are worth, so you can make better decisions down the road.",
linksTo: ["collaboration", "lateEdition", "valueConsensus"]
},
"demographicData": {
description: "Demographic data allows you to see who your customers are specifically -- their age, race, income, education level, and so on."
},
"userInterestTracking": {
description: "Users are encouraged to share their interests so that the ideas they see can be targeted. In addition, user engagement with ideas is tracked so that the system can learn the characteristics of ideas that get traction."
},
"interestAnalytics": {
description: "The statistics on what end users are interested in, and the characteristics of which ideas engage users are fed to the data team. This feedback loop helps the data team continually build analyses that are more and more targeted at the types of ideas that the organization is interested in.",
linksTo: ["valueConsensus", "userInterestTracking"]
},
"channelFromScientistsToBusinessUsers": {
description: "The interactions between the data team and the business end users has been carefully tailored to ensure that business users aren't overwhelmed with tables and figures, but the data's there if they need it. At the same time, the data team doesn't have to worry about simplifying it for their non-technical audience."
},
"managedService": {
description: "A team of Applied Data Labs scientists who will analyze your data for you and deliver the insights that they find."
},
"learn": {
description: "As people use the system, you'll see the crowd determine the value of ideas, and then track actions related to implementing those ideas to see the real returns.",
linksTo: ["valueConsenus", "actionTracking"]
}
};
var pain = {
"fireHunting": {
pain: "I need to spot fires that need to be put out",
aspirin: "Clarabridge"
},
"mostProfitableCustomers": {
pain: "I need to know who my best customers are",
aspirin: "Combine purchase history data with demographic data to find out who your ideal customer is."
},
"whatCustomersThink": {
pain: "I need to know what my customers think about my brand/product/marketing.",
aspirin: "Analyzing customer suggestions, questions, and complaints can tell you this information. Sentiment analysis can tell you at a broad level, but drilling into the specific cases will you exactly what people think."
},
"changingTastes": {
pain: "I need to know what my customers want before it becomes obvious.",
aspirin: "You need to harness your Customer Interaction data and deep dive into it to combine it with third party data sources so that you can see changing tastes and trends. Customer suggestions and questions are a great pool to draw from. This will require business users interacting closely with the data team to react quickly to what's being found.",
keywords: ["what customers need", "what customers want", "customer needs", "predict what customers", "predict customer needs"],
competitors: ["market research firms"],
features: ["demographicData", "dataIntegration", "channelFromScientistsToBusinessUsers"]
},
"attractingCustomers":{
pain: "I need to attract more customers",
aspirin: "You need to dive into what your customers are saying and who they are.",
features: ["demographicData", "dataIntegration", "dataLab"]
},
"identifyNewCustomerSegments":{
pain: "I need to find new customer segments to target",
aspirin: "Find out what makes a good customer today, and find similar groups who make viable targets.",
keywords: ["customer segmentation"],
features: ["demographicData", "dataIntegration", "dataLab"]
},
"convert": {
pain: "I need more customers to convert.",
aspirin: "Harness your Transaction Data to find characteristics of transactions that go south, and implement a plan to fix it. You can also find areas where you might be able to drive more conversions by communicating more effectively; by changing packaging for instance.",
implementationIdeas: ["http://www.tweaky.com/blog/how-to-increase-your-ecommerce-conversion-rate-with-simple-tweaks/"]
},
"reduceCustomerChurn":{
pain: "I need to make sure our customers stay happy and reduce customer turnover.",
aspirin: "Listen to what they're saying, particularly complaints"
},
"makeSureProblemsAreSolved":{
pain: "I need to make sure problems are solved in a timely and efficient manner.",
aspirin: "Find out which problems are taking the longest and why.",
keywords: ["Time to resolution"]
},
"moreRevenue":{
pain: "I need to make more revenue on each customer",
aspirin: "Analyze your customer data to find the best offer for each customer type, and then implement that in the customer interaction"
},
"raisingVisibility":{
pain: "I need to raise the visibility of important issues before the opportunity to act on them has passed."
},
"evaluatingOptions":{
pain: "We have too many things to work on. We need to identify the highest-value things, and put values to them so they're not constantly being shoved to the bottom of the pile. We need to quantify possible iniatives."
},
"valuingIdeas":{
pain: "I need to pin values on ideas so that they can be prioritized",
aspirin: "Use the intelligence of the crowd in your organization to arrive at a consensus."
},
"takeAction": {
pain: "I need to make sure our strategic initiatives are follow-through on and successful",
aspirin: "Intelligently route ideas to the right people",
features: ["UI"]
}
};
valueProps = {
nothingOfValue: {
problem: "I'm not convinced that there's anything of value there.",
opposite: "Knowing that there are valuable insights in your data because you've experienced it.",
solvingFeatures: [ features.learn ],
solution: "Let your organization determine the value of the insights coming from the data."
},
whereToStart: {
problem: "I just don't know where to start.",
opposite: "Act with confidence that you'll get the results you're looking for.",
solvingFeatures: [ features.managedService, features.pipeFromScientistsToBusinessUsers],
solution: "Let us handle the whole thing."
},
dataTools: {
problem: "We haven't been able to get anything good from our data.",
opposite: "Finding important strategic insights in your data.",
solvingFeatures: [ features.dataLab, features.dataIntegration, features.deepAnalytics, features.interestAnalytics ],
solution: "Put the people and tools in place"
},
curation: {
problem: "I'm drowning in too much work and information.",
opposite: "Harnessing the power of the crowd to vet and curate ideas so that good ideas are surfaced and acted on.",
solvingFeatures: [ features.collaboration, features.deliveryMechanism, features.crowdsourcing, features.UI, features.valueConsensus ],
solution: "Curate and groom your important ideas"
},
actionMotivation: {
problem: "We're unable to generate follow-through on things we already know.",
opposite: "Keeping everyone interested in the loop, tracking actions and seeing how effective they are, and using that information to guide you in the future.",
solvingFeatures: [ features.collaboration, features.deliveryMechanism, features.crowdsourcing, features.UI, features.lateEdition ],
solution: "Track what happens with all of the important ideas and how effective they are"
},
noDataScientists: {
problem: "We don't have a data team",
opposite: "Having a team of data professionals at your disposal, working to find the million dollar ideas in your data",
solvingFeatures: [ features.managedService ],
solution: "Let us use our team of data scientists to analyze your data."
}
};
var allValueProps = [];
var allFeatures = [];
var propsDomain = [];
var userSelectedProps = [valueProps.nothingOfValue];
var suggestedFeatures = {};
for( var i = 0; i < Object.keys(valueProps).length; i++ ){
propsDomain.push( i );
allValueProps.push(valueProps[Object.keys(valueProps)[i]]);
}
for( i = 0; i < allValueProps.length; i++ ){
for( var j = 0; j < allValueProps[i].solvingFeatures.length; j++ )
if( allFeatures.indexOf( allValueProps[i].solvingFeatures[i] ) < 0 )
allFeatures.push( allValueProps[i].solvingFeatures[i] );
}
console.log("start");
console.log(allFeatures)
svgHeight = $("#road").height();
svgWidth = $("#road").width();
var svg = d3.select("#road").append("svg").attr("width", svgWidth);
var valuePropsGroup = svg.append("g");
// Insert title
valuePropsGroup.append("text").text("Why aren't you taking advantage of million dollar data ideas?")
.attr("class","sectionTitle")
.attr("x",20)
.attr("y",30);
valuePropsGroup.append("text").text("Check the items that apply to you:")
.attr("x",40)
.attr("y",61);
var continueX = 326;
var continueY = 351;
valuePropsGroup.append("circle")
.attr("class", "continueCircle")
.attr("r", 100)
.attr("cx",continueX)
.attr("cy",continueY);
valuePropsGroup.append("text")
.text("Click here to find out how to...")
.attr("text-anchor", "middle")
.attr("x",continueX)
.attr("y",continueY);
var svgValueProps = valuePropsGroup.selectAll(".valueProp").data(allValueProps);
var svgValueProp = svgValueProps.enter().append("g").attr("class", "valueProp");
var color = d3.scale.category20c();
var valuePropsScale = d3.scale.ordinal().domain(propsDomain).rangeRoundBands([0,200], 1);
var valuePropY = 99;
var ySpacing = 34;
var xPadding = 20;
svgValueProp.append("text")
.classed("avgText", true)
.attr("x",function(d,i){
return xPadding + 50; })
.attr("y",function(d,i){ return valuePropY + i * ySpacing;})
.attr("text-anchor", function(d){
return "left";
}).text(function(d){ return d.problem});
var valuePropChecks = svgValueProp.append("circle")
.attr("class", "valuePropFrame unselected")
.attr("cx", xPadding + 29 )
.attr("cy", function(d,i){ return valuePropY + i * ySpacing - 5; } )
.attr("r", 11)
.on("click", function(d){
if( userSelectedProps.indexOf( d ) >= 0 ){
userSelectedProps.splice( userSelectedProps.indexOf( d ), 1 );
for( var i = 0; i < d.solvingFeatures.length; i++ ){
var featureIndex = allFeatures.indexOf( d.solvingFeatures[i] );
//add this to the list of used features, increment its count so we know it's still in use
if( suggestedFeatures[featureIndex] > 1)
suggestedFeatures[featureIndex] = suggestedFeatures[featureIndex] - 1;
else
suggestedFeatures[featureIndex] = 0;
}
} else {
userSelectedProps.push( d );
for( var i = 0; i < d.solvingFeatures.length; i++ ){
var featureIndex = allFeatures.indexOf( d.solvingFeatures[i] );
console.log(d.solvingFeatures[i]);
//add this to the list of used features, increment its count so we know it's still in use
if( suggestedFeatures[featureIndex] )
suggestedFeatures[featureIndex] = suggestedFeatures[featureIndex] + 1;
else
suggestedFeatures[featureIndex] = 1;
}
}
updateSelectedProblems();
});
updateSelectedProblems();
function updateSelectedProblems(){
console.log(suggestedFeatures);
valuePropChecks.attr("fill", function(d, i){
if( userSelectedProps.indexOf( d ) >= 0 )
return color(i);
else
return "#fff";
});
var lookforwardto = valuePropsGroup.selectAll(".lookforwardTo").data(userSelectedProps);
lookforwardto.enter().append("text")
.text(function(d){ return d.opposite; })
.attr("class", "lookforwardTo")
.attr("x", function(d,i){ return 500; } )
.attr("y",function(d,i){ return valuePropY + i * ySpacing;});
lookforwardto.exit().remove();
//the list of features will contain a map of each feature needed compared with how badly its needed
}
})();
Raw
landingPage.css
.valuePropFrame{
stroke: #444;
stroke-width: 2,
cursor: pointer
}
.continueCircle{
fill: #C7C7C7
}
#road{
height: 500px;
width: 100%;
xbackground-color: #AAD6FF;
}
.sectionTitle{
font-size: 2em;
}
.landingPage{
background: #fff;
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-align: center;
}
P{
margin-left: 50px;
margin-right: 50px;
text-align: left;
}
table{
text-align: left;
margin-left: auto;
margin-right: auto;
border: 2px solid #444;
background: #eee;
}
th{
width: 50%;
background-color: #444;
color: white;
padding: 5px;
}
th.bad{
background-color: red;
}
th.good{
background-color: green;
}
td{
width: 50%;
padding: 5px;
}
td.good{
background-color: #B7FFB4;
}
td.bad{
background-color: #FFB8A2;
}
.center{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#pricing-table {
margin: 50px auto;
text-align: center;
width: 692px; /* total computed width = 222 x 3 + 226 */
}
#pricing-table .plan {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
float: left;
position: relative;
}
#pricing-table #most-popular {
z-index: 2;
top: -13px;
border-width: 3px;
padding: 30px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}
#pricing-table .plan:nth-child(1) {
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#pricing-table .plan:nth-child(3) {
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* --------------- */
#pricing-table h3 {
font-size: 20px;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: #eee;
background-image: -moz-linear-gradient(#fff,#eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(#fff, #eee);
background-image: -o-linear-gradient(#fff, #eee);
background-image: -ms-linear-gradient(#fff, #eee);
background-image: linear-gradient(#fff, #eee);
}
#pricing-table #most-popular h3 {
background-color: #ddd;
background-image: -moz-linear-gradient(#eee,#ddd);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background-image: -webkit-linear-gradient(#eee, #ddd);
background-image: -o-linear-gradient(#eee, #ddd);
background-image: -ms-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
margin-top: -30px;
padding-top: 30px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#pricing-table .plan:nth-child(1) h3 {
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
#pricing-table .plan:nth-child(3) h3 {
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#pricing-table h3 span {
display: block;
font: bold 25px/100px Georgia, Serif;
color: #777;
background: #fff;
border: 5px solid #fff;
height: 100px;
width: 100px;
margin: 10px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}
/* --------------- */
#pricing-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#pricing-table li {
border-top: 1px solid #ddd;
padding: 10px 0;
}
/* --------------- */
#pricing-table .signup {
position: relative;
padding: 8px 20px;
margin: 20px 0 0 0;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
background-image: -moz-linear-gradient(#72ce3f, #62bc30);
background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));
background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
background-image: -o-linear-gradient(#72ce3f, #62bc30);
background-image: -ms-linear-gradient(#72ce3f, #62bc30);
background-image: linear-gradient(#72ce3f, #62bc30);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}
#pricing-table .signup:hover {
background-color: #62bc30;
background-image: -moz-linear-gradient(#62bc30, #72ce3f);
background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));
background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
background-image: -o-linear-gradient(#62bc30, #72ce3f);
background-image: -ms-linear-gradient(#62bc30, #72ce3f);
background-image: linear-gradient(#62bc30, #72ce3f);
}
#pricing-table .signup:active, #pricing-table .signup:focus {
background: #62bc30;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}
/* --------------- */
.clear:before, .clear:after {
content:"";
display:table
}
.clear:after {
clear:both
}
.clear {
zoom:1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment