Simple Data Visualization with React JS: SVG Line Chart Tutorial

  • temp + Math.floor(random * 20) : temp – Math.floor(random * 20); data.push({x,y}) } return data; }render() { return ( div className=”App” // THIS IS WHERE OUR SVG CHART WILL RENDER /div ); }}export default App;I’m not going to extensively walk you through the function above as that’s not the focus of this tutorial.
  • The first four things we’ll need to know are the minimum and maximum x values in our data, and the minimum and maximum y values in our data.Before our render() function, add in these four functions:// GET MAX MIN X getMinX() { const {data} = this.props; return data[0].
  • y) + ” “;pathD +=, i) = { return “L ” + this.getSvgX(point.x) + ” ” + this.getSvgY(point.y) + ” “; });return ( path className=”linechart_path” d={pathD} style={{stroke: color}} / ); }Let’s break down the above code into smaller sections:First we create a variable named pathD and tell our line to move to the first x and y coordinate.
  • y) + ” “;Next, for each value in our data array, we will return a Line to the next x and y coordinate in the array.This line will be appended to the pathD variable.pathD +=, i) = { return “L ” + this.getSvgX(point.x) + ” ” + this.getSvgY(point.y) + ” “; });Finally, we return a path element with d equal to our pathD variable.You’ll notice I’ve also included a className and style element for making everything look pretty.return ( path className=”linechart_path” d={pathD} style={{stroke: color}} / );Create a Grid AxisThe last thing we’ll do in this tutorial is create a grid axis to pull everything together.If you think about it, a grid axis is simply two straight lines.
  • These coordinates are achieved by using our getSVGx() getSVGy() functions.We return each line.Returning the Axis Line GraphWe have everything we need, now we just need to return it to the parent element.render() { const {svgHeight, svgWidth} = this.props;return ( svg viewBox={`0 0 ${svgWidth} ${svgHeight}`} {this.makePath()} {this.makeAxis()} /svg ); }We’ll return an SVG element with a viewbox property that starts at x=0, and y=0, and goes to our SVG Height Width.Within our SVG we’ll return invocations of makePath() and makeAxis() which create our axis and line graph!Making it PrettyTo make it look pretty I added the following code to LineChart.css.linechart_path { stroke-width: 3; // Thick Line fill: none; // No Fill}.

Today we’ll be building a very simple line chart using React and SVG. In later tutorials we’ll add more complexities to this project: tooltips on hover, axis labels, etc. For this tutorial we’ll be…
Continue reading “Simple Data Visualization with React JS: SVG Line Chart Tutorial”

SVG in React – Etleap

If you want to use SVG in #ReactJS, here's a handy guide:

  • This component uses SVG to display the circular progress bar and works just like any other React component.
  • The reason we opted for SVG in this case was that creating a circular progress bar in CSS is tricky.
  • The essential SVG markup required to render the progress bar is very simple:

    We need two circles, one for the dark background, and one for the lighter progress display.

  • SVG should not be a replacement for all graphical user elements, but can be used to more easily achieve tricky UI effects where CSS falls short.
  • That being said, CSS is catching up with SVG and has seen support for several filters, masks, and even custom clip paths.

React.js is a great library for creating user interfaces consisting of components. In the browser React is used to output DOM elements like divs, sections and.. SVG! The DOM supports SVG elements, so there is nothing stopping us from outputting it inline directly with React. This allows for easy creation of SVG components that are…
Continue reading “SVG in React – Etleap”

D3 React Components with Victory – Reusability / Composability

  • The components can be composed as HOC to make advanced charts.
  • You can compose those components with each others to make more advanced charts.
  • hover the chart will show a tooltip with some contextual infos
  • In the new release , I took a full JSX approach , using some components from the Victory library .
  • D3 React Components with Victory – Reusability / Composability

On the topheman/d3-react-experiments project, at the end of last month, I released a few examples of React components exposing charts based either on vanilla d3 code or react-faux-dom.
Continue reading “D3 React Components with Victory – Reusability / Composability”