Crafting Visual Stories with Data.
Published
Edited
Feb 21, 2019
html`
<div>
<p> 5 </p>
<p> 20 </p>
<p> 10 </p>
<p> 15 </p>
<p> 25 </p>
</div>
`
html`
<div>
<p> ${ smallData[0] } </p>
<p> ${ smallData[1] } </p>
<p> ${ smallData[2] } </p>
<p> ${ smallData[3] } </p>
<p> ${ smallData[4] } </p>
<div>
`
{
// Step 1
const el = document.createElement("div")
// Step 2
for( let i = 0; i < smallData.length; i++) {
// Step 3
const para = document.createElement("p")
para.innerText = smallData[i]
el.appendChild(para)
}
// Step 4
return el
}
// d3 with version 5+
d3 = require("d3@5")
{
//Step 1
const el = d3.create("div")
//Step 2
let vis = el.selectAll("p")
.data(smallData)
// Step 3
vis.enter()
.append("p")
.text(value)
// Step 4
return el.node()
}
// function to return each value in the array
value = function (d) {
return d
}
// Concise function definition
value1 = (d) => d
html`
<div>
<div style="width: 50px; height: 30px; background-color: blue; margin: 5px"></div>
<div style="width: 200px; height: 30px; background-color: blue; margin: 5px"></div>
<div style="width: 100px; height: 30px; background-color: blue; margin: 5px"></div>
<div style="width: 250px; height: 30px; background-color: blue; margin: 5px"></div>
<div style="width: 150px; height: 30px; background-color: blue; margin: 5px"></div>
</div>
`
{
//Step 1
const el = d3.create("div")
//Step 2
const vis = el.selectAll("div")
.data(smallData)
//Step 3
vis.enter()
.append("div")
.style("width", function (d) {return 10 * d + "px"} )
.style("height", "30px")
.style("background-color", "blue")
.style("margin", "5px")
//Step 4
return el.node()
}
func10x = function (d) {
return 10 * d + "px"
}
html`<svg width="300" height="200" fill="blue">
<rect x="0" y=" 0" width=" 50" height="30"></rect>
<rect x="0" y="40" width="200" height="30"></rect>
<rect x="0" y="80" width="100" height="30"></rect>
<rect x="0" y="120" width="250" height="30"></rect>
<rect x="0" y="160" width="150" height="30"></rect>
</svg>
`
{
// Step 1
const svg = d3.create("svg")
.attr("width", 300)
.attr("height", 200)
.attr("fill", "blue")
// Step 2
const vis = svg.selectAll("rect")
.data(smallData)
// Step 3
vis.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d,i) => i * 40)
.attr("width", d => d * 10)
.attr("height", 30)
// Step 4
return svg.node()
}
yFunc = function (datum, index) {
return index * 40
}
{
const data = [2, 50, 23]
const width = 300
const height = 300
// Scale for x
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width])
// Scale for y
const y = d3.scaleBand()
.domain(data)
.rangeRound([0, height])
.padding(0.1)
// Step 1
const svg = d3.create("svg")
.attr("xmlns", d3.namespace("svg").space )
.attr("width", width)
.attr("height", height)
.attr("fill", "blue")
// Step 2
const vis = svg.selectAll("rect")
.data(data)
// Step 3
vis.enter()
.append("rect")
.attr("x", 0)
.attr("y", y)
.attr("width", x )
.attr("height", y.bandwidth())
// Step 4
return svg.node()
}
// x Scale demo
x = d3.scaleLinear()
.domain([0, d3.max(smallData)])
.range([0, 300])
x(20)
// y Scale
y = d3.scaleBand()
.domain(smallData)
.rangeRound([0, 300])
.padding(0.1)
y.bandwidth()
y(5)
// Generate the array automatically
{
const arr = []
for (let i=0; i < smallData.length; i++){arr[i] = i}
return arr
}
// Map function
smallData.map(
function (d, i) {return i}
)
{
// Column bars for model vs price
const width = 500
const height = 300
const el = d3.create("svg")
.attr("xmlns", d3.namespace("svg").space)
.attr("width", width)
.attr("height", height)
.attr("fill", "black")
const xScale = d3.scaleLinear()
.domain([0, d3.max(cars, d => d.price)])
.range([0, width])
const yScale = d3.scaleBand()
.domain( cars.map(d => d.model))
.rangeRound([0, height])
.padding(0.1)
const vis = el.selectAll("rect")
.data(cars)
vis.enter()
.append("rect")
.attr("x", 0)
.attr("y", d => yScale(d.model) )
.attr("width", d => xScale(d.price) )
.attr("height", yScale.bandwidth() )
return el.node()
}
notes = d3.csv(notesUrl, d3.autoType)
"translate(30, 30)"
"translate(" + margin + "," + margin + ")"
{
const notes2015 = notes.filter( d => d.year === 2015)
// money vs. denom as barChart
const w = 400
const h = 400
const margin = ({"top": 40, "right": 40, "left": 40, "bottom": 40})
const width = w - margin.left - margin.right
const height = h - margin.top - margin.bottom
// Step 1
const el = d3.create("svg")
.attr("xmlns", d3.namespace("svg").space)
.attr("width", w)
.attr("height", h)
const main = el.append("g")
.attr("transform", `translate( ${margin.left} , ${margin.top} )`)
const xScale = d3.scaleBand()
.domain( notes2015.map(d => d.denom) )
.rangeRound([0, width])
.padding(0.1)
const yScale = d3.scaleLinear()
.domain([0, d3.max(notes2015, d => d.money)])
.range([height, 0])
const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
.domain( notes2015.map(d => d.denom) )
// Step 2
const vis = main.selectAll("rect")
.data(notes2015)
// Step 3
vis.enter()
.append("rect")
.attr("x", d => xScale(d.denom) )
.attr("y", d => yScale(d.money) )
.attr("width", xScale.bandwidth() )
.attr("height", d => height - yScale(d.money) )
.attr("fill", d => colorScale(d.denom))
main.append("g")
.call( d3.axisLeft(yScale) )
main.append("g")
.attr("transform", `translate(0, ${height} )`)
.call( d3.axisBottom(xScale) )
const legendC = legends.legendColor()
.shape("circle")
.shapeRadius(8)
.shapePadding(20)
.orient("vertical")
.scale(colorScale)
main.append("g")
.attr("transform", `translate(${width + 10}, 0 )`)
.call(legendC)
// Step 4
return el.node()
}
legends = require("d3-svg-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.
