Visualization can transform the reach of open data and revolutionize transparency and accountability.
d3 = require("d3@7");
d3.version
d3v6 = require("d3@6");
d3v6.version
d3v7 = require("d3@7");
d3v7.version
import { alphabet } from "@observablehq/plot-test-data"
desiredData = alphabet.data;
FileAttachment("Position@2.svg").image({ width: 620})
func1 = d => d*1000
func2 = function (d) {
return d*1000;
}
func1(0.12);
func2(0.12);
height = 250;
width = 600;
firstchart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox",[0, 0, width, height]);
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', (d, i) => i * 25)
.attr('y', d => height - d.frequency*1500)
.attr('width', 20)
.attr('height', d => d.frequency*1500)
.style('fill', 'purple');
// Specific to Observable
return svg.node();
}
yScale = d3.scaleLinear()
.domain([0,d3.max(desiredData, d => d.frequency)])
.range([height - margin.bottom, margin.top]);
desiredData
d3.max(desiredData, d => d.frequency);
height - margin.bottom
yScale(0);
yScale(0.127);
yScale(0.1);
yLogScale = d3.scaleLog()
.domain(d3.extent(desiredData, d => d.frequency)) //extent returns an Array[2] as [min, max]
.range([height - margin.bottom, margin.top]);
d3.extent(desiredData, d => d.frequency);
yLogScale(d3.min(desiredData, d => d.frequency));
yLogScale(0.127);
yLogScale(0.1);
yLogScale(0.001);
color = d3.scaleLinear()
.domain([10, 100])
.range(["yellow", "white"]);
color(20);
color(50);
xScale = d3.scaleBand()
.domain(desiredData.map(d=>d.letter))
.range([margin.left, width - margin.right])
.padding(0.1);
desiredData.map(d=>d.letter);
xScale("A");
xScale("F");
xScale.bandwidth();
chartwithscales = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox",[0, 0, width, height]);
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', d => xScale(d.letter))
.attr('y', d => yScale(d.frequency))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.frequency))
.style('fill', 'purple');
// Specific to Observable
return svg.node();
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale)
.ticks(width / 80)
.tickSizeOuter(0)
)
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 10)
.attr("y", -20)
.attr("text-anchor", "end")
.text("Frequency")
)
barchartwithaxis = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox",[0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', d => xScale(d.letter))
.attr('y', d => yScale(d.frequency))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.frequency))
.style('fill', 'purple');
// Specific to Observable
return svg.node();
}
strangePlot = {
const width2 = 600;
const height2 = 250;
const cxScale = d3.scalePoint()
.domain(alphasortedData.map(d=>d.letter))
.range([margin.left, width2 - margin.right]);
const rScale = d3.scaleSqrt()
.domain([0,d3.max(alphasortedData, d => d.frequency)])
.range([0, cxScale.step()/2]);
const xAxis = g => g
.attr("transform", `translate(0,${height2/2 + cxScale.step()/2 })`)
.call(d3.axisBottom(cxScale)
.ticks(width2 / 80)
.tickSizeOuter(0)
)
const svg = d3.create("svg")
.attr("width", width2)
.attr("height", height2)
.attr("viewBox",[0, 0, width2, height2]);
svg.append("g")
.call(xAxis);
svg.selectAll('circle')
.data(alphasortedData)
.join('circle')
.attr('cx', d => cxScale(d.letter))
.attr('cy', height2/2)
.attr('r', d => rScale(d.frequency))
.style('fill', 'purple');
// Specific to Observable
return svg.node();
}
alphasortedData = desiredData.sort((a,b)=>a.letter.localeCompare(b.letter));
import {chart as barchart} with {desiredData as alphabet, margin} from "@d3/bar-chart"
barchart
newData = desiredData.slice(4,19);
import {chart as newbarchart} with {newData as alphabet} from "@d3/bar-chart"
newbarchart
<svg id="main-chart"></svg>
{
//First remove the current content of the main-chart (from previous cell runs).
//Probably, out from Observable this step isn't needed
d3.select('#main-chart').html(null);
//create the plot area
const svg = d3.select('#main-chart')
.attr('width', width) // add attribute width to SVG
.attr('height', height) // add attribute height to SVG
.attr("viewBox",[0, 0, width, height]);
//Add X axis
svg.append("g")
.call(xAxis);
//Add Y axis
svg.append("g")
.call(yAxis);
//Add the bar plot
svg.selectAll('rect')
.data(desiredData)
.join('rect')
.attr('x', d => xScale(d.letter))
.attr('y', d => yScale(d.frequency))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(0) - yScale(d.frequency))
.style('fill', 'purple');
//Return 1 to indicate everything is ok
return 1;
}
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.
