Week 1 : Programmatic Images / Zach Pino

Zach Pino

Workspace

Published

ID IIT Fall 2020 Data Visualization Workshop

Edited

Sep 2, 2020

1 fork

Comments locked

6 stars

html`

<?xml version="1.0" encoding="utf-8"?>

viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">

.st0{fill:#FF0000;}

.st1{fill:#FF9700;stroke:#FF0000;stroke-width:17;stroke-miterlimit:10;}

.st2{fill:#00FF00;stroke:#FFFFFF;stroke-miterlimit:10;}

.st3{fill:#00FFFF;stroke:#FF00FF;stroke-width:14;stroke-miterlimit:10;}

.st4{fill:none;stroke:#FF00FF;stroke-width:3;stroke-miterlimit:10;}

.st5{fill:#231F20;}

.st6{font-family:'Helvetica-Light';}

.st7{font-size:28.6968px;}

.st8{fill:none;stroke:#00C7E0;stroke-width:6;stroke-miterlimit:10;}

.st9{fill:none;stroke:#00A2FF;stroke-width:3;stroke-miterlimit:10;}

.st10{fill:none;stroke:#0000FF;stroke-width:3;stroke-miterlimit:10;}

.st11{fill:#FFFFFF;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}

.st12{fill:#0000FF;}

</style>

<text x="512" y="70" class="st5 st6 st7">Data Visualization!</text>

<path class="st8" d="M394.85,356.38c-22.19,22.66-58.54,23.04-81.2,0.85c-18.13-17.75-18.43-46.83-0.68-64.96

c14.2-14.5,37.46-14.75,51.97-0.55c11.6,11.36,11.8,29.97,0.44,41.57c-9.09,9.28-23.98,9.44-33.26,0.35

c-7.42-7.27-7.55-19.18-0.28-26.61c5.82-5.94,15.35-6.04,21.29-0.22c4.75,4.65,4.83,12.28,0.18,17.03

c-3.72,3.8-9.82,3.87-13.62,0.14c-3.04-2.98-3.09-7.86-0.11-10.9"/>

<polyline class="st10" points="178.78,100.53 242.64,27.03 258.03,86.85 284.99,63.78 284.99,109.93 235.81,109.93 299.05,174.03

305.89,64.63 "/>

</svg>

html`

.boring-red{fill:#FF0000;}

.exciting-green-cyan{fill:#00FF00; stroke:#00FFFF; stroke-width:14}

.magenta-stroke{fill:none; stroke:#FF00FF; stroke-width:3}

</style>

<text x="490" y="105" class="label">Hello World!</text>

</svg>

html`

.boring-red{fill:#ff0000;}

.exciting-green-cyan{fill:#00FF00; stroke:#00FFFF; stroke-width:14}

.magenta-stroke{fill:none; stroke:#FF00FF; stroke-width:3}

.half-transparent{opacity:.5}

.label{font-family:courier; font-size:8pt}

</style>

<text x="490" y="105" class="label">Hello World!</text>

</svg>

html`

.cyan-stroke{stroke:#00CCFF; fill:none;}

.magenta-stroke{stroke:#FF00FF; fill:none;}

.orange-stroke{stroke:#FFAA00; fill:none;}

.teal-fill{fill:#00eeee}

.thick-stroke{stroke-width:5}

.thin-stroke{stroke-width:1}

</style>

</svg>

html`

.cyan-stroke{stroke:#00CCFF; fill:none;}

.magenta-dashed{stroke:#FF00FF; fill:none; stroke-dasharray:4 }

.orange-stroke{stroke:#FFAA00; fill:none;}

.thick-stroke{stroke-width:5}

.thin-stroke{stroke-width:1}

.label{text-anchor:left; alignment-baseline:middle}

</style>

</svg>

visualization = {

//screen variables

let width = 800;

let height = 200;

let margin = 50;

//data

let planets = [

{name:"Mercury", size: 4878, distance: .39, color: "#666699"},

{name:"Venus", size: 12104, distance: .723, color: "#ffcc00"},

{name:"Earth", size: 12756, distance: 1, color: "#33ccff"},

{name:"Mars", size: 6787, distance: 1.524, color: "#ff6666"},

{name:"Jupiter", size: 142796, distance: 5.203, color: "#ffaa99"},

{name:"Saturn", size: 120660, distance: 9.539, color: "#ddcc66"},

{name:"Uranus", size: 51118, distance: 19.18, color: "#99ccff"},

{name:"Neptune", size: 48600, distance: 30.06, color: "#33cccc"}

]

//create SVG artboard

let svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

//black background

let bg = svg.append("rect").attr("x",0).attr("y",0).attr("width",width).attr("height",height).attr('fill',"#000")

//create random white stars in the background

for (let i = 0; i < 100; i++){

let star = svg.append('circle')

.attr('cx', Math.random()*width)

.attr('cy', Math.random()*height)

.attr('r', Math.random()*2)

.attr('opacity', Math.random())

.attr('fill','#fff')

.attr('class', 'stars')

}

//find biggest distance and size

let maxDistance = d3.max(planets, d=>d.distance);

let maxSize = d3.max(planets, d=>d.size);

//draw planets with D3

let visualPlanets = svg.selectAll(".planets")

.data(planets)

.enter()

.append("circle")

.attr("cx", d => margin + ( (d.distance / maxDistance) * (width - (2*margin)) ) )

.attr("cy", height/2)

.attr('r', d => (d.size / maxSize) * 40)

.attr('id', d => d.name)

.attr('class', 'planets')

.attr('fill',d => d.color);

//draw sun as rectangle on the very edge of the artboard

let sol = svg.append("rect").attr("x",0).attr("y",0).attr("width",5).attr("height",height).attr('fill',"#fd0")

//show visualization in Observable

return svg.node();

}

footnote = (referencingCellName, number, text) => {

return html`<ol start=\"${number}"><li><a href="#${referencingCellName}">^</a> ${text}</li></ol>`;

}

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.

Learn more