T

tracy3057

@tracy3057·34 public vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of proposal counts for primary departments, with interactive year buttons (2013–2021) that let users switch between datasets. The chart uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. A click on a year button updates the chart data and highlights the selected button, while bars are rendered as SVG rectangles. The x-axis formats tick labels with `.0s` and replaces "G" with "B", and hover states adjust bar opacity. The data is embedded as CSV strings within the code.

Loading thumbnail…

Fork of home dept top 5

This interactive bar chart displays the top five home schools ranked by proposal counts across multiple years, with clickable year buttons (2013–2021) that update the bars to reflect each year’s data. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` to position axes, a custom `draw` function to render SVG bars, and click event listeners to switch datasets and highlight the selected year. The chart includes a title, axis labels, and a tooltip behavior on bar hover, while defaulting to 2013 data.

Loading thumbnail…

Fork of Fork of home dept top 5

This interactive bar chart shows the top five home schools by proposal counts for each year from 2013 to 2021. Users click year buttons to update the visualization, which is rendered as SVG using D3 v6 with scaleLinear, scaleBand, and axis functions. The data is hardcoded as strings parsed via d3.csv, and each bar’s height reflects the proposal numbers. Clicking a rectangle appends a coordinate text label to the SVG, while hover effects reduce bar opacity.

Loading thumbnail…

Fork of Fork of home dept top 5

A bar chart displays the number of funding proposals for the top five primary departments at Columbia University across selected years from 2013 to 2021. Interactive year buttons highlight a chosen year and update the bars through D3.js v6 data joins with scaled linear and band scales. The visualization uses SVG rendering and hover effects on rectangles, though tooltips are not implemented.

Loading thumbnail…

home dept top 5

This visualization shows the number of proposals for primary departments (ENG, DSI, GEU, A&S, MED) across different years, with each year selectable via clickable buttons. A horizontal bar chart displays the top five departments, and hovering over bars triggers an opacity change. The chart uses d3.scaleLinear and d3.scaleBand for axes, with data embedded as CSV strings in the code. The visualization is rendered as SVG with a pink-to-palevioletred color scheme for year selection.

Loading thumbnail…

Customizing Axes

This example shows the number of employed workers across various occupations in New York City for each year from 2010 to 2019. It uses a horizontal bar chart with customized axes, including a formatted x-axis using `d3.format` to abbreviate large numbers and a categorical y-axis. The visualization is interactive, allowing users to click year buttons to update the displayed data. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG, with data loaded from a string and animation via transitions.

Loading thumbnail…

Customizing Axes

This example shows a bar chart of employment numbers across occupations in New York City, with interactive year buttons (2010–2019) that update the displayed data. The visualization uses d3.v6 with SVG rendering and animation. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, with a linear scale for the x-axis and a band scale for the y-axis. Clicking a year button triggers a redraw of the chart via inline CSV data, highlighting the selected year in blue.

Loading thumbnail…

Fork of Organization Graph Diagram

This network diagram visualizes the organizational structure of the Kenneth Rainin Foundation, depicting nodes as academic departments, research centers, and administrative offices, with links indicating interconnections. The visualization uses a force-directed layout implemented with d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter, rendered as an SVG with draggable circles. Node colors are defined via a Paletton-generated palette, and the graph is built from hardcoded JavaScript data representing Columbia University entities. The layout separates research and home nodes into two coordinated simulations, with labels truncated to eight characters.

Loading thumbnail…

Fork of Force Network

A force-directed network diagram displays the relationships between actors, directors, and films, with nodes representing individuals and movies. The visualization uses the D3.js library, specifically `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to calculate node positions, and renders the graph as an SVG. Links connect nodes, indicating "Acted in" or "Directed" relationships, with node colors differentiating group types. The chart is interactive, allowing nodes to be dragged, and includes markers for link arrows.

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows the organizational network of Columbia University’s DSI Department, with a central node connected to dozens of labeled department clusters, each surrounded by small leaf nodes. It uses D3’s force simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`) to layout the graph, with drag interaction enabled. Nodes are rendered as SVG circles and links as lines, with data defined in separate modules for node/link generation and a color palette. The example adapts a pre-existing graph structure to display academic department connections.

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This network graph maps organizational connections from the Kenneth Rainin Foundation, with nodes representing departments and programs such as “ENG Computer Science” and “A&S Chemistry.” The visualization uses d3.forceSimulation with forceManyBody and forceLink to position nodes, while SVG circles and lines render the structure. Node sizes distinguish categories—large red centers, medium blue DSI nodes, and small gray home nodes—and links inherit source colors. Data is defined in separate data.js and colors.js modules, with drag interaction allowing manual node repositioning.

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram maps institutional relationships from a dataset of Columbia University departments, centers, and labs. The visualization uses a force-directed layout, grouping entities by their administrative affinity while displaying each unit's name as a label. Built with the D3 v6 API, it calls `forceSimulation` alongside `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions, with `drag` enabling interactive repositioning. SVG circles and lines render the network, pulling data from the `nodes` and `links` arrays, and the color palette comes from the Paletton-generated `colors.js` module.

Loading thumbnail…

Customizing Axes

This interactive bar chart displays the number of employed people in New York City across 25 occupations, with buttons to switch between years from 2010 to 2019. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with `d3.axisBottom` and `d3.axisLeft` for custom ticks and gridlines. Data comes from local CSV files, and user clicks trigger redrawing of rectangles with updated scales. The SVG rendering includes custom tick formatting with `d3.format` to abbreviate large numbers.

Loading thumbnail…

Customizing Axes

This interactive bar chart shows the number of people employed in New York City across various occupations for each year from 2010 to 2019. Users click year buttons to update the visualization, which animates bar widths and the y-axis with smooth transitions. The chart uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, along with `transition` methods for the animation. Data is loaded from CSV files containing occupation and employment figures per year.

Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3.js v5 by displaying the number of employed people across various occupations in New York City from 2010 to 2019. Users click year buttons to update the bar chart, which animates transitions between datasets using `transition.attr` and `transition.duration`. The code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` with custom tick formatting via `format`. Data is loaded from CSV files, and the visualization renders as SVG rectangles with a steelblue fill.

Loading thumbnail…

Customizing Axes

This interactive bar chart displays the number of employed people in New York City across various occupations for each year from 2010 to 2019. Clicking a year button updates the displayed dataset. The visualization uses D3.js with linear and band scales to map values, and axes are customized with tick formats and labels. SVG rectangles represent the data, and transitions animate the updates when switching between years.

Loading thumbnail…

Victory!

This example displays a horizontal bar chart of country populations using Victory Charts and React hooks. The code loads data from a CSV file with d3.csv, converts population values to numbers, and renders the result with VictoryBar and VictoryChart components. The chart uses a custom style for tick labels and fixed padding to present the top ten most populous countries in descending order.

Loading thumbnail…

Untitled

This interactive line chart visualizes time-series data, comparing two different datasets loaded by default and via an update button. It displays the data as a single line, with the x-axis representing dates and the y-axis representing values. The chart uses D3.js to render an SVG, with axes and a line path updated smoothly using a transition. The code employs `d3.time.scale` and `d3.scale.linear` for scaling, and transitions to animate the line and axes when new data is loaded.

Loading thumbnail…

Customizing Axes

An interactive bar chart displays employment counts across occupations in New York City for each year from 2010 to 2019, using data from CSV files. Users click year buttons to update the visualization. The chart employs D3 v5’s `scaleBand` and `scaleLinear`, along with `axisBottom` and `axisLeft`, which are customized with tick formatting and removed gridlines. Transitions animate bar updates, while SVG rendering shows the data. The axes are styled per the CSS, and the title reads "Number of Employed in NYC."

Loading thumbnail…

Customizing Axes

This interactive bar chart displays employment data for various occupations in New York City across multiple years (2010–2019). Each bar’s length represents the number of employed individuals, with occupations listed vertically and sorted by value. The chart dynamically updates through transitions when new yearly CSV data loads, ensuring smooth visual changes. Built with D3 v5, the visualization uses `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to create custom axes with tick formatting and grid lines. SVG rectangles render the bars, and animated transitions via `transition().duration()` enhance the user experience. The data originates from provided CSV files per year.

Loading thumbnail…

Making a Bar Chart

This example showcases the top 10 most populous countries in 2018 based on United Nations data, using a bar chart built with D3.js. The visualization demonstrates custom axis styling and interactive elements, including animated transitions when data is updated. The code uses D3's `scaleBand` and `scaleLinear` for chart scaling, along with `d3.axisBottom` and `d3.axisLeft` for axes. It also features animated transitions via `.transition().duration()`, allowing bars to smoothly move or exit when the dataset changes. The SVG rendering includes interactive elements like mousemove and click events for dynamic user engagement.

Loading thumbnail…

Number of Employed of Different Occupations in New York City

This animated bar chart shows how employment levels across 25 occupations in New York City change over time, with bars ranking occupations by workforce size and shifting positions as values fluctuate. The visualization uses D3 v6 with SVG rendering, loading data from a CSV file via `d3.csv` and interpolating between yearly data points using `d3.rollup` and `d3.pairs`. Bars transition smoothly using `transition.attrTween` to update their y-position (rank) and width (employment count), while labels and a ticker display the current year.

Loading thumbnail…

Number of Employed of Different Occupations in New York City

This visualization tracks the annual number of employed workers across 25 distinct occupation categories in New York City from 2010 onward. Using a multi-line chart, it reveals employment trends and relative magnitudes for fields like office administration, sales, and management. The code parses the CSV data with `d3.csvParse` and renders the time-series using the D3 v6 library, with each occupation represented as a separate line. The chart highlights shifts in the city's workforce composition over the observed years.

Loading thumbnail…

Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization within VizHub, showing a static text message centered on the page. The code loads D3 v5 via UNPKG and uses the `select` API to target the `#message` div, setting its text content from a local ES6 module. The rendering approach relies on basic DOM manipulation through D3’s selection methods, with styling provided by an external CSS file.

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML” centered at a very large font size, alongside a JavaScript console message. It demonstrates the foundational structure of a web page using standard HTML tags, embedded CSS for styling the body element, and a script tag for client-side JavaScript. The code relies on native browser APIs such as `console.log` and does not use any external libraries or frameworks. The rendering approach is straightforward static HTML with inline CSS, serving as a bare-bones template for further web development.

Loading thumbnail…

Number of Employed in New York City

This horizontal bar chart displays the number of employed people in New York City, using population values from a CSV file that are multiplied by 1,000. The visualization shows the top 10 most populous countries based on 2018 United Nations estimates. It uses D3 v5 with `scaleLinear` and `scaleBand` for axes, `axisBottom` with custom tick formatting that abbreviates large numbers, and `axisLeft` for country labels. The SVG rendering includes a title, axis label, and steel-blue rectangles with gridlines.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the number of employed people across various occupations from 2010 to 2019, using data from the United Nations World Population Prospects. It demonstrates how to customize D3 axes for a horizontal bar layout. The visualization uses d3.csv to load yearly datasets, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for the axes, rendered as SVG elements. The code also includes a video tutorial in the README.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the number of employees in various occupations, using data from the United Nations’ World Population Prospects 2017. Built with D3 v5 and rendered as SVG, it shows a horizontal bar chart with a linear x-axis for employee counts, formatted with abbreviations, and a categorical y-axis for occupation names. The code customizes axes by removing domain lines and tick marks, and adds labels and a title. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using data from the United Nations World Population Prospects 2017. It builds on a basic bar chart by customizing the axes: the x-axis uses a linear scale with tick labels formatted as billions (e.g., “1.2B”), while the y-axis removes tick lines and the domain. The example uses D3 v5 APIs such as `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG. Axis labels, grid lines, and title styling are applied via CSS.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React components with D3 v5 scales (`scaleBand` and `scaleLinear`) for positioning, and renders horizontal bars as SVG `<rect>` elements. Population values are formatted using D3’s `format` function, converting values like billions into a compact "B" suffix. The chart loads CSV data via `d3.csv` and includes custom axes and tooltips showing exact population figures on hover.

Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The visualization demonstrates customized D3 axes, including a bottom axis with tick labels formatted in abbreviated units (converting "G" to "B") and tick lines spanning the full chart height, while the left axis removes its domain and tick lines entirely. The chart is rendered as SVG using D3 v5, with scales from `d3.scaleLinear` and `d3.scaleBand`, and axes from `d3.axisBottom` and `d3.axisLeft`. Labels are styled via external CSS.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React components with D3 v5 scales (`scaleBand` and `scaleLinear`) for positioning, and renders horizontal bars as SVG `<rect>` elements. Population values are formatted using D3’s `format` function, converting values like billions into a compact "B" suffix. The chart loads CSV data via `d3.csv` and includes custom axes and tooltips showing exact population figures on hover.

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018 using population estimates from the United Nations World Population Prospects, with the data loaded from a local CSV file. The example focuses on customizing D3 axes: the bottom x-axis uses `scaleLinear` with a tick format that converts billions to "B" via `format('.3s')` and `.replace('G', 'B')`, while the left y-axis uses `scaleBand`. Custom styling includes removed domain lines, tick lines styled via `axisBottom` and `axisLeft`, and axis labels and title added as SVG text elements.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React components with D3 v5 scales (`scaleBand` and `scaleLinear`) for positioning, and renders horizontal bars as SVG `<rect>` elements. Population values are formatted using D3’s `format` function, converting values like billions into a compact "B" suffix. The chart loads CSV data via `d3.csv` and includes custom axes and tooltips showing exact population figures on hover.