(function (React$1, ReactDOM, d3) {
'use strict';
const csvUrl =
'https://gist.githubusercontent.com/curran/90240a6d88bdb1411467b21ea0769029/raw/7d4c3914cc6a29a7f5165f7d5d82b735d97bcfe4/week_temperature_sf.csv';
const useData = () => {
const [data, setData] = React$1.useState(null);
React$1.useEffect(() => {
const row = d => {
d.temperature = +d.temperature;
d.timestamp = new Date(d.timestamp);
return d;
};
d3.csv(csvUrl, row).then(setData);
}, []);
return data;
};
const AxisBottom = ({ xScale, innerHeight, tickFormat, tickOffset = 3 }) =>
xScale.ticks().map(tickValue => (
React.createElement('g', {
className: "tick",
key: tickValue,
transform: `translate(${xScale(tickValue)},0)`,}
, React.createElement('line', { y2: innerHeight,} )
, React.createElement('text', { style: { textAnchor: 'middle' }, dy: ".71em", y: innerHeight + tickOffset,}
, tickFormat(tickValue)
)
)
));
const AxisLeft = ({ yScale, innerWidth, tickOffset = 3 }) =>
yScale.ticks().map(tickValue => (
React.createElement('g', { className: "tick", transform: `translate(0,${yScale(tickValue)})`,}
, React.createElement('line', { x2: innerWidth,} )
, React.createElement('text', {
key: tickValue,
style: { textAnchor: 'end' },
x: -tickOffset,
dy: ".32em",}
, tickValue
)
)
));
const Marks = ({
data,
xScale,
yScale,
xValue,
yValue,
tooltipFormat,
circleRadius
}) => (
React.createElement('g', { className: "marks",}
, React.createElement('path', {
fill: "none",
stroke: "black",
d: d3.line()
.x(d => xScale(xValue(d)))
.y(d => yScale(yValue(d)))
.curve(d3.curveNatural)(data),}
)
//data.map(d => (
//
// {tooltipFormat(xValue(d))}
//
//))
)
);
const width = 960;
const height = 500;
const margin = { top: 20, right: 30, bottom: 65, left: 90 };
const xAxisLabelOffset = 50;
const App = () => {
const data = useData();
if (!data) {
return React$1.createElement('pre', null, "Loading...");
}
const innerHeight = height - margin.top - margin.bottom;
const innerWidth = width - margin.left - margin.right;
const xValue = d => d.timestamp;
const xAxisLabel = 'Time';
const yValue = d => d.temperature;
const yAxisLabel = 'Temperature';
const xAxisTickFormat = d3.timeFormat('%a');
const xScale = d3.scaleTime()
.domain(d3.extent(data, xValue))
.range([0, innerWidth])
.nice();
const yScale = d3.scaleLinear()
.domain(d3.extent(data, yValue))
.range([innerHeight, 0])
.nice();
return (
React$1.createElement('svg', { width: width, height: height,}
, React$1.createElement('g', { transform: `translate(${margin.left},${margin.top})`,}
, React$1.createElement(AxisBottom, {
xScale: xScale,
innerHeight: innerHeight,
tickFormat: xAxisTickFormat,
tickOffset: 7,}
)
, React$1.createElement('text', {
className: "axis-label",
textAnchor: "middle",
transform: `translate(${ -45},${innerHeight /
2}) rotate(-90)`,}
, yAxisLabel
)
, React$1.createElement(AxisLeft, { yScale: yScale, innerWidth: innerWidth, tickOffset: 7,} )
, React$1.createElement('text', {
className: "axis-label",
x: innerWidth / 2,
y: innerHeight + xAxisLabelOffset,
textAnchor: "middle",}
, xAxisLabel
)
, React$1.createElement(Marks, {
data: data,
xScale: xScale,
yScale: yScale,
xValue: xValue,
yValue: yValue,
tooltipFormat: xAxisTickFormat,
circleRadius: 3,}
)
)
)
);
};
const rootElement = document.getElementById('root');
ReactDOM.render(React$1.createElement(App, null ), rootElement);
})(React, ReactDOM, d3);