lsquaredleland/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Different type of bar chart

Working on a novel bar chart, where the different levels allow different levels of granularity, where the bottom half has is to examine smaller numbers (similar to inverse log scale but less pronounced).
Lots of fixes still needed


Axes y and x
Tick marks
It might take a while...


## index.html
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Slant Bars</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="chartArea"></div>
    <script src="js.js"></script>
  </body>

</html>

## js.js
const margin = {top: 20, right: 20, bottom: 20, left: 100};
const heightTop = 300 - margin.top - margin.bottom;
const height = 200 - margin.top - margin.bottom;
const width = 960 - margin.left - margin.right;

const dataset = d3.range(20).map(d3.random.normal(20, 5));
const max = d3.max(dataset)/1.5;
const datasetTop = dataset.map((d) => d < max ? 0 : d );
const datasetLength = dataset.length;
const shift = 50;

const svgTop = d3.select("#chartArea").append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", heightTop + margin.top)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const svg = d3.select("#chartArea").append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + ",0)");

const x = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width/2], .4);

const y = d3.scale.linear()
    .domain([0, max])
    .range([0, height]);

const xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

const yAxis = d3.svg.axis()
    .scale(y)
    .tickSize(-width)
    .orient("left");

svg.selectAll("rect")
    .data(dataset)
  .enter()
    .append("rect")
    .attr("x", (d, i) => x(i) + shift)
    .attr("y", (d) => height - y(d))
    .attr("width", x.rangeBand())
    .attr("height", (d) => y(d))
    .attr("transform", (d, i) => {
      is = i - (datasetLength - 1)/2
      return "translate(" + (shift -i*1.8) + ",0) skewX(" + is*3.5 + ")"
    })
    .attr("fill", 'maroon');

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .selectAll('text')
    .attr('x', (d,i) => d*9.5) // How to shift the tick marks?

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

const yTop = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0, heightTop]);
const yAxisTop = d3.svg.axis()
    .scale(yTop)
    .tickSize(-width)
    .orient("left");

svgTop.selectAll("rect")
    .data(datasetTop)
  .enter()
    .append("rect")
    .attr("x", (d, i) => x(i) + shift)
    .attr("y", (d) => heightTop - yTop(d))
    .attr("width", x.rangeBand())
    .attr("height", (d) => yTop(d))
    .attr("transform", (d, i) => "translate(" + (shift -i*1.8) + ",0)")
    .attr("fill", 'maroon');

svgTop.append("g")
    .attr("class", "y axis")
    .call(yAxisTop);

## style.css
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.y.axis line, .x.axis line {
  stroke: #777;
  stroke-dasharray: 2,2;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Slant Bars</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="chartArea"></div>
	<script src="js.js"></script>
	</body>

	</html>
	const margin = {top: 20, right: 20, bottom: 20, left: 100};
	const heightTop = 300 - margin.top - margin.bottom;
	const height = 200 - margin.top - margin.bottom;
	const width = 960 - margin.left - margin.right;

	const dataset = d3.range(20).map(d3.random.normal(20, 5));
	const max = d3.max(dataset)/1.5;
	const datasetTop = dataset.map((d) => d < max ? 0 : d );
	const datasetLength = dataset.length;
	const shift = 50;

	const svgTop = d3.select("#chartArea").append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", heightTop + margin.top)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	const svg = d3.select("#chartArea").append('svg')
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + ",0)");

	const x = d3.scale.ordinal()
	.domain(d3.range(dataset.length))
	.rangeRoundBands([0, width/2], .4);

	const y = d3.scale.linear()
	.domain([0, max])
	.range([0, height]);

	const xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	const yAxis = d3.svg.axis()
	.scale(y)
	.tickSize(-width)
	.orient("left");

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x", (d, i) => x(i) + shift)
	.attr("y", (d) => height - y(d))
	.attr("width", x.rangeBand())
	.attr("height", (d) => y(d))
	.attr("transform", (d, i) => {
	is = i - (datasetLength - 1)/2
	return "translate(" + (shift -i1.8) + ",0) skewX(" + is3.5 + ")"
	})
	.attr("fill", 'maroon');

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll('text')
	.attr('x', (d,i) => d*9.5) // How to shift the tick marks?

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	const yTop = d3.scale.linear()
	.domain([0, d3.max(dataset)])
	.range([0, heightTop]);
	const yAxisTop = d3.svg.axis()
	.scale(yTop)
	.tickSize(-width)
	.orient("left");

	svgTop.selectAll("rect")
	.data(datasetTop)
	.enter()
	.append("rect")
	.attr("x", (d, i) => x(i) + shift)
	.attr("y", (d) => heightTop - yTop(d))
	.attr("width", x.rangeBand())
	.attr("height", (d) => yTop(d))
	.attr("transform", (d, i) => "translate(" + (shift -i*1.8) + ",0)")
	.attr("fill", 'maroon');

	svgTop.append("g")
	.attr("class", "y axis")
	.call(yAxisTop);
	.axis text {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.y.axis line, .x.axis line {
	stroke: #777;
	stroke-dasharray: 2,2;
	}