Skip to main content
SimilarExport ZIP
100%

S18 - HW 3 - Bar Chart

✓ Published0🌍 Public
LLecy277
Last edited Jan 31, 2018
Created on Jan 31, 2018

Two bar charts display the frequency of letters in English, with the first using a categorical color scale and the second using a color-saturation scale tied to frequency bins. The charts load tab-separated data with `d3.tsv`, map letter categories to `d3.scaleBand` positions and frequency values to `d3.scaleLinear`, and render SVG rectangles. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while bar colors are set via conditional logic in the `fill` attribute, using named CSS colors and hex codes.

AI-generated description

CS 725/825 - Spring 2018 - Homework 3 - Bar Chart

See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S18/HW3

Explanation of how the bar chart is constructed (for the most part) is available at https://bost.ocks.org/mike/bar/3/

Other helpful links (scale, domain, range):

Original README.md

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3885304'>Bar Chart</a>

forked from <a href='http://bl.ocks.org/weiglemc/'>weiglemc</a>'s block: <a href='http://bl.ocks.org/weiglemc/eda81fbb0af9c2de3ca5fccd3943b0e2'>S18 - HW 3 - Bar Chart</a>

forked from <a href='http://bl.ocks.org/Lecy277/'>Lecy277</a>'s block: <a href='http://bl.ocks.org/Lecy277/55d6d7c9de79653c828aaa02c6aa84be'>S18 - HW 3 - Bar Chart</a>

HW3 Barchart Q&A

1.What is the type of mark used in the bar chart?

A Line is used as the mark.

2.List the channels, the attribute they are mapped to, and the data type of that attribute.

The vertical line is the spatial position channel for the quantitative attribute of "Frequency" and the horizontal line is the spatial position channel for the categorical attribute "Letters of the alphabet". The visual channel is displayed through the colors, steelblue for chart 1 and teal for chart 2.

3.After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.

The vertical line is the spatial position channel for the quantitative attribute of "Frequency" and the horizontal line is the spatial position channel for the categorical attribute "Letters of the alphabet" with a visual channel added to display each letter of the alphabet with a different color hue. The Colors start with browns at "A" & "B", then Reds for "C" through "F", then Purples for "G" through "I", then Yellows for "J" through "M", then Greens for "N" through "T", and finally blues for "U" through "Z".

4.After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.List all of the channels mapped to the frequency attribute.

The horizontal line is the spatial position channel for the categorical attribute "Letters of the alphabet" and the vertical line is the spatial position channel for the quantitative attribute of "Frequency" with a color saturation channel added to help distinguish the frequency with which each letter of the alphabet was used based on the frequency tics that range from .01 to .12 as follows:

Frequency tic <= .01 "Pink".

Between frequency tic > 01 && frequency tic <= .02 display as "HotPink".

Between frequency tic >.02 && frequency tic <= .03 display as "DeepPink".

Between frequency tic >.03 && frequency tic <= .04 display as "PaleVioletRed".

Between frequency tic >.04 && frequency tic <= .05 display as "MediumVioletRed".

Between frequency tic >.05 && frequency tic <= .06 display as "lightcoral".

Between frequency tic >.06 && frequency tic <= .07 display as "IndianRed".

Between frequency tic >.07 && frequency tic <= .08 display as "Crimson".

Between frequency tic >.08 && frequency tic<= .09 display as "FireBrick".

Between frequency tic >.09 && frequency tic <= .10 display as "Red".

Frequency tic >.10 display as "OrangeRed".

mit Licensed

Similar vizzes

Loading thumbnail…

S18 - HW 3 - Bar Chart

This bar chart visualizes the frequency of letter usage in English, with each letter represented as a bar. The chart uses a line mark with vertical spatial position encoding the quantitative frequency attribute and horizontal spatial position encoding the categorical letter attribute. The top chart applies an ordinal color scale (d3.schemeCategory20) to map color hue to each letter, though this adds no meaningful grouping. The bottom chart uses color saturation to encode frequency, with darker shades indicating higher usage. Data is loaded from a TSV file and rendered as SVG using D3 v4. The chart includes axes, labels, and a legend, with the saturation-based encoding using a multiplier to enhance perceptual differences in the frequency values.

HHussamHallak
91% match
Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, with letters arranged along the x-axis and their proportional occurrence on the y-axis. It uses D3 v4 with SVG rendering, parsing tab-separated values from a TSV file via `d3.tsv` and `d3.dsv`. The chart applies conventional margins and employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axis` components for tick marks. Hovering over a bar changes its fill from steelblue to brown, as defined in the CSS.

GGolodhros
86% match
Loading thumbnail…

Bar Chart

A bar chart displays the relative frequency of each letter in the English language, sourced from a TSV file. The bars are colored steelblue and turn brown on hover, with axes for letter categories and percentage values. Built with D3 v4, it uses `d3.tsv` for parsing, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for rendering the axes as SVG elements.

Mmbostock
85% match
Loading thumbnail…

Bar Chart

A bar chart displays the frequency of each letter in the English language, using data parsed from a TSV file. The visualization encodes letters along the x-axis with an ordinal scale and frequencies on the y-axis with a linear scale, formatting tick labels as percentages. Built with D3.js, it loads data via `d3.tsv`, applies margins, and draws axes with `d3.svg.axis`. Purple bars animate their height upward over one second using a `transition` on the `y` and `height` attributes, while hovering changes their fill to brown.

RRoxIv
84% match
Loading thumbnail…

Bar Chart IIIb

This example displays the relative frequencies of letters in the English language as a set of vertical bars, one per alphabet letter. The chart is generated with D3 version 3, using an ordinal scale with `rangeRoundBands` to position bars and a linear scale to map value to height. Data is loaded from a tab-separated file via `d3.tsv` and rendered as SVG rectangles with white value labels. The design uses a fixed steelblue fill for all bars, creating a simple, unadorned visualization.

Mmbostock
84% match
Loading thumbnail…

Bar Chart in D3 v5

This bar chart displays the frequency of each letter in the English alphabet, with letters arranged along the x-axis and their proportional frequencies along the y-axis. It first parses a tab-separated values (TSV) file using `d3.tsv`, converting string frequencies to numbers. The visualization then applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Rendered as SVG rectangles with a steelblue fill that turns brown on hover, the chart uses a conventional margin layout and highlights bars without tooltips or animation.

GGolodhros
84% match
Loading thumbnail…

Bar Chart 3

This bar chart displays the relative frequency of each letter in the English language, based on a tab-separated dataset loaded via `d3.tsv`. The visualization uses an SVG rendering with axes generated by `d3.axisBottom` and `d3.axisLeft`, with the y-axis formatted as percentages. Hovering over a steelblue bar turns it brown. The chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with margins applied through a `g` element transform.

MMTClass
84% match
Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English alphabet, using steelblue bars that turn brown on hover. The chart is rendered with SVG and loads its data from a TSV file containing letter-frequency pairs. It uses D3’s ordinal scale for the x-axis (letters) and a linear scale for the y-axis (frequencies, formatted as percentages), with axes generated via `d3.svg.axis`. The code leverages `d3.tsv` for data parsing, `d3.max` to set the domain, and D3’s selection and data-join methods to draw the rectangles. Margins follow the conventional layout, with the y-axis labeled "Frequency".

AAdamBlaine1
84% match