Skip to content

Commit

Permalink
Merge pull request #169 from hshoff/harry-demo-fix
Browse files Browse the repository at this point in the history 
[demo] fix type on /, fix areas tile details
  • Loading branch information
@hshoff
hshoff authored Oct 7, 2017
2 parents 0955af6 + 37e9a44 commit 60520b0
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 23 deletions.
2 changes: 1 addition & 1 deletion packages/vx-demo/components/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default class Gallery extends React.Component {
}}
/>
</div>
<div className="details">
<div className="details" style={{ zIndex: 1 }}>
<div className="title">Areas</div>
<div className="description">
<pre>{`<Shape.AreaClosed />`}</pre>
Expand Down
76 changes: 54 additions & 22 deletions packages/vx-demo/pages/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,97 @@ import React from 'react';
import Page from '../components/page';
import Footer from '../components/footer';


export default () => (
<Page>
<div className="home">
<div className="hero">
<h1>
React + D3 = VX
</h1>
<h1>React + D3 = VX</h1>
<div className="btn-container">
<a className="btn" href="https://github.com/hshoff/vx">
View on Github
</a>
</div>
</div>
<div className="container">
<div className="content"><p><code>vx</code> is collection of reusable low-level visualization components. <code>vx</code> combines the power of <code>d3</code> to generate your visualization with the benefits of <code>react</code> for updating the DOM.</p></div>
<div className="content">
<p>
<code>vx</code> is collection of reusable low-level
visualization components. <code>vx</code> combines the
power of <code>d3</code> to generate your visualization
with the benefits of <code>react</code> for updating the
DOM.
</p>
</div>
<div className="content">
<h3>Goal</h3>
<p>The goal is to create a library of components you can use to make both your own resuable chart library or your slick custom one-off chart. <code>vx</code> is largely unopinionated and is meant to be build on top of. Keep your bundle sizes down and use only the packages you need.</p>
<p>
The goal is to create a library of components you can use
to make both your own reusable chart library or your slick
custom one-off chart. <code>vx</code> is largely
unopinionated and is meant to be build on top of. Keep
your bundle sizes down and use only the packages you need.
</p>
</div>
<div className="content">
<h3>How?</h3>
<p>Under the hood, <code>vx</code> is using <code>d3</code> for the calculations and math. If you're creating your own awesome chart library ontop of vx, it's easy to create a component api that hides <code>d3</code> entirely. Meaning your team could create charts as easily as using reusable react components.</p>
<p>
Under the hood, <code>vx</code> is using <code>d3</code>{' '}
for the calculations and math. If you're creating your own
awesome chart library ontop of vx, it's easy to create a
component api that hides <code>d3</code> entirely. Meaning
your team could create charts as easily as using reusable
react components.
</p>
</div>
<div className="content">
<h3>But why?</h3>
<p>Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into <code>componentDidMount()</code> is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or <code>enter()</code>/<code>exit()</code>/<code>update()</code>.</p>
<p>
Mixing two mental models for updating the DOM is never a
good time. Copy and pasting d3 code into{' '}
<code>componentDidMount()</code> is just that. This
collection of components lets you easily build your own
reusable visualization charts or library without having to
learn d3. No more selections or <code>enter()</code>/<code>exit()</code>/<code>update()</code>.
</p>
</div>
<div className="content">
<h3>FAQ</h3>
<ol className="faq">
<li>
<p>What does <code>vx</code> stand for?</p>
<p>
What does <code>vx</code> stand for?
</p>
<blockquote>
<p>vx stands for visualization components.</p>
<p>vx stands for visualization components.</p>
</blockquote>
</li>
<li>
<p>Do you plan on supporting animation/transitions?</p>
<blockquote>
<p>yup!</p>
<p>yup!</p>
</blockquote>
</li>
<li>
<p>Do I have to use every package to make a chart?</p>
<blockquote>
<p>nope! pick and choose the packages you need.</p>
<p>nope! pick and choose the packages you need.</p>
</blockquote>
</li>
<li>
<p>Can I use this to create my own library of charts for my team?</p>
<p>
Can I use this to create my own library of charts for
my team?
</p>
<blockquote>
<p>Please do.</p>
<p>Please do.</p>
</blockquote>
</li>
<li>
<p>I like using <code>d3</code>.</p>
<p>
I like using <code>d3</code>.
</p>
<blockquote>
<p>Me too.</p>
<p>Me too.</p>
</blockquote>
</li>
</ol>
Expand All @@ -75,8 +107,8 @@ export default () => (
background-color: #fc2e1c;
border-radius: 30px;
border-top-right-radius: 0;
color: #FFFFFF;
font-family: "Montserrat";
color: #ffffff;
font-family: 'Montserrat';
text-transform: uppercase;
margin-right: 1rem;
}
Expand All @@ -98,13 +130,13 @@ export default () => (
}
.home h1 {
font-family: "Montserrat";
font-family: 'Montserrat';
color: #fc2e1c;
font-size: 95pt;
line-height: 1em;
margin: 0;
padding: 0;
opacity: .9;
opacity: 0.9;
margin-top: 130px;
letter-spacing: 20px;
text-transform: uppercase;
Expand Down Expand Up @@ -144,7 +176,7 @@ export default () => (
blockquote {
border-left: 2px solid #efefef;
padding: .5rem 1rem;
padding: 0.5rem 1rem;
color: #777;
}
Expand Down Expand Up @@ -182,4 +214,4 @@ export default () => (
}
`}</style>
</Page>
)
);

0 comments on commit 60520b0

Please sign in to comment.