Skip to content

Commit

Permalink
legend
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexziweiwang
alexziweiwang committed May 12, 2020
1 parent 072233e commit 1c5d8b9
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 19 deletions.
96 changes: 94 additions & 2 deletions finalViz1mapHm.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,9 @@ <h1 class="title">
rect.attr('height', config.plot.height);

// scales for data
let scale = {};
let scale = {
r: d3.scaleSqrt()
};

scale.x = d3.scaleBand();
scale.x.range([0, config.plot.width]);
Expand All @@ -256,6 +258,8 @@ <h1 class="title">

// https://github.com/d3/d3-scale-chromatic
scale.color = d3.scaleSequential(d3.interpolatePurples);
scale.r.range([1, 20]).domain([0, 90]);



//interpolatePuBuGn
Expand Down Expand Up @@ -384,7 +388,7 @@ <h1 class="title">
,"crockery", "grout", "basaltic clay", "glass mosaic tile", "gfrc tile", "tile", "glass mosaic", "laminated digital print", "polyurethane paint"]);

const csvMat = "artcommision_categorized_material - Civic_Art_Collection.csv";
d3.csv(csvMat, recordMaterialInfo).then(makeHMDataFormat).then(drawAxis).then(drawHeatmap).then(drawColorLegend);
d3.csv(csvMat, recordMaterialInfo).then(makeHMDataFormat).then(drawAxis).then(drawHeatmap).then(drawColorLegend).then(drawCircleLegend);
d3.json(urls.basemap).then(function(json) {
// makes sure to adjust projection to fit all of our regions
projection.fitSize([960, 600], json);
Expand Down Expand Up @@ -1360,6 +1364,7 @@ <h1 class="title">
var intersectionSet = locSet.intersection(acsSet);
caseCount = intersectionSet.size;


radius = (caseCount - 1) * 0.36 + 5;
} else {
radius = 5;
Expand Down Expand Up @@ -1500,6 +1505,93 @@ <h1 class="title">

}



function drawCircleLegend() {
/*
38's r = 18.32
29's r = 15.08
19's r = 11.48
9's r = 7.88
radius = (caseCount - 1) * 0.36 + 5
*/

const legendWidth = 150;
const legendHeight = 50;

// place legend in its own group
const group = svg.append("g");
group.attr('id', 'circle-legend');

// shift legend to appropriate position
group.attr('transform', translate(config.svg.width - config.margin.right - legendWidth - 30, config.margin.top - 10));

const title = group.append('text')
.text('Count of Art Items at the Location');
title.attr('dx', -110);
title.attr('dy', 20);

const circ1 = group.append("circle")
.attr("cx", -70)
.attr("cy", 50)
.attr("r", 18.32)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t1 = group.append('text')
.text('38');
t1.attr('dx', -82);
t1.attr('dy', 85);

const circ2 = group.append("circle")
.attr("cx", -30)
.attr("cy", 50)
.attr("r", 15.08)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t2 = group.append('text')
.text('29');
t2.attr('dx', -41);
t2.attr('dy', 85);

const circ3 = group.append("circle")
.attr("cx", 4)
.attr("cy", 50)
.attr("r", 11.48)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t3 = group.append('text')
.text('19');
t3.attr('dx', -6);
t3.attr('dy', 85);

const circ4 = group.append("circle")
.attr("cx", 32)
.attr("cy", 50)
.attr("r", 7.88)
.style("stroke", "silver")
.style("fill", "#e6b800");
const t4 = group.append('text')
.text('9');
t4.attr('dx', 26);
t4.attr('dy', 85);

const circ5 = group.append("circle")
.attr("cx", 55)
.attr("cy", 50)
.attr("r", 5)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t5 = group.append('text')
.text('1');
t5.attr('dx', 51);
t5.attr('dy', 85);
}


function drawColorLegend() {
const legendWidth = 200;
const legendHeight = 20;
Expand Down
99 changes: 85 additions & 14 deletions finalViz2Hierarchical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ <h1 class="title">
,"crockery", "grout", "basaltic clay", "glass mosaic tile", "gfrc tile", "tile", "glass mosaic", "laminated digital print", "polyurethane paint"]);

const csvMat = "artcommision_categorized_material - Civic_Art_Collection.csv";
d3.csv(csvMat, recordMaterialInfo).then(makeCirTreeDataFormat).then(cirtree).then(drawColorLegend);
d3.csv(csvMat, recordMaterialInfo).then(makeCirTreeDataFormat).then(cirtree).then(drawColorLegend).then(drawCircleLegend);
d3.json(urls.basemap).then(function(json) {
// makes sure to adjust projection to fit all of our regions
projection.fitSize([960, 600], json);
Expand Down Expand Up @@ -975,20 +975,91 @@ <h1 class="title">
d3.select(d.properties.outline).classed("active", false);
});

// add tooltip
/* basemap.on("mouseover.tooltip", function(d) {
tip.text(d.properties.nhood);
tip.style("visibility", "visible");
})
.on("mousemove.tooltip", function(d) {
const coords = d3.mouse(g.basemap.node());
tip.attr("x", coords[0]);
tip.attr("y", coords[1]);
})
.on("mouseout.tooltip", function(d) {
tip.style("visibility", "hidden");
});

}

function drawCircleLegend() {
/*
38's r = 18.32
29's r = 15.08
19's r = 11.48
9's r = 7.88
radius = (caseCount - 1) * 0.36 + 5
*/

const legendWidth = 150;
const legendHeight = 50;

// place legend in its own group
const group = svg.append("g");
group.attr('id', 'circle-legend');

// shift legend to appropriate position
group.attr('transform', translate(1440 - 220 - legendWidth - 30, 0));

const title = group.append('text')
.text('Count of Art Items at the Location');
title.attr('dx', -590);
title.attr('dy', 25);

const circ1 = group.append("circle")
.attr("cx", -570)
.attr("cy", 50)
.attr("r", 18.32)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t1 = group.append('text')
.text('38');
t1.attr('dx', -581);
t1.attr('dy', 85);

const circ2 = group.append("circle")
.attr("cx", -530)
.attr("cy", 50)
.attr("r", 15.08)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t2 = group.append('text')
.text('29');
t2.attr('dx', -541);
t2.attr('dy', 85);

const circ3 = group.append("circle")
.attr("cx", -495)
.attr("cy", 50)
.attr("r", 11.48)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t3 = group.append('text')
.text('19');
t3.attr('dx', -505);
t3.attr('dy', 85);

const circ4 = group.append("circle")
.attr("cx", -463)
.attr("cy", 50)
.attr("r", 7.88)
.style("stroke", "silver")
.style("fill", "#e6b800");
const t4 = group.append('text')
.text('9');
t4.attr('dx', -468);
t4.attr('dy', 85);

const circ5 = group.append("circle")
.attr("cx", -433)
.attr("cy", 50)
.attr("r", 5)
.style("stroke", "silver")
.style("fill", "#e6b800");

const t5 = group.append('text')
.text('1');
t5.attr('dx', -437);
t5.attr('dy', 85);
}


Expand Down
7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,10 @@ <h2> Theme: </h2>


<h2> Attribution: </h2>



<p>Inspiration of hierarchical data wrangling: <a href = "https://observablehq.com/@sjengle/java-11-api-hierarchy-data-wrangling" targer = _blank>Java 11 API Hierarchy - Data Wrangling</a> </br>
Inspiration of hierarchical data visualization: <a href= "https://observablehq.com/@sjengle/java-11-api-hierarchy-visualization" target = _blank>Java 11 API Hierarchy - Visualization </a></br>
Inspiration of geospatial data visualizaton: <a href= "https://blockbuilder.org/sjengle/1d673a35f2cb304c572a137277d3d150" target = _blank> Template of Lab - Maps</a> </br>
Inspiration of heatmap: <a href = "https://blockbuilder.org/sjengle/47c5c20a18ec29f4e2b82905bdb7fe95" target = _blank>Zillow Affordability Heatmap</a> </p>

</div>
<!-- End page content -->
Expand Down

0 comments on commit 1c5d8b9

Please sign in to comment.