Joyce Robbins

@jtr13·8 public vizzes

Fork of Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart of population data for eleven countries, using D3.js v7 to render the visualization as SVG elements. The chart displays populations in millions, with country names on the y-axis and population values on the x-axis, using `d3.scaleLinear` and `d3.scaleBand` for the scales. Hovering over a bar triggers a transition that changes its opacity and displays a temporary tooltip text element, which is removed on mouseout. The data is loaded from a CSV file using `d3.csv` and parsed into numeric values for rendering.

Dec 14, 2022

Loading thumbnail…

Hello STAT 5293

This example demonstrates the basic setup of a VizHub project using D3.js. It displays a large, centered text message that reads "Hello everyone!" within an HTML page. The code imports the `select` function from D3 to target a div element by its ID and sets its text content using a local ES6 module. It includes the D3 library via CDN and uses custom CSS for styling. The example serves as a minimal template for combining D3 API calls with modular JavaScript.

Apr 21, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js project within VizHub, showing a simple text message displayed in the center of the page. It loads D3 v5 from a CDN and uses the `select` API to update the content of an HTML element. The code also illustrates ES6 module imports, pulling a string from a local module and rendering it. A small CSS file centers the message with a large font size, while the HTML structure provides the container for the output.

Dec 2, 2021

Loading thumbnail…

SO

This example displays a bar chart of values for eight consecutive dates in October 2016, with rotated date labels on the x-axis and a dollar-valued y-axis. The SVG rendering uses D3 v4’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to map the parsed time data to rectangles, with bars sized by `x.bandwidth()` and height derived from the linear scale. Axis labels are rotated via SVG `transform` attributes, and the chart is embedded in a plain HTML page without a framework.

Dec 2, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a static HTML page with the message "Hi HTML!" centered in large text, rendered through CSS styling. The page utilizes an SVG element that remains empty, providing a placeholder for potential graphical content. The implementation relies on standard HTML, CSS, and JavaScript, as described in the accompanying README. The code exemplifies a minimal setup for web-based visualization, with the message styled at a font size of 13em and aligned to the center of the viewport.

Dec 1, 2021

Loading thumbnail…

Timeline

This timeline visualization shows the growth of VizHub users from its launch in August 2018 through March 2021, with each user count plotted as a circle along a time axis. The code loads articles.csv containing New York Times COVID-19 and climate articles, using their publication dates to position cyan circles in the same timeline. Built with D3 v6, it uses `d3.scaleTime`, `d3.axisBottom`, and `.tickSize` to render the grid, while mouseover events display article URLs via appended text elements. The SVG canvas resizes responsively using `document.body.clientWidth` and `clientHeight`.

Apr 11, 2021

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

Nov 30, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render an SVG path. Data from Data Canvas – Sense Your City is plotted as a smooth, maroon curve, with gridlines and labeled axes. The chart’s title, “A Week in San Francisco,” appears above the plot, and the code styles ticks, labels, and the path via external CSS.

Nov 29, 2020