Qinita

@Qinita·13 public vizzes

Data Visualization Module 3 - Bar Chart

This example displays a simple horizontal bar chart of a static JavaScript array of numeric values. Each value is represented by a steelblue rectangle, with the bar width proportional to the number and the numeric label printed at its end. The code uses D3 v3’s `d3.select` and `data` binding to append `div` elements, and applies a linear scale (`d3.scale.linear`) to map the data domain to pixel widths up to 420 pixels. All styling is done via inline CSS on the divs.

May 4, 2015

Loading thumbnail…

Employee time series data

This example shows employee time-series data as a line chart with overlaid scatterplot circles, tracking a single numeric value across 60 time steps. The visualization uses d3.csv to load the data, then applies d3.scale.linear for both axes and d3.svg.line to generate the path. d3.svg.axis renders the bottom and left axes, while circles are appended with SVG attributes for each data point. The chart is drawn in an SVG canvas with a steelblue stroke, and the y-axis domain starts at zero, making the initial values appear relatively flat before rising after time step 40.

May 4, 2015

Loading thumbnail…

Ice cream yum yum!

This visualization shows the relationship between daily temperature and ice cream sales, plotting each data point as a dot on a scatterplot and connecting them with a line to highlight the upward trend. The line and circles are rendered in SVG using D3 v3, with sales rising as temperature increases. The code uses d3.csv to load the data, d3.scale.linear for the x and y axes, and d3.svg.line plus circle elements to draw the chart, with both axes oriented and ticked via d3.svg.axis.

May 4, 2015

Loading thumbnail…

Ice Cream yum yum!

A scatterplot and line chart show the relationship between temperature and ice cream sales, with each circle marking a data point and the line tracing the overall trend. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.linear` for the x and y ranges, `d3.svg.line` to generate the path, and `d3.svg.axis` for the axes. Data is loaded from a local CSV file via `d3.csv`, with both temperature and sales parsed as numeric values. The chart includes a steelblue line and white axis strokes on a dark background.

May 4, 2015

Loading thumbnail…

Gist 8ecb1b00a620078a9e4f

A line chart with circular markers shows the relationship between temperature and ice cream sales from a CSV file, with sales rising as temperature increases. The chart uses a linear x-axis for temperature and a linear y-axis for sales, both scaled to the data’s maximum values. Built with D3 v3, the visualization employs `d3.svg.line()` for the line path and `d3.svg.axis()` for the axes, rendering the SVG elements directly in the browser. Data points are added as circles via `svg.selectAll("dot").data()` and color-coded in steelblue.

May 4, 2015

Loading thumbnail…

Ice cream yum yum!

A line chart and scatterplot overlay show the positive relationship between temperature and ice cream sales, with sales rising from roughly 185 to 614 as temperature increases from 11.9 to 25.1 degrees. The visualization uses D3 v3 to load CSV data from `icecream.csv`, scales the axes with `d3.scale.linear`, draws the line with `d3.svg.line`, and renders circles for each data point. The SVG elements are styled with steelblue lines and grey axes.

May 4, 2015

Loading thumbnail…

Lily Qian D3.js hw1

This interactive D3.js visualization shows flight connections between U.S. airports on a choropleth map, with a linked bar chart that displays the top 20 destinations for a selected airport. Clicking a purple airport circle filters the bar chart below, while the map itself uses Voronoi cells for hover interaction and arcs to show flight routes. Built with D3 v3, the code leverages `d3.geo.albers` for map projection, `topojson` for state boundaries, and a queue-based loader to asynchronously fetch airport, flight, and U.S. geographic data from raw GitHub sources.

May 4, 2015

Loading thumbnail…

Data Visualization Module 4

This example shows the monthly frequency of an unspecified event across a year as a bar chart. It uses D3 v3 with an ordinal x-axis for months and a linear y-axis formatted as percentages, rendering bars as SVG rectangles with steelblue fills that turn brown on hover. The data loads from a CSV file containing Month and Frequency columns. The visualization applies axes via `d3.svg.axis`, scales with `d3.scale.ordinal` and `d3.scale.linear`, and binds data to rectangles using the standard enter selection.

May 4, 2015

Loading thumbnail…

Gist ab606e427fd05966a6fc

A grouped bar chart displays monthly event frequencies as percentages from January through December, loaded from a CSV file. The bars are steel blue and turn brown on hover. D3’s ordinal scale with `rangeRoundBands` positions the bars, while a linear scale maps frequency values. SVG rectangles render the bars, and `d3.svg.axis` generates the bottom and left axes with percentage tick labels. The y-axis is labeled “Frequency,” and the chart uses a fixed 960×500 pixel canvas.

May 4, 2015

Loading thumbnail…

Gist 4e7e44e2d03bdcba11e6

A bar chart displays the relative frequency of birthdays across the twelve months, with values ranging from 0.04 in February to 0.13 in July and September. The chart uses D3 version 3 to render SVG elements, manually computing bar widths from the dataset length and mapping monthly values to a linear y-axis scale with `d3.scale.linear()`. Data is loaded from a tab-separated file via `d3.tsv`, and each bar is drawn with a rectangle and a white value label, all styled with a steelblue fill.

May 4, 2015

Loading thumbnail…

Gist 1735d2daba8dced50df6

A bar chart displays the relative frequency of birthdays across the twelve months, with values ranging from 0.04 to 0.13. The chart uses SVG rendered through D3 v3, binding data from a CSV file and scaling bar heights with `d3.scale.linear`. Each month’s frequency is shown both as a steelblue rectangle and as a white text label. The code computes bar width by dividing the total width by the number of data points, and uses `d3.csv` with a custom type function to coerce values to numbers.

May 4, 2015

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load and parse a CSV file using D3 version 3. The page displays minimal text, directing attention to the browser’s developer console, where the data appears as an array of JavaScript objects. The code uses the `d3.csv` function to fetch and convert each row of the `betterlifeindex.csv` file, which contains national well-being indicators. After loading, the callback function logs the parsed data to the console with `console.log(data)`. The visualization itself is not rendered; instead, the focus is on verifying the data transformation pipeline from CSV to usable JSON-like structures.

May 3, 2015

Loading thumbnail…

Mobile Food Facilities in San Francisco Data

This visualization displays the locations and statuses of mobile food facility permits in San Francisco, plotted by their latitude and longitude coordinates from a CSV file. A map of the city is rendered using the D3.js library, with individual markers or points representing each permit, colored or distinguished by their approval status (e.g., APPROVED or REQUESTED). The code relies on D3’s geographic projection methods, such as `d3.geoPath` for drawing the map and `d3.projection` for converting coordinates, while the data is loaded and parsed via `d3.csv` from the provided `Mobile_Food_Facility_Permit.csv` file, allowing viewers to see the spatial distribution of food trucks across the city.

Mar 29, 2015