dataviz.mdx

import { State, Observe } from '../es'; import Table from './helpers/table'; import { Form } from 'react-powerplug'; import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme } from 'victory'; import 'katex/dist/katex.min.css'; import { BlockMath, InlineMath } from 'react-katex';

Data Visualization

An example linking a dataset to a table, form, and dynamic values displayed in a text and chart, plus some LateX math.

Which Car Should You Buy?

There a number of factors to consider when buying a car. Use our special formula to help you decide!

{ \\text{Score} = 100 \\times \\frac{(reliability \\times 3 + luxury \\times 2)}{price} }

Here are some cars to get you started with your comparison:

<State initialState={{ vehicles: [ { name: "Toyota", price: 29000, reliability: 8, luxury: 7 }, { name: "Honda", price: 27000, reliability: 7, luxury: 6 }, { name: "Volvo", price: 36000, reliability: 7, luxury: 8 }, { name: "Jeep", price: 33000, reliability: 7, luxury: 6 }, { name: "Ford", price: 27000, reliability: 7, luxury: 5 }, { name: "BMW", price: 45000, reliability: 6, luxury: 10 } ] }}

{({ vehicles }) => ( Object.values(v))]} /> )} {({ vehicles, setState }) => { return ( {({ input, values }) => ( { e.preventDefault(); const newCar = { name: values.name, price: parseInt(values.price), reliability: parseInt(values.reliability), luxury: parseInt(values.luxury) }; setState(s => ({ ...s, vehicles: [...s.vehicles, newCar] })); }} >



Add Car )} ); }}

Results

Scores

{ ({ vehicles, setState }) => { const cheapest = [...vehicles].sort((a, b) => a.price - b.price)[0]; const mostReliable = [...vehicles].sort( (a, b) => b.reliability - a.reliability )[0]; const mostLuxurious = [...vehicles].sort( (a, b) => b.luxury - a.luxury )[0]; const specialFormula = ({ price, reliability, luxury }) => (reliability * 3 + luxury * 2) / price * 100; const byFormula = [...vehicles] .map(v => ({ ...v, score: specialFormula(v) })) .sort((a, b) => b.score - a.score)[0]; return (

The cheapest car is: {cheapest.name}

The most reliable car is: {mostReliable.name}

The most luxurious car is: {mostLuxurious.name}

Our special formula says: Buy {byFormula.name}

); } } { ({ vehicles, setState }) => { const specialFormula = ({ price, reliability, luxury }) => (reliability * 3 + luxury * 2) / price * 100; const byFormula = [...vehicles] .map(v => ({ ...v, score: specialFormula(v) })) .sort((a, b) => b.score - a.score) .map((v, i) => ({...v, fill: `#999`})) return (

(`${x * 1000}`)} />

) } }