lnmunhoz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from lnmunhoz's block: d3: revenues bar chart

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
  const profitData = [
    {
      "month": "January",
      "revenue": "13432",
      "profit": "8342"
    },
    {
      "month": "February",
      "revenue": "19342",
      "profit": "10342"
    },
    {
      "month": "March",
      "revenue": "17443",
      "profit": "15423"
    },
    {
      "month": "April",
      "revenue": "26342",
      "profit": "18432"
    },
    {
      "month": "May",
      "revenue": "34213",
      "profit": "29434"
    },
    {
      "month": "June",
      "revenue": "50321",
      "profit": "45343"
    },
    {
      "month": "July",
      "revenue": "54273",
      "profit": "47452"
    }
  ].map(d => ({
    ...d,
    profit: +d.profit,
    revenue: +d.revenue
  }))

  const margin = {
    left: 100,
    right: 10,
    top: 20,
    bottom: 100
  }

  let showRevenue = true
  const width = 600 - margin.left - margin.right
  const height = 400 - margin.top - margin.bottom

  const svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", width + margin.top + margin.bottom)

  const g = svg.append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`)

  const x = d3.scaleBand()
    .range([0, width])
    .paddingOuter(0.3)
    .paddingInner(0.3)

  const y = d3.scaleLinear()
    .range([0, height])

  const xAxisCall = d3.axisBottom(x)
  const yAxisCall = d3.axisLeft(y)

  const xAxisGroup = g.append("g")
    .attr("transform", `translate(0, ${height})`)

  const yAxisGroup = g.append("g")

  const t = d3.transition().duration(750)

   g.append("text")
    .attr("y", height + 50)
    .attr("x", width / 2)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Month");


   const labelText = g.append("text")
    .attr("y", -60)
    .attr("x", -(height/2))
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .text("Revenue");


  function update(data) {
    const prop = showRevenue ? "revenue" : "profit"
    const labelTextValue = `${prop[0].toUpperCase()}${prop.slice(1)}`


    x.domain(data.map(d => d.month))
    y.domain([d3.max(data, d => d[prop]), 0])

    xAxisGroup.transition(t).call(xAxisCall)
    yAxisGroup.transition(t).call(yAxisCall)

		labelText.text(labelTextValue)

    const rects = g.selectAll("rect")
      .data(data, d => d.month)

    rects.exit()
    	.attr("fill", "red")
      .transition(t)
      .attr("y", y(0))
	    .attr("height", 0)
      .remove()

    rects.enter().append("rect")
    .attr("fill", "gray")
    .attr("x", (d, i) => x(d.month))
    .attr("y", d => y(0))
    .attr("width", x.bandwidth)
    .attr("height", (d, i) => height - y(0))
    .merge(rects)
      .transition(t)
      .attr("x", (d, i) => x(d.month))
      .attr("y", d => y(d[prop]))
      .attr("width", x.bandwidth)
      .attr("height", (d, i) => height - y(d[prop]))


	}

    update(profitData)
    d3.interval(() => {

      showRevenue = !showRevenue

//       const data = profitData
      const data = showRevenue ? profitData : [...profitData.slice(1, 3), ...profitData.slice(5)]
      console.log(data)

	    update(data)
    }, 1000)


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	const profitData = [
	{
	"month": "January",
	"revenue": "13432",
	"profit": "8342"
	},
	{
	"month": "February",
	"revenue": "19342",
	"profit": "10342"
	},
	{
	"month": "March",
	"revenue": "17443",
	"profit": "15423"
	},
	{
	"month": "April",
	"revenue": "26342",
	"profit": "18432"
	},
	{
	"month": "May",
	"revenue": "34213",
	"profit": "29434"
	},
	{
	"month": "June",
	"revenue": "50321",
	"profit": "45343"
	},
	{
	"month": "July",
	"revenue": "54273",
	"profit": "47452"
	}
	].map(d => ({
	...d,
	profit: +d.profit,
	revenue: +d.revenue
	}))

	const margin = {
	left: 100,
	right: 10,
	top: 20,
	bottom: 100
	}

	let showRevenue = true
	const width = 600 - margin.left - margin.right
	const height = 400 - margin.top - margin.bottom

	const svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", width + margin.top + margin.bottom)

	const g = svg.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`)

	const x = d3.scaleBand()
	.range([0, width])
	.paddingOuter(0.3)
	.paddingInner(0.3)

	const y = d3.scaleLinear()
	.range([0, height])

	const xAxisCall = d3.axisBottom(x)
	const yAxisCall = d3.axisLeft(y)

	const xAxisGroup = g.append("g")
	.attr("transform", `translate(0, ${height})`)

	const yAxisGroup = g.append("g")

	const t = d3.transition().duration(750)

	g.append("text")
	.attr("y", height + 50)
	.attr("x", width / 2)
	.attr("font-size", "20px")
	.attr("text-anchor", "middle")
	.text("Month");


	const labelText = g.append("text")
	.attr("y", -60)
	.attr("x", -(height/2))
	.attr("font-size", "20px")
	.attr("text-anchor", "middle")
	.attr("transform", "rotate(-90)")
	.text("Revenue");


	function update(data) {
	const prop = showRevenue ? "revenue" : "profit"
	const labelTextValue = `${prop[0].toUpperCase()}${prop.slice(1)}`


	x.domain(data.map(d => d.month))
	y.domain([d3.max(data, d => d[prop]), 0])

	xAxisGroup.transition(t).call(xAxisCall)
	yAxisGroup.transition(t).call(yAxisCall)

	labelText.text(labelTextValue)

	const rects = g.selectAll("rect")
	.data(data, d => d.month)

	rects.exit()
	.attr("fill", "red")
	.transition(t)
	.attr("y", y(0))
	.attr("height", 0)
	.remove()

	rects.enter().append("rect")
	.attr("fill", "gray")
	.attr("x", (d, i) => x(d.month))
	.attr("y", d => y(0))
	.attr("width", x.bandwidth)
	.attr("height", (d, i) => height - y(0))
	.merge(rects)
	.transition(t)
	.attr("x", (d, i) => x(d.month))
	.attr("y", d => y(d[prop]))
	.attr("width", x.bandwidth)
	.attr("height", (d, i) => height - y(d[prop]))


	}

	update(profitData)
	d3.interval(() => {

	showRevenue = !showRevenue

	// const data = profitData
	const data = showRevenue ? profitData : [...profitData.slice(1, 3), ...profitData.slice(5)]
	console.log(data)

	update(data)
	}, 1000)


	</script>
	</body>