Kashif1Naqvi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## basic.csv

          
            Time
            MidPeriod
            PopMale
            PopFemale
            PopTotal
            text

            
              1950
              1950.5
              4099.243
              365.874
              7752.117
              A

            
              1951
              1951.5
              4134.756
              3705.395
              7840.151
              B

            
              1952
              1952.5
              4174.45
              3761.546
              7935.996
              C

            
              1953
              1953.5
              4218.336
              3821.348
              8039.684
              D

            
              1954
              1954.5
              4266.484
              3884.832
              8151.316
              D

            
              1955
              1955.5
              4318.945
              3952.047
              8270.992
              E

            
              1956
              1956.5
              4375.8
              4023.073
              8398.873
              F

            
              1957
              1957.5
              4437.157
              4098
              8535.157
              G

            
              1958
              1958.5
              4503.156
              4176.941
              8680.097
              H

            
              1961
              1961.5
              4730.25
              4439.156
              9169.406
              I

            
              1962
              1962.5
              4816.05
              4535.392
              9351.442
              J

            
              1966
              1966.5
              5210.122
              4964.718
              10174.84
              K

            
              1967
              1967.5
              5319.123
              5080.813
              10399.936
              L

            
              1968
              1968.5
              5434.458
              5202.606
              10637.064
              M

            
              1977
              1977.5
              6689.144
              6482.15
              13171.294
              N

            
              1978
              1978.5
              6776.023
              165.676
              11141.199
              O

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bubble charset</title>
  </head>
  <body>
    <div id="chart"></div>
    <select class="data"></select>
    <script src="d3.min.js" ></script>
    <script src="index.js" ></script>
  </body>
</html>

## index.js
function render(data){
  let width  = window.innerWidth,
      height = window.innerHeight,
      margin = { top:90 , left:60 , right:70 , bottom:30 },
      innerWidth = width - margin.left - margin.right,
      innerHeight = height - margin.top - margin.bottom;
      // last_updated
      // PopMale
      const color = d3.scaleOrdinal(d3.schemeSet1).domain(data.map(d => d.PopFemale))
      // let yValue = data.map( d=> d.PopMale)
      // let xValue = data.map( d=> d.Time )

      let yValue = data.map( d=> d.PopMale)
      let xValue = data.map( d=> d.Time)
      // let xValue = data.map( d=> d.PopTotal )
      var z = d3.scaleSqrt()
      .domain([d3.min(yValue),d3.max(yValue)])
      .range([ 0 , 15]);
      // let yScale = d3.scaleLinear().domain([d3.min(yValue),d3.max(yValue)]).range([innerHeight,0])
      let xScale = d3.scaleTime().domain(d3.extent(xValue)).range([0,innerWidth])
      // let xScale = d3.scaleTime().domain([0,d3.max(xValue)]).range([0,innerWidth])

      let yScale = d3.scaleLinear().domain([0,d3.max(yValue)]).range([innerHeight,0]).nice()
      // let xScale = d3.scaleLinear().domain([0,d3.max(xValue)]).range([0,innerWidth]).nice()

      // let selectData = d3.select(".data").append("option")
      // selectData.selectAll("option").data(data).enter().append("option")
      // .text(function(d,i){
      // })
      //   return data[i].PopMale

      let selectData = d3.select(".data")
      selectData.selectAll("option").data(data).enter().append("option")
      .text(function(d,i){
        return data[i].PopMale
      })

      let xAxis = d3.axisBottom(xScale).tickSize(-innerHeight)
      let yAxis = d3.axisLeft(yScale).tickSize(-innerWidth)
      let line  = d3.line()
                    .x(d=>xScale(d.Time))
                    .y(d=>yScale(d.PopFemale))

      let svg = d3.select("#chart").append("svg").attr("viewBox",`0 0 ${width} ${height}`)
      let g = svg.append("g").attr("transform",`translate(${margin.top},${margin.left})`)
      let tooltips = d3.select("#chart").append("div")

      // g.append("path")
      //   .attr("d",line(data))
      //   .attr("stroke","lightcoral")
      //   .attr("fill","none")
      g.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx",d=>xScale(d.Time))
        .attr("cy",d=>yScale(d.PopFemale))
        .attr("r",d => z(d.PopTotal))
        .attr("fill",d=>color(d))
        .attr("opacity",.9)

        g.selectAll("text")
         .data(data)
         .enter()
         .append("text")
         .attr("x",d=>xScale(d.Time))
         .attr("y",d=>yScale(d.PopFemale))
         .text(d=>d.text)
         .attr("text-anchor","middle")
         .attr("fill","blue")

      g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`)
      g.append("g").call(yAxis).attr("transform",`translate(0,0)`)
}


d3.csv("basic.csv").then(data=>{
  data.forEach(d=>{
      d.PopMale = +d.PopMale
      d.PopFemale = +d.PopFemale
      d.popTotal = +d.PopTotal
      d.Time = new Date(d.Time)

  })
  render(data)
})
Time	MidPeriod	PopMale	PopFemale	PopTotal	text
1950	1950.5	4099.243	365.874	7752.117	A
1951	1951.5	4134.756	3705.395	7840.151	B
1952	1952.5	4174.45	3761.546	7935.996	C
1953	1953.5	4218.336	3821.348	8039.684	D
1954	1954.5	4266.484	3884.832	8151.316	D
1955	1955.5	4318.945	3952.047	8270.992	E
1956	1956.5	4375.8	4023.073	8398.873	F
1957	1957.5	4437.157	4098	8535.157	G
1958	1958.5	4503.156	4176.941	8680.097	H
1961	1961.5	4730.25	4439.156	9169.406	I
1962	1962.5	4816.05	4535.392	9351.442	J
1966	1966.5	5210.122	4964.718	10174.84	K
1967	1967.5	5319.123	5080.813	10399.936	L
1968	1968.5	5434.458	5202.606	10637.064	M
1977	1977.5	6689.144	6482.15	13171.294	N
1978	1978.5	6776.023	165.676	11141.199	O
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Bubble charset</title>
	</head>
	<body>
	<div id="chart"></div>
	<select class="data"></select>
	<script src="d3.min.js" ></script>
	<script src="index.js" ></script>
	</body>
	</html>
	function render(data){
	let width = window.innerWidth,
	height = window.innerHeight,
	margin = { top:90 , left:60 , right:70 , bottom:30 },
	innerWidth = width - margin.left - margin.right,
	innerHeight = height - margin.top - margin.bottom;
	// last_updated
	// PopMale
	const color = d3.scaleOrdinal(d3.schemeSet1).domain(data.map(d => d.PopFemale))
	// let yValue = data.map( d=> d.PopMale)
	// let xValue = data.map( d=> d.Time )

	let yValue = data.map( d=> d.PopMale)
	let xValue = data.map( d=> d.Time)
	// let xValue = data.map( d=> d.PopTotal )
	var z = d3.scaleSqrt()
	.domain([d3.min(yValue),d3.max(yValue)])
	.range([ 0 , 15]);
	// let yScale = d3.scaleLinear().domain([d3.min(yValue),d3.max(yValue)]).range([innerHeight,0])
	let xScale = d3.scaleTime().domain(d3.extent(xValue)).range([0,innerWidth])
	// let xScale = d3.scaleTime().domain([0,d3.max(xValue)]).range([0,innerWidth])

	let yScale = d3.scaleLinear().domain([0,d3.max(yValue)]).range([innerHeight,0]).nice()
	// let xScale = d3.scaleLinear().domain([0,d3.max(xValue)]).range([0,innerWidth]).nice()

	// let selectData = d3.select(".data").append("option")
	// selectData.selectAll("option").data(data).enter().append("option")
	// .text(function(d,i){
	// })
	// return data[i].PopMale

	let selectData = d3.select(".data")
	selectData.selectAll("option").data(data).enter().append("option")
	.text(function(d,i){
	return data[i].PopMale
	})

	let xAxis = d3.axisBottom(xScale).tickSize(-innerHeight)
	let yAxis = d3.axisLeft(yScale).tickSize(-innerWidth)
	let line = d3.line()
	.x(d=>xScale(d.Time))
	.y(d=>yScale(d.PopFemale))

	let svg = d3.select("#chart").append("svg").attr("viewBox",`0 0 ${width} ${height}`)
	let g = svg.append("g").attr("transform",`translate(${margin.top},${margin.left})`)
	let tooltips = d3.select("#chart").append("div")

	// g.append("path")
	// .attr("d",line(data))
	// .attr("stroke","lightcoral")
	// .attr("fill","none")
	g.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx",d=>xScale(d.Time))
	.attr("cy",d=>yScale(d.PopFemale))
	.attr("r",d => z(d.PopTotal))
	.attr("fill",d=>color(d))
	.attr("opacity",.9)

	g.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("x",d=>xScale(d.Time))
	.attr("y",d=>yScale(d.PopFemale))
	.text(d=>d.text)
	.attr("text-anchor","middle")
	.attr("fill","blue")

	g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`)
	g.append("g").call(yAxis).attr("transform",`translate(0,0)`)
	}


	d3.csv("basic.csv").then(data=>{
	data.forEach(d=>{
	d.PopMale = +d.PopMale
	d.PopFemale = +d.PopFemale
	d.popTotal = +d.PopTotal
	d.Time = new Date(d.Time)

	})
	render(data)
	})