Desigrammer.
Published
Edited
Feb 12, 2020
md`## Load libraries, look at data`
md`Load in libraries`
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
stats = d3.csvParse(await FileAttachment("cityfixitdata@2.csv").text(), d3.autoType)
md`Take a look at the first five records, using a nice formatter`
printTable(stats.slice(0,10))
md`Look at the end of the table with negative indexing`
vl.markLine()
.data(stats)
.encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType'),
)
.render()
html`<figure>
${await FileAttachment("linechart2.png").image()}
</figure>`
{
const line = vl.markLine({strokeWidth: 3, opacity: 0.4, interpolate: 'monotone'}).data(stats).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType'),
);
const point = vl.markCircle({size: 75}).data(stats).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests'),
);
return vl.layer(line, point).width(300).height(600).render();
}
html`<figure>
${await FileAttachment("linechart3.png").image()}
</figure>`
{
const line = vl.markLine({strokeWidth: 3, opacity: 0.4, interpolate: 'monotone'}).data(stats).encode(
vl.x().fieldO('Year').axis({labelAngle:'0'}),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType'),
);
const point = vl.markPoint({filled:true, size: 75}).data(stats).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests').title('Number of Requests'),
vl.shape().fieldN('ProblemType'),
);
return vl.layer(line, point).width(300).height(600).render();
}
html`<figure>
${await FileAttachment("linechart4.png").image()}
</figure>`
{
const colors = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['#A52A2A', '#228B22', '#1E90FF', '#FFA500', '#FFD700', 'A52A2A', '4B0082', 'B2222', '228B22', 'B0C4DE']
};
const shapes = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['circle', 'square', 'square', 'triangle', 'circle', 'triangle', 'triangle', 'square', 'square', 'triangle']
};
const line = vl.markLine({strokeWidth: 3, opacity: 0.4, interpolate: 'monotone'}).data(stats).encode(
vl.x().fieldO('Year').axis({labelAngle:'0'}),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType').scale(colors),
);
const point = vl.markPoint({filled:true, size: 75}).data(stats).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests').title('Number of Requests'),
vl.color().fieldN('ProblemType').scale(colors),
vl.shape().fieldN('ProblemType').scale(shapes),
);
return vl.layer(line, point).width(300).height(600).render();
}
html`<figure>
${await FileAttachment("linechart5.png").image()}
</figure>`
{
const colors = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['#A52A2A', '#228B22', '#1E90FF', '#FFA500', '#FFD700', 'A52A2A', '4B0082', 'B2222', '228B22', 'B0C4DE']
};
const shapes = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['circle', 'square', 'square', 'triangle', 'circle', 'triangle', 'triangle', 'square', 'square', 'triangle']
};
const line = vl.markLine({strokeWidth: 3, opacity: 0.4, interpolate: 'monotone'}).data(stats).encode(
vl.x().fieldO('Year').axis({labelAngle:'0'}),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType').scale(colors).legend({orient: 'left'}),
).title({
text: 'By Year',
size: 20,
type: 'Tahoma',
});
const point = vl.markPoint({filled:true, size: 75}).data(stats).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests').title('Number of Requests'),
vl.color().fieldN('ProblemType').scale(colors),
vl.shape().fieldN('ProblemType').scale(shapes),
);
return vl.layer(line, point).width(300).height(600).render();
}
html`<figure>
${await FileAttachment("barchart3.png").image()}
</figure>`
vl.markBar()
.data(stats)
.encode(
vl.x().fieldQ('NumRequests'),
vl.y().fieldO('Year'),
vl.row().fieldO('ProblemType'),
vl.color().fieldO('Year').scale({scheme: 'greys'})
)
.render()
html`<figure>
${await FileAttachment("barchart4.png").image()}
</figure>`
vl.markBar()
.data(stats)
.encode(
vl.x().fieldQ('NumRequests'),
vl.y().fieldO('Year'),
vl.row().fieldO('ProblemType'),
vl.color().fieldO('Year').scale({scheme: 'greys'})
)
.render()
vl.markBar()
.data(stats)
.encode(
vl.x().fieldQ('NumRequests').title(null),
vl.y().fieldO('Year').title(null),
vl.row().fieldO('ProblemType'),
vl.color().fieldO('Year').scale({scheme: 'greys'}).legend(null)
).title({
text: 'By Problem Type',
location: 'center',
size: 20,
type: 'Tahoma',
})
.render()
vl.markBar()
.data(stats)
.encode(
vl.x().fieldQ('NumRequests').title(null),
vl.y().fieldO('Year').title(null),
vl.row().fieldO('ProblemType'),
vl.color().fieldO('Year').scale({scheme: 'greys'}).legend(null)
)
.render()
html`<figure>
${await FileAttachment("barchart5.png").image()}
</figure>`
{
const bar = vl.markBar().encode(
vl.x().fieldQ('NumRequests').title(null),
vl.y().fieldO('Year').title(null),
vl.row().fieldO('ProblemType'),
vl.color().fieldO('Year').scale({scheme: 'greys'}).legend(null)
)
const txt = bar.markText({dx:15}).encode(
vl.text().fieldQ('NumRequests'),
vl.color("black")
)
return vl.layer(txt,bar).height(40).facet({row:vl.column('ProblemType')}).data(stats).render();
}
html`<figure>
${await FileAttachment("combined_chart1.png").image()}
</figure>`
{
const colors = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['#A52A2A', '#228B22', '#1E90FF', '#FFA500', '#FFD700', 'A52A2A', '4B0082', 'B2222', '228B22', 'B0C4DE']
};
const shapes = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['circle', 'square', 'square', 'triangle', 'circle', 'triangle', 'triangle', 'square', 'square', 'triangle']
};
const line = vl.markLine({strokeWidth: 3, opacity: 0.4, interpolate: 'monotone'}).encode(
vl.x().fieldO('Year').axis({labelAngle:'0'}),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType').scale(colors).legend({orient: 'left'}),
).title({
text: 'By Year',
size: 20,
type: 'Tahoma',
});
const point = vl.markPoint({filled:true, size: 75}).encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests').title('Number of Requests'),
vl.color().fieldN('ProblemType').scale(colors),
vl.shape().fieldN('ProblemType').scale(shapes),
);
const linechart = vl.layer(line, point).height(660).width(250).data(stats);
const bar = vl.markBar().encode(
vl.x().fieldQ('NumRequests').title(null),
vl.y().fieldN('Year').title(null),
vl.row().fieldN('ProblemType'),
vl.color().fieldQ('Year').scale({scheme: 'greys'}).legend(null)
);
const txt = bar.markText({dx:15}).encode(
vl.text().fieldQ('NumRequests'),
vl.color("black")
);
const barchart = vl.layer(txt,bar).height(45).facet({row:vl.column('ProblemType')}).data(stats);
return vl.hconcat(linechart, barchart).render();
}
html`<figure>
${await FileAttachment("combined_withclickfix@1.png").image()}
</figure>`
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.
