Published
Edited
Sep 24, 2020
svg = html`
<svg width="400" height="200" style="border:1px solid black">
<circle cx="100" cy="100" r="50" fill="red"/>
<rect x='100' y='50' width='100' height='30' fill='steelblue'>
</svg>`
html`
<style type='text/css'>
.fancy{fill:steelblue;}
</style>
d3 = require("d3@6")
d3.select(svg).append('rect').attr('x',0).attr('y',0).attr('width',50).attr('height',50).attr('class', 'fancy')
data = d3.csvParse(await FileAttachment("States2010.csv").text(), d3.autoType)
.sort( (a,b) => b.PercentCollegeGrad - a.PercentCollegeGrad)
{
var element = html`
<svg width="800" height="300" style="border:1px solid black" >
</svg>`;
var svg = d3.select(element);
var yScale = d3.scaleLinear().domain([0,100]).range([0,300]) //range of a data attribute in domain and sicne PercentCollegeGrad is in percent => it is between 0 to 100 and rang of range is between the range of height which here is between 0 to 300 //if you change the 100 to 50, it can be a zoom in task
var cScale = d3.scaleSequential(d3.interpolateBlues).domain([2000, d3.max(data, d=>d.IncomePerCapita)]) //colorscale in different shades of blue. it also it can be other domain[0,300]
// D3 stuff here...
var rects = svg.selectAll('rect')
.data(data).join('rect') //map rows to rectangles
.attr('x', (d,i) => i*15) //map the index to x channel
.attr('width' , 13)
.attr('height' , (d,i) => yScale(d.PercentCollegeGrad)) // map PercentCollegeGrad to height channel
.attr('y' , (d,i) => (300 - yScale(d.PercentCollegeGrad)))
.style('fill' , (d,i) => cScale(d.IncomePerCapita)); //map IncomePerCapita to color saturation
//style('fill' , 'SteelBlue') => if you want to have a static color for all bars
rects.append('title').text((d,i) => d.Abbrev + ' ' + d.PercentCollegeGrad + ' ' + d.IncomePerCapita);
return element;
}
d3.extent(data, d=>d.PercentCollegeGrad)
d3.extent(data, d=>d.IncomePerCapita)
md`##Percent college Grad of each State in the US
legend({
color: cScale,
title: "IncomePerCapita ($)"
})
{
var element = html`
<svg width="800" height="300" style="border:1px solid black" >
<text transform ='translate(15,250), rotate(270)' style='font: 12px Arial'> Percent College Grads(%) </text>
</svg>`;
var svg = d3.select(element);
var xScale = d3.scaleBand().domain(data.map(d=>d.Abbrev)).range([margin.left, width-margin.right]);
var yScale = d3.scaleLinear().domain([0,50]).range([height-margin.bottom, margin.top]);
//var cScale = d3.scaleSequential(d3.interpolateBlues).domain([0,65000]);
svg.append('g')
.attr("transform" , `translate(${margin.left - 2}, 0)`)
.call(d3.axisLeft(yScale));
svg.append('g')
.attr("transform" , `translate(0, ${height - margin.bottom +2})`)
.call(d3.axisLeft(xScale));
// D3 stuff here...
var rects = svg.selectAll('rect')
.data(data).join('rect') //map rows to rectangles
.attr('x', (d,i) => xScale(d.Abbrev)) //map the index to x channel
.attr('width' , xScale.bandwidth()-1)
.attr('height' , (d,i) => yScale(0) - yScale(d.PercentCollegeGrad)) // map PercentCollegeGrad to height channel
.attr('y' , (d,i) => (yScale(d.PercentCollegeGrad)))
.style('fill' , (d,i) => cScale(d.IncomePerCapita)) //map IncomePerCapita to color saturation
//style('fill' , 'SteelBlue') => if you want to have a static color for all bars
.on("mouseover", (event,d) => {
d3.select(event.target).style('fill','orange');})
.on("mouseout", (event,d) => {
d3.select(event.target).style('fill',cScale(d.IncomePerCapita));});
rects.append('title').text((d,i) => d.Abbrev + ' ' + d.PercentCollegeGrad + ' ' + d.IncomePerCapita);
return element;
}
margin = ({left: 40, top: 10, right: 10, bottom: 10})
cScale = d3.scaleSequential(d3.interpolateBlues).domain([0,65000]);
height = 300
width // by dragging the screen, you can see different values for width
import {legend} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
