Skip to content

ihsavru/d3ar-charts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Setup Instructions

First time:

docker-compose up --build

Start container:

docker-compose up

Exec into container:

docker-compose exec javascript exec

Usage

LineChart

<LineChart
  svgProps={{
    margin: { top: 80, bottom: 80, left: 80, right: 80 },
    width: 600,
    height: 400,
  }}
  axisProps={{
    xLabel: 'X Axis',
    yLabel: 'Y Axis',
  }}
  data={data}
  strokeWidth={4}
/>

Line Chart

Heat Map

<HeatMap
  svgProps={{
    margin: { top: 80, bottom: 80, left: 80, right: 80 },
    width: 400,
    height: 400,
  }}
  axisProps={{
    xLabel: 'X Axis',
    yLabel: 'Y Axis',
  }}
  data={heatMapdata}
  strokeWidth={4}
/>

Heat Map

Bar Chart

<BarChart
  svgProps={{
    margin: { top: 80, bottom: 80, left: 80, right: 80 },
    width: 600,
    height: 400,
  }}
  axisProps={{
    xLabel: 'X Axis',
    yLabel: 'Y Axis',
  }}
  data={data}
  strokeWidth={4}
/>

Bar Chart

Pie Chart

<PieChart
  data={data}
  pieSize={400}
  svgSize={500}
  innerRadius={100}
  containerId="pie"
/>

Pie Chart

Scatter Plot

<ScatterPlot
  svgProps={{
    margin: { top: 80, bottom: 80, left: 80, right: 80 },
    width: 600,
    height: 400,
  }}
  axisProps={{
    xLabel: 'X Axis',
    yLabel: 'Y Axis',
  }}
  data={data}
  pointWidth={4}
/>

Scatter Plot

Area Chart

<AreaChart
  svgProps={{
    margin: { top: 80, bottom: 80, left: 80, right: 80 },
    width: 600,
    height: 400,
  }}
  axisProps={{
    xLabel: 'X Axis',
    yLabel: 'Y Axis',
  }}
  data={data}
  strokeWidth={4}
/>

Area Chart

About

Collection of react charts built with d3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published