seschultz/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Inspired by Figure 5.10(d) from Visualization Analysis and Design by Tamara Munzner
Built with blockbuilder.org

  
## example.csv

          
            x
            y
            color

            
              200
              480
              gray

            
              320
              200
              gray

            
              535
              140
              gray

            
              600
              390
              gray

            
              640
              492
              gray

            
              120
              170
              pink

            
              270
              210
              pink

            
              270
              470
              pink

            
              370
              75
              pink

            
              465
              280
              pink

            
              210
              290
              purple

            
              310
              400
              purple

            
              410
              320
              purple

            
              485
              130
              purple

            
              525
              100
              purple

            
              510
              300
              purple

            
              500
              470
              purple

            
              250
              60
              teal

            
              290
              140
              teal

            
              300
              260
              teal

            
              320
              310
              teal

            
              450
              475
              teal

            
              600
              270
              teal

            
              630
              360
              teal

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

  <script>

    const svgObj = d3.select("body").append("svg")
      .attr("width", 1000)
      .attr("height", 500)

    const xValue=d=>d.x
    const yValue=d=>d.y

    const xScale = d3.scaleLinear()
    const yScale = d3.scaleLinear()

    const colorValue=d=>d.color

    const type=d=>{
      d.x=+d.x;
      d.y=+d.y;
      return d;
    };

    d3.csv('example.csv', type, data=>{
      /*
      xScale
      	.domain(d3.extent(data,xValue))
      	.range([0,svgObj.width])
      	.nice()

      yScale
      	.domain(d3.extent(data,yValue))
      	.range([svgObj.Height,0])
      	.nice()*/

      svgObj.selectAll('circle')
      	.data(data)
      	.enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => 500-yScale(yValue(d)))
        		.attr('fill', d => (colorValue(d)))
            .attr('fill-opacity', 1)
            .attr('r', 10);
    })
  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
x	y	color
200	480	gray
320	200	gray
535	140	gray
600	390	gray
640	492	gray
120	170	pink
270	210	pink
270	470	pink
370	75	pink
465	280	pink
210	290	purple
310	400	purple
410	320	purple
485	130	purple
525	100	purple
510	300	purple
500	470	purple
250	60	teal
290	140	teal
300	260	teal
320	310	teal
450	475	teal
600	270	teal
630	360	teal
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>

	<body>

	<script>

	const svgObj = d3.select("body").append("svg")
	.attr("width", 1000)
	.attr("height", 500)

	const xValue=d=>d.x
	const yValue=d=>d.y

	const xScale = d3.scaleLinear()
	const yScale = d3.scaleLinear()

	const colorValue=d=>d.color

	const type=d=>{
	d.x=+d.x;
	d.y=+d.y;
	return d;
	};

	d3.csv('example.csv', type, data=>{
	/*
	xScale
	.domain(d3.extent(data,xValue))
	.range([0,svgObj.width])
	.nice()

	yScale
	.domain(d3.extent(data,yValue))
	.range([svgObj.Height,0])
	.nice()*/

	svgObj.selectAll('circle')
	.data(data)
	.enter().append('circle')
	.attr('cx', d => xScale(xValue(d)))
	.attr('cy', d => 500-yScale(yValue(d)))
	.attr('fill', d => (colorValue(d)))
	.attr('fill-opacity', 1)
	.attr('r', 10);
	})
	</script>
	</body>
	</html>